更新:2018 年 12 月(参见“Aniket”答案)
使用 Angular CLI 6,您需要使用构建器,因为 ngject 已被弃用,并且很快将在 8.0 中删除
更新:2018 年 6 月:Angular 6 不支持 ng 弹出**
更新:2017 年 2 月:使用 ng 弹出
更新:2016 年 11 月:angular-cli 现在只使用 webpack。您只需要使用 npm install -g angular-cli 正常安装。 “我们在 beta.10 和 beta.14 之间更改了构建系统,从 SystemJS 到 Webpack。”,但实际上我使用 angular-cli 只是为了创建结构和文件夹,然后我手动使用 webpack 配置
我已经用这个安装了 angular cli:
npm install -g angular-cli@webpack
当我使用 angular1 和 webpack 时,我曾经修改“webpack.config.js”文件以执行所有任务和插件,但我没有看到使用 angular-cli 创建的这个项目谁可以工作。这是魔法?
当我这样做时,我看到 Webpack 正在工作:
ng serve
"Version: webpack 2.1.0-beta.18"
但我不明白 angular-cli 配置的工作方式......
ng eject
有一种从 angular-cli 中弹出 webpack.config.js 的好方法。赶紧跑:
$ ng eject
这将在项目的根文件夹中生成 webpack.config.js,您可以按照自己的方式自由配置它。这样做的缺点是 package.json 中的构建/启动脚本将被新命令替换,而不是
$ ng serve
你必须做类似的事情
$ npm run build & npm run start
这种方法应该适用于所有最新版本的 angular-cli(我个人尝试了一些,最旧的是 1.0.0-beta.21,最新的是 1.0.0-beta.32.3)
根据这个 issue,不允许用户修改 Webpack 配置以减少学习曲线是一项设计决定。
考虑到 Webpack 上有用的配置数量,这是一个很大的缺点。
我不建议将 angular-cli
用于生产应用程序,因为它非常自以为是。
使用 Angular CLI 6,您需要使用构建器,因为 ngject 已弃用,并且很快将在 8.0 中删除。这就是我尝试进行 ng 弹出时所说的内容
https://i.stack.imgur.com/lQK7v.png
您可以使用 angular-builders 包 (https://github.com/meltedspark/angular-builders) 来提供您的自定义 webpack 配置。
我试图在我博客上的一篇博文中总结所有内容 - How to customize build configuration with custom webpack config in Angular CLI 6
但基本上你添加了以下依赖项 -
"devDependencies": {
"@angular-builders/custom-webpack": "^7.0.0",
"@angular-builders/dev-server": "^7.0.0",
"@angular-devkit/build-angular": "~0.11.0",
在 angular.json 中进行以下更改 -
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {"path": "./custom-webpack.config.js"},
注意 builder 和新选项 customWebpackConfig 的变化。也改变
"serve": {
"builder": "@angular-builders/dev-server:generic",
再次注意构建器中服务目标的更改。发布这些更改后,您可以在同一根目录中创建一个名为 custom-webpack.config.js 的文件,并在那里添加您的 webpack 配置。
但是,与此处提供的 ng 弹出配置不同,此处提供的配置将与默认配置合并,因此只需添加您想要编辑/添加的内容。
ng serve
仅在 5 秒后退出,没有输出。我的项目使用 angular cli 7 和 angular core 5。
scripts
属性进行任何更改吗?
@angular-builders/dev-server:generic
has been deprecated. Use @angular-builders/custom-webpack:dev-server
instead."您能否更新此答案以反映这一点?
现在可以弹出 CLI 的 webpack 配置。检查 Anton Nikiforov's answer。
过时的:
您可以破解 angular-cli/addon/ng2/models
中的配置模板。目前还没有正式的方法可以修改 webpack 配置。
github 上有一个已关闭的“不会修复”问题:https://github.com/angular/angular-cli/issues/1656