无法在 Angular2 中使用外部依赖项答案

【问题标题】：Can't use external dependencies in Angular2无法在 Angular2 中使用外部依赖项
【发布时间】：2016-06-28 12:18:49
【问题描述】：

我已经使用Angular-CLI 创建了一个 Angular2 项目，但是当我尝试安装外部依赖项时，编译器不会将文件夹从 node_modules 移动到 dist/vendor。

这就是我所做的：

$ npm install --save angular2-google-maps
$ ng serve

我的组件文件：

import {Component} from 'angular2/core';
import {ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from 'angular2-google-maps/core';

@Component({
  selector: 'contact',
  templateUrl: 'app/components/contact/contact.html',
  styleUrls: ['app/components/contact/contact.css'],
  providers: [],
  directives: [ANGULAR2_GOOGLE_MAPS_DIRECTIVES],
  pipes: []
})
export class Contact {
  lat: number = 51.678418;
  lng: number = 7.809007;
  constructor() {}
}

当我运行 ng serve 并转到网络浏览器时，我收到以下错误：

加载资源失败：服务器响应状态为 404（未找到）http://localhost:4200/angular2-google-maps/core

【问题讨论】：

标签： dependency-injection typescript angular

【解决方案1】：

如指南中所述：https://angular-maps.com/docs/getting-started.html#package-installation

您是否包含以下脚本？

 <script src="node_modules/angular2-google-maps/bundles/angular2-google-maps.js"></script>

您是否按照以下方式注入了脚本？

bootstrap(AppComponent, [ANGULAR2_GOOGLE_MAPS_PROVIDERS]);

【讨论】：

问题是我无法添加

【解决方案2】：

编译器将任何文件夹从src 移动到dist。我用外部库在src 中创建了一个名为vendor 的新文件夹，因此当编译器将此文件夹移动到dist 时，src/vendor 与dist/vendor 合并，并且外部库现在可以访问了。

我还添加了 <script> 引用。现在可以了！

【讨论】：

【解决方案3】：

我遇到了同样的问题，并通过将以下行添加到 system-config.ts 中的包配置来解决它：

/** User packages configuration. */
const packages: any = {
    'angular2-google-maps': { defaultExtension: 'js' }
};

【讨论】：