如何添加或捆绑外部 js 文件？

我不知道如何包括 JS 文件(供应商)后，从系统 JS 切换到 Webpack 的 Angular Cli。

比如说

选项 A

我有一些通过 npm 安装的 js 文件。像这样向 head 标记添加 script 标记是不起作用的。这似乎也不是最好的办法。

<head>
<script src="node_modules/some_package/somejs.js">
</head>


//With systemJs I could do this


<head>
<script src="vendor/some_package/somejs.js">
</head>

选择 B

将这些 js 文件作为 webpack 包的一部分。这似乎是它应该做的方式。然而，我不知道如何做到这一点，因为所有的 webpack 代码似乎都隐藏在角-cli-webpack 节点包之后。我在想也许我们可以访问另一个网络包配置。但我不确定，因为我没有看到一个时，创建一个新的角斜面网络包项目。

更多信息:

我试图包含的 js 文件需要包含在 Angular 项目之前。例如，jQuery 和第三方 js lib 并没有真正为模块加载或类型脚本设置。

参考文献 Https://github.com/angular/angular-cli/blob/master/webpack_update.md Https://github.com/angular/angular-cli/tree/webpack

103946 次浏览
小开

I havn't used angular-cli before but I'm currently working with an Angular/Webpack build. In order to provide my application with jQuery and other vendors I use webpack's plugin, ProvidePlugin(). This will typically sit in your webpack.config.js: Here's an example for jquery, lodash and moment libraries. Here's a link to the documentation (which is vague at best)

plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash',
moment: 'moment',
})
]

Incredibly, it actually allows you to use it right away, providing all other webpack setup has been done correctly and have been installed with npm.

小开

You might want to have a look at this page: https://github.com/angular/angular-cli#global-library-installation

It show the basics of how to include .js and .css files

Some javascript libraries need to be added to the global scope, and loaded as if they were in a script tag. We can do this using the apps[0].scripts and apps[0].styles properties of angular-cli.json.

小开
最佳答案

Last tested using angular-cli 11.x.x with Angular 11.x.x

This can be accomplished using scripts:[] in angular.json.

{
"project": {
"version": "1.0.0",
"name": "my-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false
}
}

Note: As the documentation suggests in the global library installation: if you change the value of your styles (or scripts!) property, then:

Restart ng serve if you're running it,

..to see the scripts executed in a **globalcontext via the scripts.bundle.js file.

Note: As discussed in the comments below. JS libs that support UMD modules via es6 imports such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: import $ from 'jquery';.

小开

You need to open file .angular-cli.json file and need to search for "scripts:" or if you want to add external css you need to find the word "styles": in the same file.

as an example shown below you will see how the bootstrap Js(bootstrap.min.js) and bootstrap CSS(bootstrap.min.css) includes in .angular-cli.json:

"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

For sure if you have your own js file you can add your file path here in .angular-cli.json at the same place(in "scripts":[]).

小开

There is a subtle difference to using scripts:[] then to adding something to the <head> with <script>. Scripts from scripts:[] get added to the scripts.bundle.js that gets always loaded in the body tag and will thus be loaded AFTER scripts in <head>. Thus if script loading order matters (i.e. you need to load a global polyfill), then your only option is to manually copy scripts to a folder (e.g. with a npm script) and add this folder as an asset to .angular-cli.json.

So if you really depend on something being loaded before angular itself (Option A), then you need to copy it manually to a folder that will be included in the angular build and then you can load it manually with a <script> in <head>.

Thus, for achieving option a you have to:

  • create a vendor folder in src/
  • add this folder as an asset to .angular-cli.json:
"assets": [
"assets",
"favicon.ico",
"vendor"
]

  • copy your vendor script node_modules/some_package/somejs.js to vendor

  • load it manually in index.html: <head> <script src="vendor/some_package/somejs.js"> </head>

However most of the time you only need this approach for packages, that need to be available globally, before everything else (i.e. certain polyfills). Kris' answer holds true for Option B and you get the benefit of the webpack build (Minification, Hashes, ...).

However if your scripts need not be globally available and if they are module-ready you can import them in src/polyfills.ts or even better import them only when you need them in your specific components.

Making scripts globally available via scripts:[] or via manually loading them brings it own set of problems and should really only be used, when it is absolutely necessary.


提交答案