导入外部Angular 2组件失败

Question

我正在使用ASP。. NET Core模板，使用Webpack (https://visualstudiogallery.msdn.microsoft.com/31a3eab5-e62b-4030-9226-b5e4c9e1ffb5).

我正在尝试导入一堆外部模块到我的Angular 2项目。https://www.npmjs.com/package/ng2-slider-component就是其中之一。

当打开node_modules文件夹中的"ng2-slider-component"时，我看到了以下文件:

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

我缺少像"ng2-slider.component.ts"这样的东西，我可以在我的"app.module.ts"中导入。所以我试着这样做，如下所示。

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

，然后在我的@NgModule中使用。

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

但是这会抛出一个内部服务器错误:Exception: Call to Node module failed with Error: Error: moduleId应该是"Ng2SliderComponent"中的一个字符串。请参阅更多信息。如果你使用Webpack，你应该内联模板和样式。

Answer 1

您需要将以下代码段添加到 systemjs.config.js (如果您正在使用系统加载程序)，

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