首页 文章

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

提问于
浏览 次
1

即时通讯使用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

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 .

    回复于
  • 1

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

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

})
export class TabularReportsFachadeModule {

  static routing = routing;
}
    回复于

相关问题