解决 Angular 官网下载的 library Schematics build 出错的办法

简介: 解决 Angular 官网下载的 library Schematics build 出错的办法

从 angular 官网下载 Schematics 的例子,在工作区的根目录下,运行库的 ng build 命令。


ng build my-lib


错误消息:


An unhandled exception occurred: Cannot find module ‘@angular-devkit/build-ng-packagr/package.json’

Require stack:


C:\app\node-v12.18.3-win-x64\node_modules@angular\cli\node_modules@angular-devkit\architect\node\node-modules-architect-host.js

C:\app\node-v12.18.3-win-x64\node_modules@angular\cli\node_modules@angular-devkit\architect\node\index.js

C:\app\node-v12.18.3-win-x64\node_modules@angular\cli\models\architect-command.js

C:\app\node-v12.18.3-win-x64\node_modules@angular\cli\commands\build-impl.js

C:\app\node-v12.18.3-win-x64\node_modules@angular\cli\node_modules@angular-devkit\schematics\tools\export-ref.js


image.png

npm install 之后,问题依旧:


image.png


然而,我自己的 lib github repo 没有这个问题:


https://github.com/wangzixi-diablo/angular-monorepo


ng build my-lib 很顺利:

image.png


比较两个工作区的 angular.json, 果然还是发现了一些区别:


image.png

注意下列标注的差别:

image.png


把 2 替换成 1 之后,又遇到如下的错误消息:


Cannot find module ng-packagr


image.png

在我能够工作的仓库下的 ng version 输出:


image.pngimage.png

而 Angular 官网:

image.png

做一个表格比较一下:

image.png


这一行: “ng-packagr”: “^12.1.1”,


官网的 package.json 没有。添加到官网项目的 package.json 之后,问题消失,build 成功:

image.png

相关文章
|
12月前
|
开发者
Angular Schematics 实战 - 项目根目录新建一个文件
Angular Schematics 实战 - 项目根目录新建一个文件
|
12月前
|
API
什么是 Angular library 的 secondary entry points?
什么是 Angular library 的 secondary entry points?
|
5月前
|
应用服务中间件 nginx
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
|
12月前
|
存储 API
什么是 Angular Schematics
什么是 Angular Schematics
|
资源调度 JavaScript 前端开发
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
|
移动开发 前端开发 JavaScript
如何创建 Angular library 并在生产环境中消费
如何创建 Angular library 并在生产环境中消费
什么是 Angular library 的 secondary entry points?
什么是 Angular library 的 secondary entry points?
|
18天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
35 0
|
2月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
36 0