Angular14 configurations.production.fileReplacements with module.ts problem

Question

I need to have different module for dev mode and prod mode so I think to use the angular.json option of fileReplacements creating a test.module.ts and test.module.prod.ts.
Then I add the following to the angular.json configuration:

{
    "replace": "src/app/test/test.module.ts",
    "with": "src/app/test/test.module.prod.ts"
}

But in this way I have the error the Component 'Test1Component' is declared by more than one NgModule. and this for all component declared in TestModule.

There is a workaround for this issue?

Answer 1

You can wrap all the components that are common for both modules into a third module and export them. Then import this module into your test modules. Something like this

@NgModule({
    declarations: [Test1Component],
    exports: [Test1Component],
})
export class TestCommonModule {}

// your test.module.ts
@NgModule({
    imports: [TestCommonModule]
})
export class TestModule {}

// your test.prod.module.ts
@NgModule({
    imports: [TestCommonModule]
})
export class TestProdModule {}

Or you can just keep one module and configure it based on imported environment.ts and put this file into the file replacements. This would be even better. Look at this: https://angular.io/guide/build