CODEWITHSUNDEEP
angularjsangularangular-cli
davkraid
davkraid

Reputation: 150

angular-cli: Use different templates depending on the environment

I'm using @angular/cli: 1.0.0 and I want to use component templates depending on the environment. I've already implemented this:

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

@Component({
  selector: 'tbe',
  templateUrl: environment.BASE_TEMPLATE_PATH+'app.component.html'
})
export class AppComponent {
  ...
}

My environment setting looks like this:

export const environment = {
  production: false,
  BASE_TEMPLATE_PATH: '../templates/default/'
};

The building process actually works but the browser console throws an error:

Error: Cannot find module "."

If I replace environment.BASE_TEMPLATE_PATH+'app.component.html' with the actual path, it works.

Is it possible to use environment variables here? If yes, where is my mistake?

UPDATE:

I found a better solution for my problem: http://www.smartjava.org/content/dynamic-component-loading-angular2-replace-compile

I've changed the plunker example to set a templateUrl instead of the plain html template and this works: https://plnkr.co/edit/tfxl3ba869oFtrqzyLNk

The Problem:

ComponentResolver is depreciated and I can't use it with the current Angular4 version. I tried it with ComponentFactoryResolver but it doesn't work.

Upvotes: 2

Views: 2005

Answers (2)

codingbuddha
codingbuddha

Reputation: 707

What also would work (at least in the latest Version of Angular) would be

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

const env = environment;

@Component({
  selector: 'tbe',
  templateUrl: env.BASE_TEMPLATE_PATH+'app.component.html'
})

export class AppComponent {
  ...
}

I am facing the same task so I fiddles around. I also can confirm, that the other files are not included in your AOT-build.

Upvotes: 0

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

I have seen this issue before, the reason it's complaining is that the path obtained from the environment.ts file becomes relative to environment.ts file and NOT the AppComponent.ts as you'd expect.

Try 

export const environment = {
  production: false,
  BASE_TEMPLATE_PATH: 'absolute/path/to/template/file'
};

and see if it works.

For a better solution, you'll have to write a function that can accurately give the absolute path to the template file.

This is a really ugly, hack-ish way of doing it, but it seems like you understand the risk here.

Upvotes: 0

Related Questions