Angular2如何使用AngularCLI添加第三方插件(webpack)
AngularCLI是一个用于快速搭建和开发Angular应用的命令行工具。它提供了一些方便的命令和工具，可以帮助开发者快速创建组件、服务、模块等，并且自动处理构建、打包、测试等工作。
要使用AngularCLI添加第三方插件（如webpack），可以按照以下步骤进行操作：
- 首先，确保已经安装了Node.js和npm（Node.js的包管理工具）。
- 打开命令行工具，使用以下命令全局安装AngularCLI：
- 打开命令行工具，使用以下命令全局安装AngularCLI：
- 创建一个新的Angular项目：
- 创建一个新的Angular项目：
- 这将在当前目录下创建一个名为my-app的新项目。
- 进入项目目录：
- 进入项目目录：
- 使用以下命令安装webpack插件：
- 使用以下命令安装webpack插件：
- 这将会将webpack插件添加到项目的依赖中，并自动更新package.json文件。
- 在AngularCLI生成的项目中，webpack的配置文件是angular.json。你可以使用任何文本编辑器打开该文件，并根据需要进行配置。
- 例如，如果你想自定义webpack的入口文件和输出文件路径，可以在angular.json中找到"architect.build.options"字段，并修改"main"和"outputPath"属性的值。
- 使用以下命令启动开发服务器：
- 使用以下命令启动开发服务器：
- 这将会编译你的Angular应用并启动一个本地开发服务器，你可以在浏览器中访问http://localhost:4200来查看应用。
以上就是使用AngularCLI添加第三方插件（如webpack）的步骤。请注意，这只是一个示例，你可以根据具体需求添加其他第三方插件，并按照它们的文档进行配置和使用。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
- 物联网平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我正在用AngularCLI (webpack版)开发一个Angular2应用。我有一个第三方插件(ScrollMagic)，它本身就有自己的一组可选插件。我可以使用以下语法将ScrollMagic加载到我的页面中：这似乎可以连接到node_modules并加载ScrollMagic，这样我就可以让第三方插件工作。ScrollMa
浏览 12提问于2016-09-21得票数 0
回答已采纳
1回答
我有一个项目，用于使用Angular2 (webpack版)创建的AngularCli应用程序。AngularCli将为您生成一个新项目，并将其签入Git。你怎么知道它使用的是哪个GitHub帐户？我可以使用Visual的嵌入式Git功能对代码进行更改并检查它。我已经使用我的帐户登录到GitHub，但我没有看到这个新项目。在哪里可以找到有关GitHub帐户AngualrCli和/或Visual代码正在使用的信息？
浏览 1提问于2016-09-21得票数 1
回答已采纳
我正在使用systemJS.config.js) webpack(而不是Angular2项目的Angular2，我很困惑如何集成内联编辑器插件(或其他插件)。你们能帮帮我吗？我的webpack文件夹结构如下->webpack.common.js->webpack.prod.js
->webpack
浏览 3提问于2017-03-24得票数 0
1回答
我是angular-cli的新手，我用ng new angular2命令创建了一个Range2项目。现在，当我尝试使用ng serve运行它时，它只会出现一些错误。日志：
ERROR in [default] C:\Users\user\desktop\angularcli\node_modules\@types\jasmine\index.d.ts:39:37ERROR in [default] C:\Users\user\desktop\angularcli\node_modules\@types\jasmine\in
浏览 3提问于2017-03-04得票数 1
WebStorm (Version >= 2006.2.EAP)提供，可以直接创建新的Angular2项目。现在的问题是:我如何创建一个新的路由(所有必要的文件:组件、html-tpl、spec.ts、e2e.specs等等)在WebStorm内飞行吗？“右键单击>创建新路径”不存在。有人能帮我吗？
浏览 6提问于2016-06-17得票数 3
回答已采纳
原因：由于公司政策限制，我们不能安装Node.JS，所以我不能联系到Webpack。问题：换句话说，我希望涉及到前端one key部署。
我认为这显然会提高性能。
浏览 0提问于2016-06-03得票数 1
2回答
我正在使用Angular2上传图像/文件。我不喜欢添加任何插件上传文件在angular2。有没有任何简单的方式通过API上传图像使用Angular2没有任何第三方的扩展？
浏览 3提问于2017-03-31得票数 0
回答已采纳
我希望在我的Angular2应用程序中有一个时间戳或版本号，这样我就可以判断用户是否在使用旧的缓存版本。
如何在AOT编译/构建时用AngularCLI在Angular2中实现这一点？
浏览 8提问于2017-01-19得票数 70
回答已采纳
我正在尝试将phoenix_js NPM模块导入到我的Angular2应用程序中(使用Angular2命令行界面启动)，但收到错误Cannot find module 'phoenix_js'。我见过很多人面临着在CLI启动的项目中导入第三方模块的问题，但他们都不适合我-我的文件结构似乎与其他人的不同……
对于初学者，我的Angular2 CLI版本是1.0.0-beta.22-1，我正在尝试将其导入到一个服务中根据我的研究，第三方库需要显式地包含在system.co
浏览 7提问于2016-12-24得票数 1
回答已采纳
在将Angular2合并到应用程序中时，我遇到了正确加载RequireJS的问题。为了简单起见，我在Angular2上使用了非常简单的Hello World Javascript教程：});我使用requiredPathsAndShim.js文件加载启动Angular2应用程序所需的所有依赖项。ng.platformBro
浏览 1提问于2016-06-02得票数 10
我正在使用作为种子项目，它非常棒。同时也推荐了在angular2项目中使用JavaScript库的标准方法，使用
浏览 2提问于2016-07-05得票数 3
回答已采纳
对于样式，我只使用了Bootstrap。我还没有使用Angular-CLI。有人能指导我应该如何部署它吗？我应该用吞咽吗？我的脚步应该是什么。我已经看过了很多关于stackoverflow的答案，但都在使用GULP和CLI。是否必须同时使用两者，如果是，请指导如何实现部署。遗憾的是，在Anular2官方网站上没有提到部署。
浏览 1提问于2016-10-28得票数 9
回答已采纳
4回答
如何在Angular4中设置代码覆盖率？json的包裹被更新到。{ "version": "0.0.1", "t
浏览 4提问于2017-05-15得票数 6
我真的想在Angular2中使用。。我不知道webpack在哪里。我真的很喜欢materializecss.当我使用AngularJS时，我总是使用它。
谢谢。
浏览 40提问于2017-01-30得票数 10
4回答
在与webpack捆绑了angular2应用之后我错过了什么。我已经添加了所有必要的加载器。// webpack.config.jsvar autoprefixer = require('autoprefixer');
var webpack = require('
浏览 0提问于2016-03-21得票数 0
1回答
许多文章解释了如何在Angular2/4、1. npm install --save-dev jquery、2. typing install dt~jquery 3. import * as $ from'jquery';文件中安装第三方库的类型。因此，我需要有人解释我们如何使用类型文件：typing install dt~semantic--save在Angular2/4项目中安装语义-UI，以便使用类似于$('.u
浏览 2提问于2017-09-23得票数 0
回答已采纳
8回答
说我的儿子是这样的： {id: 1, name: 'a'}, {id: 3, name: 'c'}如何将此JSON导出到Angular2中的CSV或Excel文件中？我使用的浏览器是Chrome。
也许Angular2与此无关，但是，是否有任何第三方插件可以在Angular2中注入并执行此任务？
浏览 12提问于2016-08-27得票数 35
回答已采纳
我使用插件将<script>标记插入到webpack生成的块的模板文件中。我也有一些全局样式表，我想动态地添加到我的<head>模板的部分。为此，我还使用html-webpack-插件如下(在本例中，app条目/块是相关的)。 entry: {
'polyfills': '.问题是，除了添加到app.ts入口点的两个样式表之外，
浏览 3提问于2016-10-06得票数 5
回答已采纳
1回答
如何将Visual Studio2015与Webpack和Angular2结合使用。我已经用VS创建了一个工作的Angular2应用程序，但现在我已经添加了Webpack来构建我的应用程序。我不想使用IIS Express在一个点上调试我所有的代码，甚至c# web api，我也不想使用外部HTTP Server。有人这么做过吗？我如何才能运行webpack脚本来运行这段代码
<!Confi
浏览 4提问于2016-10-31得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
