0

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.

Salva
  • 1
  • 4
  • change the url for each build? have you also tried using ngif's? – mast3rd3mon Oct 04 '18 at 08:21
  • Your safest bet is to use webpack or similar pre-processing tool to rewrite your component's `templateUrl` to a different one _before_ passing it through the rest of the pipeline. Utilize some naming convention (eg. `cmp-name.template.a.html` and `cmp-name.template.b.html`). – Lazar Ljubenović Oct 04 '18 at 08:21
  • Using `ngIf`s would bloat the app with unnecessary code. You can't tree-shake templates (yet). – Lazar Ljubenović Oct 04 '18 at 08:22
  • @LazarLjubenović thanks. We saw this approach before and it was our first approaching but it's not recommended by some users. Instead they recommend insistently to generate different projects with cli commnad as the best practice because is to go against angular principles. But in this way the main problem should be share same routing for each project. – Salva Oct 04 '18 at 08:39

1 Answers1

0

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']
})
Salva
  • 1
  • 4