Question

我们正在使用Angular2构建一个Web应用程序。我们需要为每个组件提供多个模板（html和css），但行为相同。

我们知道在构建要使用的模板之前。所以我们想用“template1”或“template2”=＆gt;构建（或用于开发）一个组件的不同布局。我们不希望在每个模板中包含但只包含一个模板。

最后，我们希望能够使用这种脚本构建：

npm run build template1

我们正在考虑这个文件夹组织：

-src
   -app
      -component
        - temlate.1.html
        - temlate.2.html
        - style.1.scss
        - style.2.scss
        - main.scss
        - component.ts

我们怎么能这样做？在webpack中？

我用全局变量尝试过这种方式：

import { Component, OnInit } from '@angular/core';
const myGlobal = require('../globals');
const template = require('./templates/'+myGlobal.templateName+'/view1.component.html');

@Component({
  selector: 'app-view1',
  template: template,
  styles: [require('./templates/'+myGlobal.templateName+'/view1.component.scss')]
})

它在“ng serve”“ng build”上工作正常但不是“ng build -prod”

ERROR in Error encountered resolving symbol values statically. Calling function 'require', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol View1Component in D:/git_/ngCustomTpl2/
src/app/view1/view1.component.ts, resolving symbol View1Component in D:/git_/ngCustomTpl2/src/app/view1/view1.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'D:\git_\ngCustomTpl2\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

谢谢，

斯特凡。

如何处理angular2中的多个模板（html / css）？

0 个答案: