Question

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

现在，我正在尝试找出如何导入第三方库，例如 orbitcontrols.js ，它们不在npm或{{1}到我的应用程序。

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

其他图书馆如何？
有可能吗？

版本：

angular-cli 1.0.0-beta.9

Answer 1

我不熟悉orbitcontrols.js，但我认为它是一个全球性的对象。

将该文件放在CLI创建的public目录中。我建议将那些内容分组，所以public/js/orbitcontrols.js。

然后您可以通过以下方式在index.html文件中引用该js文件：

<script src="js/orbitcontrols.js"></script>

Answer 2

大多数情况下是的，但这取决于图书馆的用途。仍然Angular-cli在第三方库集成方面存在一些问题。直到他们正确地修复它，我可以给你一个黑客。假设您希望在代码中使用_ lodash。所以我会给你我的工作代码场景 -

安装lodash

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

之前确保全局安装打字

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或ng serve时，它会自动使用您的public更新assets/js文件夹。希望您了解整个场景：）

Angular CLI中的第三方库不在npm上

2 个答案: