angular - 如何更改 Angular 10 库构建结构

标签 angular directory-structure angular10 angular-library

我正在维护一个 Angular 10 Ivy 库,我正在尝试升级它以使用辅助入口点,但我在最终构建的文件夹结构方面遇到了麻烦。

理想情况下,文件夹结构将模拟@angular 的文件夹结构:

-node_modules
 |
  -- @angular
     |
     --core
     --common
     --cli
     --material
     ...

我可以像这样导入库的片段:import { someModule } from '@angular/core';

我当前的库构建的文件夹结构为

-node_modules
 |
  --myLibrary
    |
     --package.json
     --dist/myLibrary
       |
        --package.json
        --public_api.ts
        --myLibrary.d.ts
        --feature1
        --feature2
        --feature3
        ...

这迫使我导入功能,例如 import { feature1Module} from 'myLibrary/dist/myLibrary/feature1';

我知道我可以通过更新 myLibrary/ng-package.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 文件中的每个的功能文件夹仅导出其各自功能的模块和组件。

最佳答案

我有类似的文件夹结构,在我的库中有 Input、Button 等,这就是您所说的功能。在 ng-package.json 中我有如下设置:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ngx-pluto",
  "lib": {
    "entryFile": "src/index.ts",
    "cssUrl": "inline"
  }
}

在我的功能 table.module.ts 中,我可以导入 NpPaginatorModule 功能,如下所示:

import { NpPaginatorModule } from '../paginator/index';

在我使用 npm 发布我的库后,我可以将我的功能导入我的消费项目,如下所示:

import { NpButtonModule } from 'ngx-pluto';

这是我的代码链接,仅供您引用: https://github.com/KevinZhang19870314/pluto-ui

关于angular - 如何更改 Angular 10 库构建结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65298351/

相关文章:

asp.net-mvc - 在 ASP.NET MVC 中,放置我的 Entity Framework DataContext 类的 "best practice"位置(文件夹)在哪里?

Angular 日期管道在文本框中无法正常工作

angular - 元素内部的 ionic 拉动刷新(Refresher)

C++ 头文件和源目录

angular - 在 Kendo UI Chart Angular 2 中隐藏网格线

ios - MVC 模型中的 UIStoryboardSegue

Angular 10 错误 : Object is possibly 'undefined' when accessing the previous array element

angular - 使用 Angular 自定义 Web 组件会引发错误 : The selector "app-root" did not match any elements

javascript - 如何使 this 引用函数中的类?

angular - 如何在angular 7中将内容类型设置为multipart/form-data