如何解决 Angular custom library module 在 ng build 时无法被识别的错误

简介: 如何解决 Angular custom library module 在 ng build 时无法被识别的错误

SAP Spartacus angular.json, 是 Angular CLI 自动生成的文件,里面针对 storefrontapp,生成的 tsConfig 属性,指向一个 tsconfig.app.json 文件,该文件指定 ng build 如何对该 app 进行构建。

image.pngimage.png

这里使用的构建工具 builder 是 @angular-builders/custom-webpack:browser.

types 属性为何为空?

61.png

很多 JavaScript 库,比如 jQuery、Jasmine 测试库和 Angular,会通过新的特性和语法来扩展 JavaScript 环境。 而 TypeScript 编译器并不能原生的识别它们。 当编译器不能识别时,它就会抛出一个错误。


可以使用TypeScript 类型定义文件 —— .d.ts 文件 —— 来告诉编译器你要加载的库的类型定义。


比如上图第13行代码的 build.process.env.d.ts:

image.png

很多库在自己的 npm 包中都包含了它们的类型定义文件,TypeScript 编译器和编辑器都能找到它们。Angular 库也是这样的。 任何 Angular 应用程序的 node_modules/@angular/core/ 目录下,都包含几个 d.ts 文件,它们描述了 Angular 的各个部分。


TypeScript 带有一个特殊的声明文件,名为 lib.d.ts。该文件包含了 JavaScript 运行库和 DOM 的各种常用 JavaScript 环境声明。


在生产模式下的构建,使用另一个配置文件:tsconfig.app.prod.json:

image.png

在这个文件里,重新对 compilerOptions 的 paths 进行了定义。

64.png

因此,如果使用了其他的 custom library,需要将其在 dist 下的路径,同样声明在 paths 节点下:

image.png

否则的话,命令行 ng serve --configuration production 就会报如下错误,找不到名为 test-lib 的 custom library:

66.png

添加之后,yarn build 工作正常:

67.png

构建成功:

68.png

关于 tsconfig.json 文件里的 include 和 exclude 属性用法:

include 用于指定要包含在程序中的文件名或模式数组。 这些文件名是相对于包含 tsconfig.json 文件的目录解析的。

例子:

{
  "include": ["src/**/*", "tests/**/*"]
}

这个设置会将下列文件包含进来:

69.png

包含和排除支持通配符来实现 glob 模式:

  • 匹配零个或多个字符(不包括目录分隔符)
  • ? 匹配任何一个字符(不包括目录分隔符)
  • **/ 匹配嵌套到任何级别的任何目录


63.png


62.png

目录
相关文章
|
12天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
2月前
|
测试技术 开发者
Angular Custom Providers 的一个具体例子讲解
Angular Custom Providers 的一个具体例子讲解
16 2
|
5月前
|
JavaScript 编译器 开发者
关于 Angular 应用的 ng-version 属性
关于 Angular 应用的 ng-version 属性
20 0
|
6月前
|
存储 缓存 JSON
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
32 0
|
7月前
|
资源调度 JavaScript 前端开发
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
如何解决 Angular custom library module 在 ng build 时无法被识别的错误
42 0
|
6月前
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
39 0
解决Cannot find module '@angular/compiler-cli'
解决Cannot find module '@angular/compiler-cli'
109 0
解决Cannot find module '@angular/compiler-cli'
angular8-本地运行ng文档
angular8-本地运行ng文档
77 0
angular8-本地运行ng文档
Libra教程之:运行自定义move modules
Libra教程之:运行自定义move modules
Angular compiler报的一个错误消息:Component XX is not part of any NgModule
Angular compiler报的一个错误消息:Component XX is not part of any NgModule
137 0
Angular compiler报的一个错误消息:Component XX is not part of any NgModule