Angular 如何更改库的构建结构
我正在维护一个Angular 10 Ivy库,并试图升级它以利用二级入口点,但最终构建的文件夹结构遇到了问题 理想情况下,文件夹结构将模拟@angular的文件夹结构:Angular 如何更改库的构建结构,angular,directory-structure,angular10,angular-library,Angular,Directory Structure,Angular10,Angular Library,我正在维护一个Angular 10 Ivy库,并试图升级它以利用二级入口点,但最终构建的文件夹结构遇到了问题 理想情况下,文件夹结构将模拟@angular的文件夹结构: -node_modules | -- @angular | --core --common --cli --material ... 我可以从'@angular/core'导入库的各个部分,比如:import{someModule} “我的当前库”的文件夹结构为
-node_modules
|
-- @angular
|
--core
--common
--cli
--material
...
我可以从'@angular/core'导入库的各个部分,比如:import{someModule}代码>
“我的当前库”的文件夹结构为
-node_modules
|
--myLibrary
|
--package.json
--dist/myLibrary
|
--package.json
--public_api.ts
--myLibrary.d.ts
--feature1
--feature2
--feature3
...
这迫使我从'myLibrary/dist/myLibrary/feature1'导入功能,如import{feature1Module}代码>
我知道我可以通过更新我的myLibrary/ng包.json中的dest
路径来删除第二个myLibrary
文件夹,但是我不知道如何删除dist
文件夹以使所有内容都在同一级别上构建,因为设置dest:“./…”
将无法构建
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/myLibrary",
"assets": [
"quill/*.scss"
]
}
非常感谢您的帮助
更新:
项目结构如下:
-projects
|
--myLibrary
|
--package.json
--ng-package.json
--src
|
--public_api.ts
--commonFunctions
--feature1
|
--package.json
--src
|
--public_api.ts
--index.ts
--feature1.component.ts
--feature1.component.html
--feature1.module.ts
--feature2
--feature3
...
我的projects/myLibrary/src/public_api.ts
仅导出commonFunctions
中的函数,每个功能文件夹中的public_api.ts
文件仅导出各自功能的模块和组件。我有类似的文件夹结构,在我的库中有输入、按钮等,这就是你所说的功能。在ng-package.json中,我有如下设置:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
在我的feature table.module.ts中,我可以导入NpPaginatorModule功能,如下所示:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
在我使用npm published my library后,我可以在我的消费项目中导入我的功能,如下所示:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
以下是我的代码链接,仅供参考:
我有类似的文件夹结构,在我的库中我有输入、按钮等,这被称为像您所说的功能。在ng-package.json中,我有如下设置:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
在我的feature table.module.ts中,我可以导入NpPaginatorModule功能,如下所示:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
在我使用npm published my library后,我可以在我的消费项目中导入我的功能,如下所示:
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-pluto",
"lib": {
"entryFile": "src/index.ts",
"cssUrl": "inline"
}
}
import { NpPaginatorModule } from '../paginator/index';
import { NpButtonModule } from 'ngx-pluto';
以下是我的代码链接,仅供参考:
我找到了问题的答案
我的问题是,我将我的库作为github依赖项而不是npm包导入到我的项目中。我这样做是因为Github允许用户免费托管私有存储库,但NPM要求每月付费订阅私有软件包,因此我们公司的解决方案是添加我们私有库的依赖项,如“我的库”:“git”+ssh://git@github.com/myOrg/my library.git#semver:10.2.7“
。当您没有实现辅助入口点时,这实际上是可行的,因为您的主入口点指向使用所有库功能构建的定义文件,并且具有指向这些功能的正确路标
当您尝试实现辅助入口点时,构建模块的结构会成为一个问题,因为在搜索表示辅助入口点的附加package.json
文件时,ng Packager不会遍历模块结构中的多个层。阅读后,npm似乎不支持从子目录安装项目,而只是查找它在存储库中找到的第一个package.json
文件,并将其作为模块安装。这给了我奇怪的文件夹结构,因为存储库实际上是一个mono repo,它承载了我的库、一个演示项目和一个e2e测试项目。由于没有支持的方法来单独安装其中一个项目,我可能的解决方案仅限于将库拆分为自己的Github repo,或者编写一个postinstall
脚本,将node\u模块/myLibrary/dist/myLibrary的内容复制/粘贴到node\u模块/myLibrary
我找到了问题的答案
我的问题是,我将我的库作为github依赖项而不是npm包导入到我的项目中。我这样做是因为Github允许用户免费托管私有存储库,但NPM要求每月付费订阅私有软件包,因此我们公司的解决方案是添加我们私有库的依赖项,如“我的库”:“git”+ssh://git@github.com/myOrg/my library.git#semver:10.2.7“
。当您没有实现辅助入口点时,这实际上是可行的,因为您的主入口点指向使用所有库功能构建的定义文件,并且具有指向这些功能的正确路标
当您尝试实现辅助入口点时,构建模块的结构会成为一个问题,因为在搜索表示辅助入口点的附加package.json
文件时,ng Packager不会遍历模块结构中的多个层。阅读后,npm似乎不支持从子目录安装项目,而只是查找它在存储库中找到的第一个package.json
文件,并将其作为模块安装。这给了我奇怪的文件夹结构,因为存储库实际上是一个mono repo,它承载了我的库、一个演示项目和一个e2e测试项目。由于没有支持的方法来单独安装其中一个项目,我可能的解决方案仅限于将库拆分为自己的Github repo,或者编写一个postinstall
脚本,将node\u modules/myLibrary/dist/myLibrary
的内容复制/粘贴到node\u modules/myLibrary
功能模块1是否从库公共api导出?如果是这样,它是否可以像“我的库”中的import{featuremodule1}一样进行导入?这与从某个dist路径导入核心角度模块(如httpclient)的方式类似。不,feature1仅通过其自己的public_api.ts文件导出。据我所知,如果feature1是从库中导出的