blocks|key|111333|text|我以前没有使用过angular-cli，但我目前正在使用Angular/Webpack版本。为了向jQuery和其他供应商提供我的应用程序，我使用了webpack的插件ProvidePlugin()。这通常位于你的webpack.config.js中:这是一个jquery，lodash和moment库的例子。这里有一个到documentation的链接(充其量它是模糊的)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|111334|plugins:+[
++new+webpack.ProvidePlugin({
++++$:+'jquery',
++++_:+'lodash',
++++moment:+'moment',
++})
]|code-block|syntax|javascript|111335|令人难以置信的是，它实际上允许你立即使用它，前提是所有其他的webpack设置都已经正确完成，并且已经与npm一起安装。|111336|entityMap|0|LINK|mutability|MUTABLE|url|https://webpack.github.io/docs/list-of-plugins.html#provideplugin^0|2C|F|2Z|H|4H|D|0|0|0|1G|3|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

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, <code>ProvidePlugin()</code>. This will typically sit in your <code>webpack.config.js</code>: Here's an example for jquery, lodash and moment libraries. Here's a link to the <a href="https://webpack.github.io/docs/list-of-plugins.html#provideplugin" rel="nofollow">documentation</a> (which is vague at best)

<pre><code>plugins: [
 new webpack.ProvidePlugin({
 $: 'jquery',
 _: 'lodash',
 moment: 'moment',
 })
]
</code></pre>

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

blocks|key|2869347|text|你可能想看看这个页面：https://github.com/angular/angular-cli#global-library-installation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2869348|它展示了如何包含.js和.css文件的基础知识|2869349|2869350|一些javascript库需要添加到全局作用域中，并像在脚本标记中一样加载。我们可以使用angular-cli.json.|blockquote|2869351|
的apps.scripts和apps.styles属性来实现这一点|2869352|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli#global-library-installation^0|B|1U|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|Z|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

You might want to have a look at this page:
<a href="https://github.com/angular/angular-cli#global-library-installation" rel="nofollow">https://github.com/angular/angular-cli#global-library-installation</a>

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

<blockquote>
 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.
</blockquote>

blocks|key|2869381|text|最后一次使用angular-cli+11.x.x和Angular+11.x.x测试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2869382|这可以在angular.json中使用scripts:[]来完成。|offset|length|style|BOLD|CODE|2869383|{
++"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
++}
}|code-block|syntax|javascript|2869384|注意:在全局库安装中以the+documentation+suggests身份执行：如果您更改了styles+(或scripts!)的值，请执行以下操作：属性，则：|2869385|如果您正在运行|2869386|，请重新启动ng+serve，|blockquote|2869387|2869388|2869389|..to通过scripts.bundle.js文件查看在**全局上下文中执行的脚本。|2869390|注释:下面的注释中讨论了。还可以使用es6导入语法将通过es6+imports支持UMD模块的JS库(如jQuery+)导入到您的typescript文件中。例如：import+$+from+'jquery';。|2869391|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli/wiki/angular-cli|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import^0|0|0|X|4|C|J|A|0|0|0|2A|1C|6|1L|7|B|Q|0|0|0|7|0|0|F|0|0|0|0|16|6|H|0|0|2Y|2A|N|S|B|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|H]|$D|1G|E|1H|F|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|1I|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|1J|8|@$D|1K|E|1L|F|G]|$D|1M|E|1N|F|H]|$D|1O|E|1P|F|H]]|9|@$D|1Q|E|1R|1|1S]]|A|$]]|$1|P|3|Q|5|6|7|1T|8|@$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|R|3|S|5|T|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|21|8|@$D|22|E|23|F|G]|$D|24|E|25|F|H]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|26|8|@$D|27|E|28|F|G]|$D|29|E|2A|F|H]]|9|@$D|2B|E|2C|1|2D]]|A|$]]|$1|10|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

