Change between two different templatesUrl in Angular 6 component

Question

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.

Answer 1

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']
})