typescript - Angular CLI 中的第 3 方库不在 npm 上

Question

我目前正在将应用程序从常见的 Angular 2 转移到 Angular CLI

现在我正在尝试弄清楚如何导入第三方库，例如orbitcontrols.js，这些库不在npm或bower 到我的应用程序。

我发现https://github.com/angular/angular-cli/wiki/3rd-party-libs导入 npm 支持的库似乎并不难。

• 其他库怎么样？

• 这可能吗？

版本:

Angular -cli 1.0.0-beta.9

Answer 1

大多数情况下是的，但这也取决于库的使用。 Angular-cli 在第三方库集成方面仍然存在一些问题。在他们正确修复之前，我可以给你一个解决办法。假设您想在代码中使用 lodash 的 _ 。所以我会给你我的工作代码场景 -

安装lodash

npm install lodash --save
typings install lodash --ambient --save

在此之前，请确保您全局安装了typings

npm install typings -g

然后在你的 angular-cli-build.json 中，确保它保持这样的方式

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...
      'lodash/**/*.js'
    ]
  });
};

并在您的 system-config.ts 中:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: 'cjs'
   }
 };

在你的 src/index.html 添加这一行(这是一个奇怪的修复)

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script>

现在在你想要使用 lodash 的组件中，这样写

declare var _:any;

@Component({
})
export class YourComponent {
  ngOnInit() {
     console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
  }
}

它对我有用:)。我通过 Angular-CLI 在我的 Angular2 项目中使用了大量的第三方库。希望对您也有帮助

编辑:

如果您的第三方库没有获得任何 npm。创建一个 assets 文件夹 在您的 src 文件夹下。然后，您可以为 js、css 和 images 添加单独的文件夹。 将您的第三方js放入js文件夹中。 然后你必须像这样引用 index.html 中的 js 文件:

<script src="assets/js/your_js.js"></script>

现在，当您执行 ng build 或 ngserve 时，它会自动使用您的 assets/js< 更新 public 文件夹。希望您了解整个场景:)