对Angular 模块ng-packgar打包并install 使用( 本测试是在Angular7）

最新推荐文章于 2025-01-11 12:05:19 发布
原创 最新推荐文章于 2025-01-11 12:05:19 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档详述了在Angular7环境下使用ng-packagr打包模块的步骤，包括新建项目、模块和组件，测试项目正常运行，配置打包文件，解决打包过程中遇到的问题，以及最终的模块发布和在新项目中的应用测试。通过这一过程，帮助读者理解Angular模块打包流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于需求，研究了一天如何对Angular的模块进行打包，现在Angular 7 的环境下进行模块的打包测试( 据说ng-packagr至少得在Angular6才能用，至于是否能对6以下的适用，有待各位去尝试）

   1.  新建angular项目  

           >>    ng new npmdemo   新建npmdemo项目

   2.  新建模块

           >>    cd npmdemo       进入npmdemo项目目录

/npmdemo>>    ng g m system   (或者 ng generate module system)    新建  system 模块

            将在   app.module.ts   中 import 模块SystemModule

   3.  新建组件

            >>    ng g c system/dict    新建dict组件

      &

最低0.47元/天 解锁文章

200万优质内容无限畅学
angular环境安装 (含nodejs详细安装步骤)
奇怪的人类
06-03 2067
a. 在安装nodejs的目录下新建两个文件夹【node_global】及【node_cache】安装完后之后可以使用 node-v 和 npm -v可以查询对应的node和npm的版本号。目前需要用到的版本是：10.15.2（项目1），18.15.0（项目2）nvm list : nvm 查看已安装的node。nvm use 版本号：切换到指定的node版本。b. cmd窗口执行命令（设置npm的路径）安装成功的话可以看到 nvm的版本号等信息。nvm -v: 查看nvm版本号。g. 设置nvm环境。
使用ng-packagr打包Angular的方法示例
10-17
UMD格式的打包通常使用rollup工具，如果类库引用了其他模块，并且这些模块的UMD标识符无法自动识别时，开发者需要在ng-package.json中手动映射正确的标识符。 通过AngularCli创建的类库模板，大部分内容与Angular...
对Angular 模块ng-packgar打包并在另一项目中使用( 本测试是在Angular6）
qq_29477175的博客
04-23 1006
1. 新建ng项目、模块、组件 ng new ccc cd src/app ng g m sys cd sys ng g c test 2. 修改sys.module.ts 文件，添加exports: [TestComponent] import { NgModule } from '@angular/core'; import { CommonModule } from '@angu...
安装angular
weixin_41044610的博客
04-17 631
最近接触到新的前端框架Angular。下面简单介绍下本人安装Angular CLI的过程。 Angular Cli是angular对包括一堆工程化构建工具，例如webpack的封装，能让开发者更容易的搭建angular工程。 安装Angular-Cli 需要先安装 Node.js. 大家可以去node.js官网下载。 说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异...
1. Angular的安装与使用
最新发布
01-11 215
默认4200端口启动，也可指定端口启动: ng serve --port 8080。运行界面也展示了一些学习链接，及常用命令。ng new
Angular （ 一 ） angular的安装
weixin_30520015的博客
07-16 147
1.　　全局安装angular 脚手架工具 　　npm install -g @angular/cli 2.　　打开到创建目录； 3.　　创建项目　　 　　ng new my-app 4.　　打开项目 5.　　安装依赖 　　npm install 6.　　运行项目 　　ng serve --open 转载于:https://www.cnblogs.com/liuyunqi/p/9...
基于阿里angular组件NG-ZORRO开发的一套企业后台管理系统模板 目的是简单、方便、快速的搭建一个企业后台管理系统
07-13
基于阿里angular组件NG-ZORRO开发的一套企业后台管理系统模板。目的是简单、方便、快速的搭建一个企业后台管理系统。 在线Deom 模板项目提供了登录页面、动态菜单、session存储、权限路由守卫等功能，您只需要开发...
ng-book2-angular-6-r68
06-21
《ng-book2-angular-6-r68》是深入、全面且与时俱进的Angular 6专著，旨在帮助读者成为Angular 6的专家。这本书涵盖了Angular框架的各个方面，从基础概念到高级特性和最佳实践，旨在让读者对Angular 6有深入的理解。...
Ng-book Angular7 -- 最新版本
06-17
5. **@angular/devkit**：Angular7加强了devkit工具集，便于开发者进行自动化构建、测试和打包任务。 二、Ng-book学习路径 1. **基础篇**：首先，你需要理解Angular的基本架构，包括组件、指令、服务、模块等核心...
Angular安装命令
Ryan_black的博客
06-01 1239
直接打开cmd命令窗口,giao! 第一步：先装nodejs //去nodejs官网下一个比较新的版本,用如下代码查看是否下载成功 node -v 第二步：安装cnpm和淘宝镜像 npm install -g cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 第三步：安装前的检查 之前电脑上如果安装过angular cli老版本的话建议先卸载，然后重新安装。 卸载老版本： npm uninstall -g angul
angular的安装和简单配置（入门）
Crayon111的博客
07-20 1170
Angular的安装和简单配置
Angular安装出现问题（ng 不是内部命令 或 外部命令）
doublepg13的博客
07-30 3842
安装 参考文章 先安装node.js，默认方法安装，进入官网（一般安装LTS版本），一直next就行了 出现问题 在安装完成后，使用ng -v查看是否安装成功的时候cmd提示 【ng 不是内部命令 或 外部命令】 在cmd中能执行的命令一般都是需要环境变量配置的，例如"node -v" 这些是安装程序帮我们配置了环境变量， “ng” 使用我们使用npm install -g @angular/cli 下载到本地的文件，系统不会自动配置angular的环境变量， 犹如上面提到的，全局安装@angular/
angular安装及细节注意
zt_vicky的博客
02-14 4247
1.在文件目录下打开命令行对应定位到此目录执行：npm install angular 安装angular的第一个版本，默认安装的是1.0的版本，第一个版本是用js编写的，第二个版本typescript   2.我们在node_modules找angular的文件夹，拷贝这个angular.js到我们的项目文件夹里面 我们开发（调试）的时候用angular.js（未压缩的版本） 我们是发
angular的安装与使用
Z_HLL的博客
09-04 1915
它以特定的顺序加载一些基本脚本。双击安装包，直接点击Next，勾选使用许可协议，点击Next，选择安装位置（可根据个人情况更换路径，我这里选择安装在D:\nodejs）a、（win11）进入环境变量，编辑【系统变量】下的变量【Path】 （控制面板-->高级系统设置-->环境变量）根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。|--karma.conf.js 在测试指南中提到的 karma 测试运行器的配置。
angular安装及使用
KI.TY的博客
07-22 669
angular官方安装：https://angular.cn/guide/setup-local 安装完后检查环境变量：用户变量指向node.exe所在位置，系统变量指向ng.cmd（如图）
packer-ng多渠道快速打包
fuzhongbin的博客
03-18 957
步骤一： 1.在整个工程的build.gradle中添加依赖： dependencies { compile 'com.mcxiaoke.gradle:packer-ng:1.0.7' } 2.在Module的build.gradle中配置 apply plugin: 'packer' dependencies { compile 'com.mcxi...
angular7项目不同的打包方式之间的对比
yw00yw的博客
07-09 2252
在angular项目中，不同的打包方式发布之后加载的速度不同。所以在打包的时候一定要使用正确的打包姿势。 总体对比 命令 效果 体积 相同项目不同打包方式代码体积 ng build 相当于开发环境 体积最大 23.6M ng build --prod angular预编译 体积最小 3.71M ng build --prod --aot angular预编译 体积最小 3....
推荐项目：ng-packagr——打造完美的Angular库构建工具
gitblog_00077的博客
05-12 499
推荐项目：ng-packagr——打造完美的Angular库构建工具 1、项目介绍 ng-packagr 是一个用于编译和打包Angular库的工具，遵循Angular Package Format (APF)规范，帮助开发者以高效且符合标准的方式创建可发布的Angular库。这个项目由社区维护，拥有强大的功能和活跃的更新，是Angular开发者的理想选择。 2、项目技术分析 ng-packagr...
angular前端环境搭建、安装angular
weixin_47599724的博客
12-13 2341
我们在第四步安装的时候选择了自定义保存路径D:\Nodejs】，我们需要把全模块下载路径和cache缓存路径也放在自定义的路径下【D:\Nodejs】。进入官网后，当前页面下载的是最新版本，如需要下载历史版本，点击红框标注的其他下载，在进入的新的页面底部，选择红框标准的先前版本，然后下载相应的版本，在跳转的页面下载win64的版本即可。3.在【系统变量】下的【Path】新建添加node全局文件夹【D:\Nodejs】，之后点击确定。2.如果安装版本错误，一般可先将本地已安装的版本卸载再次重新安装。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值