我目前正在将应用程序从普通的 Angular 2 转移到 Angular CLI
现在我正在尝试弄清楚如何导入 3rd 方库,如 orbitcontrols.js这些库不在npm
或bower
我的应用程序上。
我在 https://github.com/angular/angular-cli/wiki/3rd-party-libs 上发现导入npm
支持的库似乎并不难。
-
其他库的情况如何?
-
可能吗?
版本:
角度-CLI 1.0.0-beta.9
大多数情况下是的,但这也取决于库的使用。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'
]
});
};
在你的系统配置中:
/** 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
时,它将使用您的assets/js
自动更新public
文件夹。希望您了解整个场景:)
我不熟悉轨道控制.js但我假设它是一个全局对象。
将该文件放在 CLI 创建的public
目录中。我建议像那里的东西一样分组,所以public/js/orbitcontrols.js
.
然后,您可以通过以下方式在index.html
文件中引用该js文件:
<script src="js/orbitcontrols.js"></script>