angular-cli：根据环境使用不同的模板答案

【问题标题】：angular-cli: Use different templates depending on the environmentangular-cli：根据环境使用不同的模板
【发布时间】：2017-08-30 23:23:34
【问题描述】：

我正在使用 @angular/cli: 1.0.0 并且我想根据环境使用组件模板。我已经实现了这个：

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

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

我的环境设置如下：

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

构建过程确实有效，但浏览器控制台抛出错误：

Error: Cannot find module "."

如果我将 environment.BASE_TEMPLATE_PATH+'app.component.html' 替换为实际路径，它会起作用。

这里可以使用环境变量吗？如果是，我的错误在哪里？

更新：

我为我的问题找到了更好的解决方案：http://www.smartjava.org/content/dynamic-component-loading-angular2-replace-compile

我已经更改了 plunker 示例以设置一个 templateUrl 而不是普通的 html 模板，这有效：https://plnkr.co/edit/tfxl3ba869oFtrqzyLNk

问题：

ComponentResolver 已经过时了，我不能在当前的 Angular4 版本中使用它。我用 ComponentFactoryResolver 尝试过，但它不起作用。

【问题讨论】：

组件真的需要多个模板文件吗？您可以考虑将条件移动到模板本身 (*ngIf)，因此组件将具有模板文件的静态名称。
@Ján Halaša 一些模板与默认模板确实不同。我们有多个具有相同核心功能但模板和样式不同的客户端。为了更好地维护应用程序和更小的客户端版本，每个环境最好使用不同的模板。
我以最简洁的方式在我目前从事的项目中进行了模板化，之前有过这个错误，我认为你不能将变量放入装饰器中。您是否尝试过调用函数？做一个小测试，在外面声明一个函数，导出函数......然后，在装饰器中调用它...... templateUrl：functionTest（），我想我做了那样的事情并且工作了一次......

标签： angularjs angular angular-cli

【解决方案1】：

我以前见过这个问题，它抱怨的原因是从environment.ts 文件获得的路径变得相对于environment.ts 文件和不是 AppComponent.ts 如你所料.

试试

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

看看它是否有效。

为了获得更好的解决方案，您必须编写一个函数来准确地给出模板文件的绝对路径。

这是一种非常丑陋、骇人听闻的做法，但您似乎了解这里的风险。

【讨论】：

【解决方案2】：

什么也会起作用（至少在最新版本的 Angular 中）

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 {
  ...
}

我面临同样的任务，所以我摆弄着。我还可以确认，其他文件不包含在您的 AOT 构建中。

【讨论】：