Last tested using angular-cli 11.x.x with Angular 11.x.x
This can be accomplished using <code>scripts:[]</code> in <code>angular.json</code>.
<pre><code>{
 &quot;project&quot;: {
 &quot;version&quot;: &quot;1.0.0&quot;,
 &quot;name&quot;: &quot;my-project&quot;
 },
 &quot;apps&quot;: [
 {
 &quot;root&quot;: &quot;src&quot;,
 &quot;outDir&quot;: &quot;dist&quot;,
 &quot;assets&quot;: [&quot;assets&quot;],
 &quot;index&quot;: &quot;index.html&quot;,
 &quot;main&quot;: &quot;main.ts&quot;,
 &quot;polyfills&quot;: &quot;polyfills.ts&quot;,
 &quot;test&quot;: &quot;test.ts&quot;,
 &quot;tsconfig&quot;: &quot;tsconfig.json&quot;,
 &quot;prefix&quot;: &quot;app&quot;,
 &quot;mobile&quot;: false,
 &quot;styles&quot;: [
 &quot;styles.css&quot;
 ],
 &quot;scripts&quot;: [
 &quot;../node_modules/jquery/dist/jquery.js&quot;
 ],
 &quot;environments&quot;: {
 &quot;source&quot;: &quot;environments/environment.ts&quot;,
 &quot;dev&quot;: &quot;environments/environment.ts&quot;,
 &quot;prod&quot;: &quot;environments/environment.prod.ts&quot;
 }
 }
 ],
 &quot;addons&quot;: [],
 &quot;packages&quot;: [],
 &quot;e2e&quot;: {
 &quot;protractor&quot;: {
 &quot;config&quot;: &quot;./protractor.conf.js&quot;
 }
 },
 &quot;test&quot;: {
 &quot;karma&quot;: {
 &quot;config&quot;: &quot;./karma.conf.js&quot;
 }
 },
 &quot;defaults&quot;: {
 &quot;styleExt&quot;: &quot;css&quot;,
 &quot;prefixInterfaces&quot;: false
 }
}
</code></pre>
Note: As <a href="https://github.com/angular/angular-cli/wiki/angular-cli" rel="noreferrer">the documentation suggests</a> in the global library installation: if you change the value of your <code>styles</code> (or <code>scripts</code>!) property, then:
<blockquote>
Restart ng serve if you're running it,
</blockquote>
..to see the scripts executed in a **globalcontext via the <code>scripts.bundle.js</code> file.
Note: As discussed in the comments below. JS libs that support UMD modules via <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import" rel="noreferrer">es6 imports</a> such as jQuery can also be imported into your typescript files using the es6 import syntax. For example: <code>import $ from 'jquery';</code>.

blocks|key|2869436|text|您需要打开文件.angular-cli.json文件，并需要搜索"scripts:"，或者如果您想添加外部css，您需要在同一文件中找到单词"styles":。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2869437|在下面的示例中，您将看到引导程序Js(bootstrap.min.js)和引导程序CSS(bootstrap.min.css)如何包含在.angular-cli.json中|2869438|"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"
++],|code-block|syntax|javascript|2869439|当然，如果你有自己的js文件，你可以将你的文件路径添加到.angular-cli.json中的相同位置(在"scripts":[]中)。|2869440|entityMap^0|7|H|W|A|1Y|9|0|J|G|19|H|1W|H|0|0|S|H|1H|C|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$]]

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

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

<pre><code>"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"
 ],
</code></pre>

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

blocks|key|114035|text|使用scripts:[]和使用<script>在<head>中添加一些东西有细微的区别。来自scripts:[]的脚本被添加到scripts.bundle.js中，该脚本始终加载在body标记中，因此将在<head>中的脚本之后加载。因此，如果脚本加载顺序很重要(即，您需要加载全局polyfill)，那么您唯一的选择是手动将脚本复制到文件夹(例如，使用npm脚本)，并将此文件夹作为资产添加到.angular-cli.json。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|114036|因此，如果您确实依赖于在+angular本身之前加载的内容(选项A)，那么您需要手动将其复制到将包含在angular构建中的文件夹中，然后您可以在<head>中使用<script>手动加载它。|114037|因此，要实现选项a，您必须：|114038|114039|在此文件夹中创建一个vendor文件夹作为.angular-cli.json|unordered-list-item|114040|的资产|114041|"assets":+[
++++"assets",
++++"favicon.ico",
+++++"vendor"
++]|code-block|syntax|javascript|114042|<head>+<script+src="vendor/some_package/somejs.js">+</head>：|114043|将您的供应商脚本node_modules/some_package/somejs.js复制到index.html中手动执行vendor|114044|load|114045|114046|然而，大多数情况下，你只需要对需要全局可用的包使用这种方法，在之前所有其他东西(即某些polyfills)。Kris的答案对于选项B是正确的，并且您将获得webpack构建的好处(最小化、哈希等)。|114047|但是，如果您的脚本不需要是全局可用的，并且如果它们是模块就绪的，那么您可以在src/polyfills.ts中导入它们，或者更好的是，只有在您的特定组件中需要它们时才导入它们。|114048|通过scripts:[]或通过手动加载脚本使其全局可用会带来一系列问题，实际上应该只在绝对必要时才使用。|114049|entityMap^0|2|A|F|8|O|6|1A|A|1R|H|2U|6|5H|H|32|2X|0|0|C|21|6|2A|8|0|0|0|A|6|L|H|0|0|0|0|1N|0|8|Z|1A|A|1P|6|0|0|0|V|2|0|9|3|P|6|12|G|0|2|A|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1R|8|@$9|1S|A|1T|B|D]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|E|@]|F|$]]|$1|I|3|J|5|6|7|1Y|8|@]|E|@]|F|$]]|$1|K|3|-4|5|6|7|1Z|8|@]|E|@]|F|$]]|$1|L|3|M|5|N|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]]|E|@]|F|$]]|$1|O|3|P|5|6|7|25|8|@]|E|@]|F|$]]|$1|Q|3|R|5|S|7|26|8|@]|E|@]|F|$T|U]]|$1|V|3|W|5|6|7|27|8|@$9|28|A|29|B|C]]|E|@]|F|$]]|$1|X|3|Y|5|N|7|2A|8|@$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]]|E|@]|F|$]]|$1|Z|3|10|5|N|7|2H|8|@]|E|@]|F|$]]|$1|11|3|-4|5|6|7|2I|8|@]|E|@]|F|$]]|$1|12|3|13|5|6|7|2J|8|@$9|2K|A|2L|B|D]]|E|@]|F|$]]|$1|14|3|15|5|6|7|2M|8|@$9|2N|A|2O|B|D]|$9|2P|A|2Q|B|D]|$9|2R|A|2S|B|C]]|E|@]|F|$]]|$1|16|3|17|5|6|7|2T|8|@$9|2U|A|2V|B|C]]|E|@]|F|$]]|$1|18|3|-4|5|6|7|2W|8|@]|E|@]|F|$]]]|19|$]]

