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

在将Angular Cli从SystemJs切换到Webpack之后，我不确定如何包含JS文件（供应商）。

例如

选项A

我有一些通过npm安装的js文件。 像这样将脚本标记添加到头标记不起作用。 也不是最好的方式。

<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 conig似乎都隐藏在angular-cli-webpack软件包的后面。 我想也许有另一个webpackconfiguration，我们可能有权访问。 但是我不确定，因为在创build一个新的angular-cli-webpack项目时我没有看到它。

更多信息：

我想包含的js文件需要包含在Angular项目之前。例如jQuery和第三方js库，这不是真的为模块加载或打字机设置。

参考资料 https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

最后使用angular-cli 1.0.0和Angular 4.0.0进行testing

这可以在.angular-cli.json使用scripts:[]来完成。

 { "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 } }

请注意，正如文档在全局库安装中所build议的那样：如果更改styles （或scripts ！）属性的值，则：

重新启动服务，如果你正在运行它，

..通过scripts.bundle.js文件查看在** globalcontext中执行的脚本。

使用Typescript 2.0似乎有一些按惯例的configuration，它会自动将jQuery与Angular2版本捆绑在一起，而不会明确地告诉您是否npm install @types/jquery和jquery ，它是导入时的参考。

 ng new testapp cd testapp npm install --save-dev angular-cli@webpack npm install --save @types/jquery npm install --save jquery

然后将下面的代码添加到app.component.ts

 import { Component } from '@angular/core'; import * as jQuery from 'jquery'; @Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'] }) export class AppComponent { title = 'app works!'; public test(){ jQuery('h1').text('Magic'); } }

将下面的html添加到app.component.html

 <h1 (click)="test()"> {{title}} </h1>

然后运行它

 ng serve

编辑：

正确的方法是编辑angular-cli.json如其他文章中提到的。这篇文章是从那些configuration选项被添加到angular-cli的webpack版本之前的

你可能想看看这个网页： https ： //github.com/angular/angular-cli#global-library-installation

它显示了如何包含.js和.css文件的基础知识

一些JavaScript库需要添加到全局范围，并加载，如果他们在脚本标记。我们可以使用angular-cli.json的apps [0] .scripts和apps [0] .styles属性来做到这一点。

我没有使用angular-cli，但是我目前正在使用Angular / Webpack构build。为了向我的应用程序提供jQuery和其他供应商，我使用webpack的插件ProvidePlugin ProvidePlugin() 。这通常会坐在你的webpack.config.js ：这里是一个jQuery的，lodash和matrix库的例子。这是一个链接到文档（这是最好含糊不清）

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

令人难以置信的是，它实际上允许您立即使用它，提供所有其他webpack安装程序已正确完成，并已与npm安装。

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

AngularJS：为每个端点创build多个工厂？

Angular 2组件不是任何NgModule的一部分

Narwhal和Node.js之间的区别？

file upload在Angular 2中？

如何添加“类”主机元素？

你需要退订Angular 2 http调用来防止内存泄漏？

Angular 2 @ViewChild注解返回undefined

太阳的位置，一天的时间，经度和纬度

angular $ q，如何在for循环之内和之后链接多个promise

在AngularJS服务中caching承诺对象