How to add mocks to local build?

Issue

I'm using Angular to create library project to create web-components. So my project in /projects folder; /src is used for local page to check library.

My mocks are added into /src module - so when loading library as Angular module, they works.

But how to add them into main.js bundle? Like, if this is prod build - don't include mocks; if this local build - include mocks.

How to choose what service will be loaded to module at build time? Or how can I create build sequence for production-like bundle but with mocks?

Solution

How to choose what service will be loaded to module at build time?

You can conditionally import Module (and thus services in this module) based e.g. on environment.production flag.

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

In the example above you import your MockModule to the app only for production build, otherwise you import empty array.

Angular.json file has fileReplacements section, where you can specify different files for different build configuration (dev, prod, etc.).

environment.ts and environment.prod.ts should be available out of the box if you generated project via ng cli, but you can also update fileReplacements section (of your desired build configuration, e.g. production) with your own configuration and use other files, if you it suites you better.

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

Answered By - mimo