Import von externen Angular 2 Komponente fehlschlägt

Question

Ich verwende die ASP.NET Core-Vorlage, die Webpack (https://visualstudiogallery.msdn.microsoft.com/31a3eab5-e62b-4030-9226-b5e4c9e1ffb5) verwendet.

Ich versuche, ein paar externe Module zu meinem Angular 2 Projekt zu importieren. https://www.npmjs.com/package/ng2-slider-component ist einer von ihnen.

Beim Öffnen der "NG2-Slider-Komponente" in meinem node_modules Ordner, sehe ich die folgenden Dateien:

• NG2-slider.component.d.ts
• NG2-slider.component.html
• NG2-slider.component.js
• ng2-slider.component.js.map
• NG2-slider.component.system.js

Ich vermisse etwas wie "ng2-slider.component.ts", das ich in meine "app.module.ts" importieren kann. Also versuche ich das wie unten gezeigt.

import { Ng2SliderComponent } from 'ng2-slider-component/ng2-slider.component'; 

und dann verwenden Sie es in meinem @ NgModule.

@NgModule({ 
bootstrap: [ AppComponent ], 
declarations: [ 
    Ng2SliderComponent 
]}) 

Aber das wirft einen Internal Server Error: Ausnahme: Rufen Sie an Knotenmodul mit Fehler fehlgeschlagen: Fehler: moduleId sollte ein String in "Ng2SliderComponent" sein. Siehe für weitere Informationen. Wenn Sie Webpack verwenden, sollten Sie die Vorlage und die Stile inline einfügen.

Answer 1

Sie müssen folgende Stück Code zu systemjs.config.js (Wenn Sie mit System-Lader),

packages: { 

    .... 

    'node_modules/ng2-slider-component': { 
      main: 'ng2-slider.component.system.js', 
      defaultExtension: 'system.js' 
    }, 

    .... 

}