角2 webpack 2遅延ロードモジュールがテンプレート解析エラーを投げる

Question

im webpack 2.2.0を使用しています。私appmodule負荷が適切ともルート上のチャンクがダウンロードされますが、それは、テンプレートのパースエラーがスローされます

イムcommonmoduleをロードしようとしている場合

「それは知らプロパティではありませんので、 『ngIf』にバインドできません」動的モジュールでは

動的経路（APP-ルーティング）重複エラーをスロー：

{ 
    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をインポートします。

@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; 
}