我正在使用 Angular 2
创建一个应用程序。我在 RC2 阶段开始使用它,在根据发布的 RC 对我的应用程序进行大量更新后,我终于让它在 Angular 2.0.0
最终版本上运行。
因为我也在使用 angular-cli
并更新到当前最新版本 (1.0.0-beta.15
)。我还做了所有需要的更改,例如现在使用 webpack 而不是 SystemJs。
我现在的问题是,我似乎无法找到无需从 CDN 包含外部库(让我们以 jQuery 为例)到我的应用程序的方法。
在以前的 Angular 2
版本中,有一个 angular-cli-build.js
是这样的:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
它(查看 vendorNpmFiles
数组的最后一行)将 jquery 库与 system-config.js
一起映射到准备构建应用程序的文件夹有点像这样:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
它所做的是在最终构建文件夹中创建一个 vendor 文件夹(默认名为 dist
),我可以从中简单地从我的父级中导入 jquery 最 index.html
带有如下语句:
<script src="vendor/jquery/dist/jquery.min.js"></script>
我现在的问题是如何获得与我正在使用的 angular-cli
版本中描述的类似的结果。
最佳答案
现在我在全局范围内使用这些库,所以我将它们包含在 angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
这样也不需要将它们包含到 index.html 中。 如果有人找到另一种方法来做到这一点,我仍然对此非常感兴趣。
关于javascript - Angular 2.0.0 with angular-cli 1.0.0-beta.15 : using typescript, 如何像以前的版本一样集成外部库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39640280/