Exclude components from build using Angular Ivy

user_7154462 0
Viewed 191

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

angular-ivy angular webpack javascript
1 Answers

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

user_71544620
Related