Question

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

＆＃34;无法绑定到＆＃39; ngIf＆＃39;因为它不是一个已知的财产＆＃34;

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

动态路线（应用路由）：

  {
    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延迟加载模块抛出模板解析错误

2 个答案: