CODEWITHSUNDEEP
angularcompilation
Juhana Pietari Lehtiniemi
Juhana Pietari Lehtiniemi

Reputation: 449

Leaving some components out of production build in Angular2?

Is there some way to leave out the components/parts of code of my choice at build time for the production build in Angular2/4?

I have an app that has an admin tool that I use locally. I would like this admin tool left out of the production version of the app. I can - of course - comment the code each time I do a production build, but is there some more elegant solution? Like conditional build on certain parts of the code?

I'm looking for something like *ngIf="buildingForProduction"-type of solution of anything in this direction. Does it exist?

Upvotes: 4

Views: 2312

Answers (2)

Juhana Pietari Lehtiniemi
Juhana Pietari Lehtiniemi

Reputation: 449

Based on the answer by @cyrix.

When using ang cli, there's a folder called environment which contains the files environment.prod.ts and environment.ts by default. You can add more for different builds if you want and config your app accordingly.

These files contain an object like this:

export const environment = {
  production: false,
  myVariable: 'This variable is not included in production build'
};

When you build your app with

ng build --env=prod

Then ang cli will use the environment.prod.ts. If you build with

ng build

Then the default environment.ts is used.

By adding variables to this environment object, you can then import it within the app and read the variables. Like this you can check if you're in the production build or not:

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs false for default environment
  }
  title = 'app works!';
}

Upvotes: 2

Mauricio De La Quintana
Mauricio De La Quintana

Reputation: 2442

One possible solution would be to modify your tsconfig.json and adding in the exclude, the folders or files your want to add. 

"exclude": [
  "**/*file.ts", 
  "**/*config.ts"
]

unfortunately you only can have one tsconfig.json file per project it would be nice to have multiple like dev, prod, hope to see this feature comming soon https://github.com/Microsoft/TypeScript/issues/3645. Hope it helps.

Upvotes: 0

Related Questions