I am building two separate sites from a single angular project. I am using environment variables to keep track of the single site.
export const getHomeComponent = (): any => {
switch (environment.sitename) {
case EmbassyName.BHCL:
return HomeComponent;
case EmbassyName.NL:
return HomeNlComponent;
}
};I am seeing that the two components are being present in the production build. Is there a way for angular Ivy to implement tree shaking algorithm? My angular version is 11.2.14
As @MikeOne pointed out, a solution can be achieved by aliasing Component in the environment file.
In environment.bhcl.ts:
export { HomeComponent } from '../app/public/home/home.component';
And in environment.nl.ts:
export { HomeNlComponent as HomeComponent } from '../app/public/multiple-embassy/nl/home-nl/home-nl.component';
In the module/routing-module file I am importing HomeComponent and declaring it.
As a side effect I am getting circular dependency errors because of the environment file import. Maybe making a environment-service would solve it.
Edit: Another solution I have found is to separate the projects using ng g application app-bhcl etc. A library module can be created using ng g library lib and putting common functions there. In this way there is no way to put separate package.json, so multiple projects will have to use same node_modules.
Edit 2: Another solution is to create separate app.modules/app-routing.modules and replace them in angular.json during build/serve.
{
"replace": "src/app/app.module.ts",
"with": "src/app/app.nl.module.ts"
},
{
"replace": "src/app/app-routing.module.ts",
"with": "src/app/app-routing.nl.module.ts"
}
After that, you would then create separate modules (in my case public.module and public-nl.module) and place them in respective app/app-routing modules