标签: angular-library

我正在开发一个我不想在 npmjs 中共享的组件库，有什么方法可以与其他 angular 项目共享我的 angular 库而不与 NPM 共享它。

我是角度的新手，

开始编写我的第一个库，包含组件、服务、指令。

我在库的exports数组中列出了我的组件、服务、指令，但仍然：

• 当使用来自另一个库或应用程序的库并成功编译时，我需要在public-api.ts. 为什么 ？ngModule 的 exports数组还不够吗？

• 现在从exports数组中删除了组件、服务、指令，一切仍然有效。为什么 ？

阅读 angular.io 上的文档，它看起来public-api.ts和exports服务于相同的目的 - 我可能在这里遗漏了一些基本的东西。

我有一个旧的角度库，当我迁移到angular 12并尝试构建我的库时，我收到以下错误：

  projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts:7:1
      7 @Component({
        ~~~~~~~~~~~~
      8   selector: 'app-alerts',
        ~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     39 
        
     40 }
        ~
    The component 'AlertsComponent' is used in the template but importing it would create a cycle: projects/namespace/lin-folder//src/lib/components/header/header.component.ts -> projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts -> projects/namespace/lin-folder//src/lib/website.module.ts -> projects/namespace/lin-folder/src/lib/components/header/header.component.ts

有人遇到过同样的错误吗？

我正在使用 Angular 12。\n我创建了一个库和一个项目。\n在我的库中，我有样式 (dark-theme.scss) 文件，我想将其提供给应用程序。

我从文档中知道我需要将资产设置为 ng-packagr。在 nx 工作区中，这是库根文件夹中的 ng-package.json 文件。

我的 ng-package.json 看起来像：

{\n  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",\n  "dest": "../../dist/libs/my-lib",\n  "assets": ["**/dark-theme.scss"],\n  "lib": {\n    "entryFile": "src/index.ts"\n  }\n}\n

库构建后，我检查了我的 scss 文件确实在路径上：

dist\\libs\\my-lib\\dark-theme.scss\n

在我的应用程序中，我想将该样式导入到通用应用程序样式（styles.scss）中：

@import "@my-lib/dark-theme.scss"; \n

还尝试过：

@import "~@my-lib/dark-theme.scss"; \n

当我尝试在 Nx 工作区中启动应用程序时，出现错误：

./apps/app-demo/src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):\nSassError: Can\'t find stylesheet to import.\n  \xe2\x95\xb7\n1 \xe2\x94\x82 @import "@my-lib/dark-theme.scss";\n  \xe2\x94\x82         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n

目标是将组件模块创建为Angular 库，并将其与主应用程序分开。因此，组件库作为独立包发布到 NPM，然后可以导入到不同的应用程序中。使用 Tailwind 实用程序编写的组件样式@apply- https://tailwindcss.com/docs/extracting-components

请购单

• 组件库和主应用程序都使用 Tailwind CSS。
• Tailwind purge(PurgeCSS) 应该应用于最终项目，包括来自外部库的组件。

问题

我在使用TailwindCSS库中的组件样式时遇到问题，因为最终的 AMD 和 ES2015 版本包含内联样式，无法通过主应用程序中的 Tailwind 配置进行处理。

当我在同一个主项目中本地使用 Angular 库时，它就非常有效（请参阅组件“本地演示”的示例）。但是，当我将库发布为 NPM 包时，类与实用程序一起内联到模块中@apply，无法正确处理。

发布的库组件代码示例（ES2015模块）：

styles: ["@layer components{.first-component-base {@apply w-full;} .first-component-base.first-component-disabled {@apply opacity-50;} .first-component-base .first-component-wrapper {@apply rounded-lg bg-skin-fill;} .first-component-base .first-component-wrapper .first-component-block {@apply max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8;} .first-component-text {@apply ml-3 font-medium text-white truncate;}}\n"]

如您所见，@apply如果您将组件库添加为 NPM 包，则构建的模块样式包含主应用程序的 Tailwind 配置无法处理的样式。

源代码示例和自述文件 - https://github.com/maxcoffer/angular-tailwind-library

可能的解决方案

这是我到目前为止所尝试过的，或者作为示例进行测试的，但它的工作效果并不完全完美或者有自己的缺点。

1. 使用组件提取作为 TailwindCSS plugin（请参阅 …

我正在尝试在我的角度npm包中创建我认为称为辅助入口点的东西。我想要以下两个切入点

@scope/data-service
@scope/data-service/models

使用angular-cli生成基本包会生成以下结构

scope
????data-service
    ?   karma.conf.js
    ?   ng-package.json
    ?   ng-package.prod.json
    ?   package.json
    ?   tsconfig.lib.json
    ?   tsconfig.spec.json
    ?   tslint.json
    ?
    ????src
        ?   public_api.ts
        ?   test.ts
        ?
        ????lib
                data-service.component.spec.ts
                data-service.component.ts
                data-service.module.ts
                data-service.service.spec.ts
                data-service.service.ts

根据ng-packagr 文档，您可以在名为datas的数据服务下添加一个文件夹，然后package.json在该文件夹中添加第二个文件夹，但是ng-packagr似乎使用的结构与angular-cli略有不同。理想情况下，我正在尝试对类似于https://github.com/angular/angular/tree/master/packages/common的结构进行建模，但只要公开了@scope/data-service，@scope/data-service/models我就会很高兴。

当我尝试创建类似于ng-packager建议的结构时，我得到了

error TS6059: File 'C:/projects/data-service-app/projects/scope/data-service/models/src/index.ts' is not under 'rootDir' 'C:\projects\data-service-app\projects\scope\data-service\src'. 'rootDir' is expected to contain all source files.

当我将models目录移动到data-service\src目录中时，我的入口点是

@scope/data-service
@scope/data-service/src/models

如何摆脱二级入口上的src？

使用angular-cli时，使用辅助入口点创建库的正确方法是什么？

如果我创建一个像这样的角度库：

ng new libraries-workspace --create-application=false
cd libraries-workspace
ng generate library test-library

现在我建立了图书馆

ng build test-library --watch

现在，如果我在完全不同的文件夹（远离工作区）中创建一个新的角度应用程序

ng new test-project

cd test-project

如何在不发布到 NPM 的情况下引用或安装我的库。所以基本上我想从文件夹安装库

像这样的东西：

ng add test-library c:\libraries-workspace\dist\test-library...

我不想将我的项目添加到工作区文件夹中。

谢谢

我的 Angular 12 应用程序中有一些通用组件，我计划将其创建为 Angular 库，以便其他应用程序也可以使用它。我们有一些应用程序在较低版本的 Angular（例如 Angular 8 / Angular 10）上运行，它们也将使用这个通用库。

我已经在 Angular 12 中创建了库，它在 Angular 12 应用程序中运行良好。但是，它在使用 Angular 8 和 Angular 10 的其他应用程序中不起作用。

出现如下错误：

fesm2015/common-lib.js 12:145-163 "export '\xc9\xb5\xc9\xb5FactoryTarget' (imported as 'i0') was not found in '@angular/core'\n

所以，主要的困惑是我是否需要为 v8、v8 和 v12 应用程序创建 3 个不同的角度库。或者有什么方法可以创建一个可供所有 3 个角度应用程序使用的库（版本 8/10/12）。

请建议正确的继续方式。

与“完整”编译模式相比，为什么在“部分”编译模式下编译的库在消费者应用程序内部构建得如此缓慢？

我正在尝试创建一个 Angular v14 应用程序，该应用程序导入包含路由的 Angular 库。我的设置看起来像这样：

app.module.ts：（主应用程序）

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '' , loadChildren: () => import('@mytest/core').then(m => m.TestModule)}
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.module.ts（库）

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: '', pathMatch: 'full', component: TestComponentComponent}
    ]),
  ],
  declarations: [TestComponentComponent],
  exports: [TestComponentComponent],
})
export class TestModule { }

当我运行ng serve所有内容时，编译时没有任何问题，但是打开时localhost:4200我发现一个空白页面，并在控制台中出现此错误：

Error: NG0203: inject() must be called from an injection context such …