如何在 angular cli 中包含 npm 包

Question

到目前为止，我练习了 ANgular 2 个来自 angular 的项目-种子来自 here

在处理这个项目时，我曾经像这样在 system.config.js 中包含所有第三方库

 map: {
   'ng2-file-upload': 'npm:ng2-file-upload'
 },
 packages: {
  ng2-file-upload: {
    defaultExtension: 'js'
  }

这对 me.Now 非常有效，我正在使用 angular cli，但我对包含在其中感到困惑。

在angular-cli.json,

 "scripts": [
     ?????
  ],

谁能帮忙me.Thanks

Answer 1

我没有使用过 SystemJS 但是：

是的，您可以将您的库添加到 scripts

"scripts": [
    "pathToLibray"
]

但是如果你有一个 npm 包，它是为 Angular 构建的，你可以在不导入的情况下使用它。它会从您的 node_modules

自动加载

希望我能帮上忙:)

Answer 2

您将依赖项存储在 node_modules 文件夹中。当您需要它们时，您可以使用 import 语句将它们导入文件中。编译成JS时，import一般会被require代替。

当你的代码在浏览器中执行时，你需要一个加载器来从 node_modules 加载这些文件，而这样的加载器就是 SystemJS。详细了解为什么需要 SystemJS here。 SystemJS 需要知道模块的路径，这就是为什么您需要将依赖项添加到 system.config.js.

但是，angular-cli 使用 webpack 模块打包器，它有自己的内置加载器。当 webpack 打包文件时，它会解析路径并将它们内联到生成的包中。这就是为什么在使用 angular-cli.

时不需要在任何地方添加路径的原因

我刚刚尝试将 ng2-tag-input 与 angular-cli 一起使用。一切正常。我刚刚将以下内容导入主模块：

...
import {TagInputModule} from 'ng2-tag-input';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    TagInputModule, BrowserAnimationsModule
  ],

并安装了 @angular/animations。以下代码段工作正常：

@Component({
  template: '<tag-input [(ngModel)]='items'></tag-input>',
  ...
})
export class AppComponent {
  items = ['Pizza', 'Pasta', 'Parmesan'];
}

您还需要安装@angular/animations

如何在 angular cli 中包含 npm 包

How to include npm packages in angular cli

angular2-routing

angular