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

Question

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

"Can't bind to 'ngIf' since it isn't a known property"

如果我试图在动态模块中加载公共模块，它会抛出重复错误

动态路由（应用程序路由）：

  {
    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'
      }
    ]
}

};

Answer 1

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

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

})
export class TabularReportsFachadeModule {

  static routing = routing;
}

Answer 2

您还需要添加 BrowserModule。

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

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

和

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

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

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

angular 2 webpack 2 lazy load module throwing template parse error

lazy-loading

webpack

angular2-routing

webpack-2

angular