本地调整angular8的devkit的逻辑以便于使用before方法进行api的mock

使用angular8进行项目开发，但是请求数据api的时候没找到官方给的使用webpack-devServer之before方法的api，现在找了个折中的办法，直接本地调整devkit的module配置，简单实现了。

1.调整schema.json文件

• 路径: node_modules/@angular-devkit/build-angular/src/dev-server/schema.json
• 增加before，否则启动的时候会报错，不支持before选项

{
  "properties": {
    // start
    "before": {
      "type": "string",
      "description": "before function"
    }
    // end
  }
}

2.调整启动的时候获取配置的逻辑

• 路径: node_modules/@angular-devkit/build-angular/src/dev-server/index.js
• 调整 buildServerConfig 方法的配置以增加before的糅合

// start
if(serverOptions.before) {
  const beforePath = path.resolve(workspaceRoot, serverOptions.before);
  if (fs_1.existsSync(beforePath)) {
      config.before = require(beforePath);
  }
  else {
      const message = 'Before function file ' + beforePath + ' does not exist.';
      throw new Error(message);
  }
}
// end
return config;

3.调整angular.json配置

{
  "projects": {
    "ulives-angular": {
      "architect": {
        "serve": {
          "options": {
            "port": 9000,
            // start
            "before": "./mock.js"
            // end
          }
        }
      }
    }
  }
}

4.添加mock.js文件

module.exports = (app, server, compiler) => {
  app.get('/mock/list', function (req, res) {
    res.json({ success: true, msg: 'this is list2' });
  });
}

5.调整angular.json

{
  "projects": {
    "project-namt": {
      "architect": {
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ulives-angular:build",
            "proxyConfig": "./proxyConfig.js",
            "port": 9000,
            // start
            "before": "./mock/api.js"
            // end
          }
        }
      }
    }
  }
}

6.测试

• ng serve 或者 npm start 启动
• 浏览器访问 http://localhost:9000/mock/list 测试返回的数据是否为期待
• 返回数据成功

该方法调整完毕，本地可以实现api的mock，但是依赖重新安装之后还会被冲掉。有更好的方法欢迎留言

可以参考 angular分类中-angular中自定义webpack配置一文，更好的使用webpack的配置