There is a subtle difference to using <code>scripts:[]</code> then to adding something to the <code>&lt;head&gt;</code> with <code>&lt;script&gt;</code>. Scripts from <code>scripts:[]</code> get added to the <code>scripts.bundle.js</code> that gets always loaded in the body tag and will thus be loaded AFTER scripts in <code>&lt;head&gt;</code>. 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 <code>.angular-cli.json</code>.

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 <code>&lt;script&gt;</code> in <code>&lt;head&gt;</code>.

Thus, for achieving option a you have to:

<ul>
<li>create a <code>vendor</code> folder in <code>src/</code></li>
<li>add this folder as an asset to <code>.angular-cli.json</code>:</li>
</ul>

<pre><code>"assets": [
 "assets",
 "favicon.ico",
 "vendor"
 ]
</code></pre>

<ul>
<li>copy your vendor script <code>node_modules/some_package/somejs.js</code> to <code>vendor</code></li>
<li>load it manually in <code>index.html</code>:
<code>&lt;head&gt;
&lt;script src="vendor/some_package/somejs.js"&gt;
&lt;/head&gt;</code></li>
</ul>

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 <code>src/polyfills.ts</code> or even better import them only when you need them in your specific components.

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

I am not sure how to include JS files (vendors) after switching Angular Cli from SystemJs to Webpack.

For example

Option A

I have some js files that were installed via npm. Adding script tags to the head tag like this does not work. Nor does it seem like the best way.

<pre><code>&lt;head&gt;
 &lt;script src="node_modules/some_package/somejs.js"&gt;
&lt;/head&gt;

//With systemJs I could do this

&lt;head&gt;
 &lt;script src="vendor/some_package/somejs.js"&gt;
&lt;/head&gt;
</code></pre>

Option B

Include these js files as part of the webpack bundle. This seems like the way it probably should be done. However I am not sure how to do this as all of the webpack code seems to be hidden behind the angular-cli-webpack node package. I was thinking maybe there is another webpack config that we might have access to. But I am not sure as I didn't see one when creating a new angular-cli-webpack project.

More Info:

The js files I am trying to include need to be included before the Angular project. For example jQuery and a third party js lib that isn't really setup for module loading or typescript.

References
<a href="https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md" rel="noreferrer">https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md</a>
<a href="https://github.com/angular/angular-cli/tree/webpack" rel="noreferrer">https://github.com/angular/angular-cli/tree/webpack</a>

Angular Cli Webpack, How to add or bundle external js files?

jQuery

将Angular Cli从SystemJs切换到Webpack后，我不确定如何包含JS文件(供应商)。例如的选项A我有一些通过npm安装的js文件。像这样将脚本标记添加到head标记不起作用。这似乎也不是最好的方式。<head> <script src="node_modules/some_package/some...

问Angular Cli Webpack，如何添加或捆绑外部js文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Cli Webpack，如何添加或捆绑外部js文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular Cli Webpack，如何添加或捆绑外部js文件？
EN