angular 2 webpack 2延迟加载模块抛出模板解析错误答案

【问题标题】：angular 2 webpack 2 lazy load module throwing template parse errorangular 2 webpack 2延迟加载模块抛出模板解析错误
【发布时间】：2017-06-17 01:43:30
【问题描述】：

我正在使用 webpack 2.2.0 。我的 appmodule 正确加载，并且在路径上下载了块，但它引发模板解析错误

“无法绑定到 'ngIf'，因为它不是已知属性”

如果我试图在动态模块中加载 commonmodule 会引发重复错误

动态路由（app-routing）：

  {
    path: "reports/:id",
    loadChildren: () => {
        return System.import('./reports/tabularReportsFachade/tabularReportsFachade.module').then((comp: any) => {
            debugger
            return comp.TabularReportsFachadeModule;
        });
    }

子路由：

const routes: Routes = [
{
    path: "",
    component: TabularReportsFachadeComponent,pathMatch: 'full'
}
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);

子模块：

 @NgModule({
imports: [ routing, FormsModule],
exports: [MyComponents],
declarations: [MyComponents],
bootstrap: [TabularReportsFachadeComponent],

})
 export class TabularReportsFachadeModule {

static routing = routing;
}

webpack.config

var path = require('path');

module.exports = {
entry: {
    'polyfills': './Scripts/polyfills',
    "vendor": "./Scripts/vendor",
    "main": "./Scripts/main"
},
output: {
    filename: "./Scripts/[name].bundle.js",
    path: __dirname,
    publicPath: '/'
},
resolve: {
    extensions: [".ts", ".js", ".html"]
},
devtool: 'sourcemap',
module: {
    loaders: [
      {
          test: /.ts$/,
          loader: 'babel-loader!ts-loader'
      },
      {
          test: /.css$/,
          loader: 'style-loader!css-loader!sass-loader'
      }
    ]
}

};

【问题讨论】：

标签： angular webpack lazy-loading angular2-routing webpack-2

【解决方案1】：

您还需要添加BrowserModule。

在根模块中导入 BrowserModule，在其他要使用通用指令的模块中导入 CommonModule。

@NgModule({
  imports: [BrowserModule],
  ...
})
class AppModule {}

和

@NgModule({
  imports: [CommonModule],
  // Now MyComponent has access to ngIf
  declarations: [MyComponent]
  ...
})
class OtherModule {}

BrowserModule 导出 CommonModule，这样就不需要在根模块中直接导入 CommonModule。

【讨论】：

【解决方案2】：

Ng 模块添加CommonModule 以使用一些常用指令：

@NgModule({
  imports: [ routing, FormsModule, CommonModule ],
  exports: [MyComponents],
  declarations: [MyComponents],
  bootstrap: [TabularReportsFachadeComponent],

})
export class TabularReportsFachadeModule {

  static routing = routing;
}

【讨论】：

因为我已经在我的 appmodul 中导入了 commonModule，所以再次导入这里会出现重复的模块错误
我不这么认为，也许你已经在 AppModule 中导入了 BrowserModule，然后你也导入了 CommonModule。注意，BrowserModule 包括 CommonModule。如果您已经拥有 BrowserModule，请移除 CommonModule。但在其他模块中，如果你想使用 ngIf、NgFor 等指令，则需要导入 CommonModule 或 BrowserModule，而不是两者。