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

简介: 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’;

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

image.png

然后我们按住 ctrl 之后再单击,就能看到 test-lib 位于 dist 文件夹中的准确实现位置:

image.pngimage.png同理,我们也能按照 Spartacus 其他的 feature library 设计一样,将 test-lib 的 paths 值,指定成feature-libs 内的资源文件,而非 dist 文件夹。

image.png如果要让应用在服务器端渲染即 Server Side Rendering 模式下工作,需要将 library 地址添加到 tsconfig.server.json 中:

image.pngCSR:ng build storefrontapp

Server Side Rendering : ng run storefrontapp:server

成功构建:

image.pngAngular 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 为前缀。


例如;image.png


image.png

相关文章
|
1月前
|
JSON 关系型数据库 数据库
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
|
1月前
|
JSON 关系型数据库 数据库
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
【python】Python将100个PDF文件对应的json文件存储到MySql数据库(源码)【独一无二】
|
2月前
|
存储 JSON 算法
C++ JSON库 nlohmann::basic_json::boolean_t 的用法
C++ JSON库 nlohmann::basic_json::boolean_t 的用法
37 0
|
3天前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
14天前
|
前端开发
【专栏】在前端开发中,package.json 文件是项目的重要配置文件,其中包含了许多与项目相关的信息和设置
【4月更文挑战第29天】`package.json`的`proxy`字段用于配置开发环境中的代理服务器,解决跨域问题并模拟后端响应。它是字符串类型,值为代理服务器地址。主要应用场景包括前端跨域请求和本地调试。配置时在`package.json`顶层添加`proxy`字段,如`"proxy": "http://localhost:8080"`。该配置仅在开发环境中生效,生产环境需另寻解决方案。
|
27天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
38 0
|
1月前
|
存储 JSON 数据格式
python读取同路径下的json文件,并解析
使用Python的`json`模块读取和解析JSON文件,首先导入json模块,再用`open()`结合`json.load()`读取文件内容到`data`。通过字典和列表语法访问JSON数据,如`data['name']`获取名字,`data['items']`获取列表,可循环遍历列表元素。
13 0
|
1月前
|
JavaScript 前端开发 开发工具
Angular 项目中一个 index.d.ts 文件的具体例子介绍
Angular 项目中一个 index.d.ts 文件的具体例子介绍
16 0
|
1月前
|
JavaScript 前端开发 开发者
Angular 项目里 tsconfig.schematics.json 文件的作用
Angular 项目里 tsconfig.schematics.json 文件的作用
10 0
|
1月前
|
前端开发
Angular module 的 forRoot 和 forChild 方法
Angular module 的 forRoot 和 forChild 方法
13 1