I would like to exclude certain ponents from my production build in Angular 5+. So far I have read around and I understand the concepts of environment variables, but to my understanding those are available at runtime. What I am looking for is to actually exclude certain modules from ever being imported so that the code for them does not get to the production build (files).

I also dont want to have an <div *ngIf="isProduction">...</div> laying around, what I would rather want to do is something like this:

Component({ ... templateUrl: environment.production ? 'app.prod.html' : 'app.html' })

However this is also not possible due to how the Angular piler works.

I guess the answer to this is to tweak the angular-cli, but given there is no good documentation (that I can find), I'd like to know if someone perhaps has a better idea?

I would like to exclude certain ponents from my production build in Angular 5+. So far I have read around and I understand the concepts of environment variables, but to my understanding those are available at runtime. What I am looking for is to actually exclude certain modules from ever being imported so that the code for them does not get to the production build (files).

I also dont want to have an <div *ngIf="isProduction">...</div> laying around, what I would rather want to do is something like this:

Component({ ... templateUrl: environment.production ? 'app.prod.html' : 'app.html' })

However this is also not possible due to how the Angular piler works.

I guess the answer to this is to tweak the angular-cli, but given there is no good documentation (that I can find), I'd like to know if someone perhaps has a better idea?

• javascript
• angular
• webpack
• angular-cli

Share Improve this question Follow edited Apr 4, 2018 at 11:47 Max101 asked Apr 4, 2018 at 8:58 Max101Max101 60011 gold badge77 silver badges1818 bronze badges 1

• Spent a while searching for a good answer and I still can't seem to find one. @Max101 Have you managed to find a solution better than the one I've posted below? – Matthew Mullin Commented Aug 28, 2018 at 15:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

For those looking for a *not so scalable* solution.

Solution is for Angular 5 / Angular 6+

You can switch specific files depending on what environment you are building/serving by adding each file pair in the angular.json file.

For example, if you wish to use app.prod.html instead of app.html in your app ponent only when using the production environment / configuration.

In angular.json add your replacments in the fileReplacements array under the config you wish to have replaced:

{
  ...
  "projects": {
    ...
    "configurations": {
      "production": {
        ...
        "fileReplacements": [
          ...
          *** ADD YOUR REPLACEMENT FILES HERE ***
          ...
        ]
      }
    }
  }
}

Using the above example:

{
  ...
  "projects": {
    ...
    "configurations": {
      "production": {
        ...
        "fileReplacements": [
          ...
          {
            "replace": "src/app/app.html",
            "with": "src/app/app.prod.html"
          }
          ...
        ]
      }
    }
  }
}

Not a pretty solution as it seems you will be doing this for each file you wish to replace but it should work nontheless.

---

Build or serve the specific config with

ng serve --configuration=production
ng build --configuration=production