乐趣区

关于angular:Angular-tsconfigjson-文件里的-paths-用法和-scoped-module-定义

执行命令行:ng run storefrontapp:server:production

报错:

Error: projects/storefrontapp/src/app/app.module.ts:33:30 – error TS2307: Cannot find module ‘feature-libs/my-lib/src/public-api’ or its corresponding type declarations.

33 import {MyLibService} from ‘feature-libs/my-lib/src/public-api’;

如果把谬误音讯里提到的第 33 行代码正文掉:

build 就没有任何问题:

阐明这个谬误是 33 行代码引起的。

本地 storefrontapp Angular 利用,应用的配置文件是 tsconfig.app.json,这个文件扩大了工作区根目录下的 tsconfig.json 文件:

在 angular.json 里,tsconfig.app.json 作为 storefrontapp 的 tsConfig 的配置文件:

每当应用 Angular CLI 新建一个 library 时,该 library 的名称,都会主动写入 tsconfig.json 的 paths 节点里:

咱们执行完 npm build test-lib 之后,dist 文件夹里生成对应的资源文件:

而后咱们按住 ctrl 之后再单击,就能看到 test-lib 位于 dist 文件夹中的精确实现地位:

同理,咱们也能依照 Spartacus 其余的 feature library 设计一样,将 test-lib 的 paths 值,指定成 feature-libs 内的资源文件,而非 dist 文件夹。

如果要让利用在服务器端渲染即 SSR 模式下工作,须要将 library 地址增加到 tsconfig.server.json 中:

CSR:ng build storefrontapp
SSR: ng run storefrontapp:server

胜利构建:

Angular independent feature sub libraries

不晓得大家是否留神到了,Angular (@angular) 以某种形式分成不同的“局部”,例如:

  • @angular/common
  • @angular/core
  • @angular/forms

等等。
而 每一个局部,例如 @angular/common 又有不同的子目录可供导入:

  • @angular/common/http
  • @angular/common/locale
  • @angular/common/testing

Angular 反对多个开箱即用的子库。

默认的我的项目构造蕴含一个“app”应用程序,它是一个惯例的 Angular 我的项目,而后你增加额定的子库,即 Angular 库我的项目。有搁置在库子文件夹中。

一个 Angular 我的项目能够蕴含多个子库我的项目。

每个子库我的项目都能够作为独自的 npm 包公布,因为它们有本人的 package.json 文件。

npm 反对称为作用域包名称的货色。这容许您将包命名为 @angular/core,其中 @angular 是包的范畴。

您能够像这样将作用域库增加到以后的 Angular 我的项目中。

ng generate library @my-scope/my-library

从范畴我的项目导入时,它必须以 scope 为前缀。

例如;

import {CommonService} from '@cool-lib/common';
import {FeatAComponent, FeatAService} from '@cool-lib/feature-a';
import {FeatBModule} from '@cool-lib/feature-b';

在下面,名称 @cool-lib 是作用域,common 是 npm 包的名称。

应用 scoped module 的两个长处:

  • 避免与其余包的名称抵触,例如 @cool-lib/animations 不会与 @angular/animations 抵触
  • 将包组织成 node_modules/@cool-lib

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版