作为例子，对于SPA开发（如Vuejs等），通过将WebAPI的响应在Webpack的DevServer中作为模拟服务运行，以提高开发效率是一种常见的方法，但在Angular中（内内存Web API是主流吗？）仅依赖的Webpack无法实现这一点，因此我决定将其作为备忘录整理成文章。

想要设定环境

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.1.2
Node: 14.15.4
Package Manager: npm 7.20.0
OS: darwin x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1201.2 (cli-only)
@angular-devkit/core         12.1.2 (cli-only)
@angular-devkit/schematics   12.1.2 (cli-only)
@schematics/angular          12.1.2 (cli-only)

创建项目

使用ng创建。特别是不更改设置，保持默认设置。

$ ng new sample
// デフォルトのままエンター連打
$ tree ./sample
./sample
├── README.md
├── angular.json
├── karma.conf.js
├── node_modules
     // 省略
├── package-lock.json
├── package.json
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

添加自定义的webpack配置

由于原始的 Angular 附带的 Webpack 无法实现，因此需要额外引入 custom-webpack 并配置 angular.json。
顺带一提，还需要添加 @types/webpack-dev-server 以便以 TypeScript 编写 DevServer 的设置（在 extra-webpack.config.ts 文件中）。

$ npm i -D @angular-builders/custom-webpack
$ npm i -D @types/webpack-dev-server

       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+              "path": "./extra-webpack.config.ts"
+            },
             "outputPath": "dist/angular",
             "index": "src/index.html",
             "main": "src/main.ts",

           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "angular:build"
           },

创建extra-webpack.config.ts文件

将用作模拟服务的Web API响应记录在extra-webpack.config.ts中。

$ tree ./sample
./sample
├── README.md
├── angular.json
├── extra-webpack.config.ts     ## ここに新規作成
├── karma.conf.js
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

import { Configuration } from 'webpack';
import 'webpack-dev-server';

export default {
    devServer: {
        before: (app, server) => {
            app.get("/api/sample", (req, resp) => {
                // モック内容を定義
                resp.json({
                    resultCode: 0
                });
            });
        }
    }
} as Configuration;

创建客户端代码 (Chuangjian kehuduan daima)

创建一个WebAPU调用的示例代码。

+import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
+   HttpClientModule,
  ],
})
export class AppModule { }

import { Component } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sample';

+  constructor(private http: HttpClient) {
+    http.get('/api/sample').toPromise()
+      .then(resp => {
+        alert(resp);
+      })
+      .catch((err: HttpErrorResponse) => {
+        console.error(err);
+      })
+  }
}

确认操作

打开应用程序并使用浏览器打开开发者工具，您应该能够确认在通信中正在进行GET请求，地址为/api/sample。

$ ng serve --open
// ブラウザが起動するので開発者ツールを起動してコンソールを確認

整理

我尝试总结了使用Angular和Webpack的devserver的自定义方法，但我觉得这次的内容还是意外地很少有相关信息可以搜索到。
在Angular中，使用官方指南中提到的In-memory Web API可能也能实现我们的目标。
或者可以使用devserver的proxy功能，将请求反向代理到真实的Web API，而不是使用模拟数据。如果选择代理的方式，就不必使用@angular-builders/custom-webpack，只需使用Angular附带的webpack即可，所以可能更加方便一些。