我有一个要求,需要从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);

关于什么可能出错的任何想法?如果我从组件中删除路由器注入它工作...谢谢!