日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义

發布時間:2023/12/19 编程问答 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Angular tsconfig.json 文件里的 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 文件夾。

如果要讓應用在服務器端渲染即 Server Side Rendering 模式下工作,需要將 library 地址添加到 tsconfig.server.json 中:

CSR:ng build storefrontapp
Server Side Rendering : 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的原創文章,盡在:“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular tsconfig.json 文件里的 paths 用法和 scoped module 定义的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。