angularroutescomponentscommand-line-interfacemultiple-projects

Change between two different templatesUrl in Angular 6 component


In Angular 6 we have two different templates .html for each component and we need to change it depending the environment we deploy.

We're looking the best practice to do that.

Thinking about solutions:
- It's not possible to pass a var to the component decorator.
- Since Angular CLI 6 its possible generate multiple projects (ng generate --application ).

This last point could be a solution but we need to share the same route.


Solution

  • While we're looking for a webpack plugin to string-replace we found a really simple way to do it in this github reference.

    The key is change the component decorator "templateUrl" to "template" and pass a require with vars as this example:

    var url = environment.option ? '.other' : '';
    
    @Component({
      selector: 'app-root',
      template: require('./app.component' + url + '.html'),
      styleUrls: ['./app.component.scss']
    })