我有一个要求,需要从UMD文件加载动态组件 . 我能够让部分工作 . 我的意思是部分原因是因为它适用于基本组件,但是一旦我注入路由器就停止了工作 . 现在我得到:
错误错误:未捕获(在承诺中):错误:StaticInjectorError(AppModule)[CompApp1Component - > Router]:StaticInjectorError(Platform:core)[CompApp1Component - > Router]:NullInjectorError:没有路由器的提供者!
这是路由器的外部组件:
@Component({
selector: 'comp-app1',
templateUrl: './comp-app1.component.html',
styleUrls: ['./comp-app1.component.scss']
})
export class CompApp1Component {
constructor(
private router: Router
) { }
}
这是装载机:
import { Compiler, Injectable } from '@angular/core';
import { ExternalModule } from './module';
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
const appsUrls = require('../../external-modules.config.json');
declare var SystemJS;
@Injectable()
export class ExternalModuleLoader {
constructor(
private compiler: Compiler
) { }
load(appName: string, moduleName: string = 'AppModule'): Observable<ExternalModule> {
let url = appsUrls[appName][moduleName];
return new Observable<ExternalModule>(
(subscriber: Subscriber<ExternalModule>) => {
SystemJS.load(url).then((modules: any) => {
let moduleWithFactories = this.compiler.compileModuleAndAllComponentsAsync(modules[moduleName])
.then((moduleWithFactories: any) => {
let components = moduleWithFactories.componentFactories.reduce(function (map, obj) {
map[obj.selector] = obj;
return map;
}, {});
subscriber.next(new ExternalModule({ Components: components }));
});
});
}
);
}
}
这就是我创建组件的方式:
this.externalModuleLoader.load('UmdApp1').subscribe(resp => {
// resp.getComponentByName returns ComponentFactory<any>
// appComp1ViaUmd is ViewContainerRef
this.appComp1ViaUmd.createComponent(resp.getComponentByName('comp-app1'));
});
但是在 createComponent
期间它抛出了空注入错误 . 这是我的system.config.js文件:
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
'app': 'app',
'@angular/core': 'https://npmcdn.com/@angular/core',
'@angular/common': 'https://npmcdn.com/@angular/common',
'@angular/compiler': 'https://npmcdn.com/@angular/compiler',
'@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser',
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic',
'@angular/http': 'https://npmcdn.com/@angular/http',
'@angular/router': 'https://npmcdn.com/@angular/router',
'@angular/forms': 'https://npmcdn.com/@angular/forms',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@2.4.2/lib/typescript.js',
},
transpiler: 'ts',
typescriptOptions: {
experimentalDecorators: true,
emitDecoratorMetadata: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
关于什么可能出错的任何想法?如果我从组件中删除路由器注入它工作...谢谢!