在angular4中动态加载组件

Question

我正在尝试使用angular4的ng-dynamic-component动态加载组件。

我在浏览器控制台中不断收到此错误。有人可以向我解释我在做什么错吗？

我尝试实现的动态组件是：

http://www.muller.tech/post/2017/08/04/angular4-dynamically-add-component/

错误影像

systemjs.config.js

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: '/app',
 'ng-dynamic-component': 'npm:/ng-dynamic-component/dist/src/index.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
           main: 'main.js',

            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
        ,
        'ng-dynamic-component': { defaultExtension: 'js'},
        'ng2-bs3-modal':
        { main: '/bundles/ng2-bs3-modal.js', defaultExtension: 'js' }


    }

});
})(this);

app.module.ts

        import { AppComponent } from './app.component';
    import { HttpModule } from '@angular/http';
    import { AppRoutingModule } from './app.routing';
    import { DynamicModule } from 'ng-dynamic-component';
    import { CommonModule } from '@angular/common';
    import { CSSCarouselComponent } from './Components/Typescript/Slider';
    import { CSSCarouselService } from './Components/Service/CarouselService';
    import { EditorComponent } from './Components/Typescript/Editor';
    import { DynamicComponent } from './Components/Typescript/ComponentDynamic';

    @NgModule({
        imports: [CommonModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, AppRoutingModule, Ng2Bs3ModalModule, DynamicModule.withComponents([CSSCarouselComponent, EditorComponent])],
        declarations: [AppComponent, MWRHomeComponent, MWRHomeNavbarComponent, CSSCarouselComponent, EditorComponent, DynamicComponent],
        providers: [{ provide: APP_BASE_HREF, useValue: '/' }, CSSCarouselService],
        bootstrap: [AppComponent] 
    })

    export class AppModule { }

tsconfig.json

{
    "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "importHelpers": true

    },
    "exclude": [
    "node_modules/*"
    ]
    }

包含ng-dynamic-component的节点模块的文件夹结构：

 1. nodemodules

       --ng-dynamic-component

             -dist
                 ->bundles
                  ->src 
                      ->>index.js

             -script
             -src

app.component.ts

import { Component } from "@angular/core"
//declare var jquery: any;


 @Component({

 selector: 'user-app',
 templateUrl: '../../app/body.html'
 })

 export class AppComponent {
 title = 'Tour of Heroes';

 components = [
    { type: 'a' },
    { type: 'b' }
  ];
}

body.html

<h1>
{{title}}

</h1>

<body-content></body-content>
<editor></editor>


<div *ngFor='let component of components'>
<app-hopla [type]='component.type'></app-hopla>
</div>

ComponentDynamic.ts

import { Component, OnChanges, Input } from '@angular/core';
import { CSSCarouselComponent } from './Slider';
import { EditorComponent } from './Editor';

@Component({
selector: 'app-hopla',
template: `
<ndc-dynamic [ndcDynamicComponent]='selectedComponent'></ndc-dynamic>
`
})
export class DynamicComponent implements OnChanges {
@Input() type: string;

selectedComponent: any;

ngOnChanges() {

    if (this.type) {
        if (this.type === 'a') this.selectedComponent = CSSCarouselComponent;
        if (this.type === 'b') this.selectedComponent = EditorComponent ;
    }
   }
}

Answer 1

您已在SystemConfig.js文件中为ng-dynamic-component提供了额外的反斜杠

map: {
        // our app is within the app folder
        app: '/app',
       'ng-dynamic-component': 'npm:/ng-dynamic-component/dist/src/index.js'
    },

如您在路径中定义的

'npm:': 'node_modules/'

请删除此多余的反斜杠。