2017-03-31 1 views
0

.Net Core와 Webpack에서 Angular 2를 사용하고 있습니다. 내 응용 프로그램에 모듈을 동적으로로드하려고합니다. 다음은 응용 프로그램 구성 요소는 다음과 같습니다 "this.loader.load (menu.modulePath)"내가 오류를 얻을에서SystemJsNgModuleLoader "시스템이 정의되지 않았습니다."

//our root app component 
 
import { NgModule } from '@angular/core' 
 
import { BrowserModule } from '@angular/platform-browser' 
 
import { 
 
\t Component, 
 
\t ViewContainerRef, 
 
\t Compiler, 
 
\t ComponentFactory, 
 
\t ComponentFactoryResolver, 
 
\t ModuleWithComponentFactories, 
 
\t ComponentRef, 
 
\t ReflectiveInjector, 
 
\t SystemJsNgModuleLoader, 
 
\t AfterViewInit, 
 
\t OnInit, 
 
\t NgModuleFactory 
 
} from '@angular/core'; 
 

 
export class ModuleNode { modulePath: string; componentName: string; } 
 

 
@Component({ 
 
    selector: 'app', 
 
    template: require('./app.component.html'), 
 
    styles: [require('./app.component.css')] 
 
}) 
 
export class AppComponent implements AfterViewInit { 
 

 
\t widgetConfig: string; 
 
\t module: ModuleNode; 
 
\t cmpRef: ComponentRef<any>; 
 

 
\t constructor(private viewref: ViewContainerRef, 
 
\t \t private resolver: ComponentFactoryResolver, 
 
\t \t private loader: SystemJsNgModuleLoader, 
 
\t \t private compiler: Compiler) { 
 
\t \t this.module = new ModuleNode(); 
 
\t \t this.module.modulePath = "./dynamic.module"; 
 
\t \t this.module.componentName = "TestComponent"; 
 
\t } 
 

 
\t ngAfterViewInit() { 
 
\t \t this.openWebApp(this.module); 
 
\t } 
 

 
\t ngOnInit() { 
 
\t \t 
 
\t } 
 

 

 
\t openWebApp(menu: any) { 
 
\t \t this.loader.load(menu.modulePath) // load the module and its components 
 
\t \t \t .then((modFac) => { 
 
\t \t \t \t this.compiler.compileModuleAndAllComponentsAsync<any>(modFac.moduleType) 
 

 
\t \t \t \t \t .then((factory: ModuleWithComponentFactories<any>) => { 
 
\t \t \t \t \t \t return factory.componentFactories.find(x => x.componentType.name === menu.componentName); 
 
\t \t \t \t \t }) 
 
\t \t \t \t \t .then(cmpFactory => { 
 

 
\t \t \t \t \t \t // need to instantiate the Module so we can use it as the provider for the new component 
 
\t \t \t \t \t \t let modRef = modFac.create(this.viewref.parentInjector); 
 
\t \t \t \t \t \t this.cmpRef = this.viewref.createComponent(cmpFactory, 0, modRef.injector); 
 
\t \t \t \t \t \t // done, now Module and main Component are known to NG2 
 

 
\t \t \t \t \t }); 
 
\t \t \t }); 
 
\t } 
 

 
\t ngOnDestroy() { 
 
\t \t if (this.cmpRef) { 
 
\t \t \t this.cmpRef.destroy(); 
 
\t \t } 
 
\t } 
 
}

"시스템이 정의되어 있지 않습니다." 내가 누락 될 수있는 SystemJs의 일부가 될 수도 있지만 .Net Core 및 Webpack에서는 더 이상 필요하지 않아야합니다. 내가 맞습니까?

+0

어떤 버전의 웹팩을 사용하고 있습니까? – yurzui

+0

내 버전 : webpack : 1.12.14, webpack-externals-plugin : 1.0.0, webpack-hot-middleware : 2.10.0, webpack-merge : 0.14.1, – user3541236

+1

webpack2가 필요하고이 스레드를 확인하십시오. https : //github.com/angular/angular-cli/issues/2302 – yurzui

답변

0

yurzui 덕분에 webpack을 버전 2로 변경했는데 오류가 사라졌습니다.

하지만 이제 모듈을 찾는 데 문제가 있습니다. "vendor.js : 59947 EXCEPTION : ./AppComponent 클래스의 오류 AppComponent_Host - 인라인 템플릿 : 0 : 0 원인 : './dynamic.module'모듈을 찾을 수 없습니다."

'./dynamic.module.ts','./ClientApp/app/components/app/dynamic.module.ts' 또한로드하기 전에 ("./ dynamic.module.ts") 필요합니다. 파일에서.

관련 문제