Exclude components from build using Angular Ivy

Question

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

I don't think tree shaking can solve this as this is runtime logic. The way to do this is to use provider logic I think? So in the module it belongs to, you either provide one class or the other (with a factory function or with useClass - I'm not sure). — MikeOne, Oct 05 '21 at 10:29
No - and now I think about it a bit more - that probably won't just work anyway. What might work is to have different environment files per language (and target those with configuration=) - where you export the correct component from. So for the NL environment file something like export { HomeNLComponent as HomeComponent from '../../pathtocomponent'} and then import it from the environment file in the module you need it in. Not 100% sure if that simply works though? I would probably choose to conditionally lazy load either the component or the 'NL' module at runtime. — MikeOne, Oct 05 '21 at 10:55
I think conditionally lazy loading the component would not exclude it from the build bundle. — desertSniper87, Oct 05 '21 at 11:58
It would be in the build as a separate chunk, but it would only be loaded on demand. — MikeOne, Oct 05 '21 at 12:20

desertSniper87 · Answer 1 · 2021-10-10T12:02:33.983

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

Exclude components from build using Angular Ivy

1 Answers1