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