angular 2 webpack 2延遲加載模塊拋出模板解析錯誤

Question

即時通訊使用webpack 2.2.0。我的AppModule正確加載，並在路線塊被下載，但它引發的模板語法錯誤

「不能綁定到‘ngIf’，因爲它不是一個已知的財產」

如果我嘗試加載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

您需要添加BrowserModule了。

將BrowserModule導入根模塊中的CommonModule和其他模塊中要使用常用指令的CommonModule。

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

和

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

BrowserModule出口CommonModule，這樣就沒有必要直接在根模塊中導入CommonModule。

Answer 2

吳模塊添加CommonModule使用一些常用的指令：

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

}) 
export class TabularReportsFachadeModule { 

    static routing = routing; 
}