如何添加模拟到本地构建?

Question

我正在使用Angular创建库项目来创建web组件。我的项目在/projects文件夹中;/src用于本地页面检查库

我的mock被添加到/src模块中——所以当把库作为Angular模块加载时，它们可以正常工作。

但是如何将它们添加到main.js bundle中呢?比如，如果这是prod构建-不要包含mock;如果这个本地构建包含mock。

如何选择在构建时将什么服务加载到模块?或者我如何为类似生产的bundle创建构建序列，但是使用mock ?

Answer 1

如何选择在构建时将什么服务加载到模块?

您可以有条件地导入Module(以及此模块中的服务)，例如基于environment.production标志。

@NgModule({
declarations: [AppComponent, ...],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
...,
environment.production ? [] : MockModule   // THIS LINE IS IMPORTANT
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}

在上面的例子中，你将MockModule导入到应用程序中，只用于生产构建，否则你导入空数组。

Angular.json文件有fileReplacements部分，您可以为不同的构建配置指定不同的文件(dev, prod等)。

如果你通过ngcli生成项目，environment.ts和environment.prod.ts应该是开箱即用的，但你也可以用你自己的配置更新fileReplacements部分(你想要的构建配置，例如生产)，并使用其他文件，如果你更适合你。

// angular.json
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],