标签: angular-library

我将所有 angular 库升级为angular 9.0.0using ng update，当我尝试构建它们时，出现以下错误。

错误：

不受支持的私有类 SomeComponent。此类通过 SomeModule -> SomeComponent 对消费者可见，但不会从顶级库入口点导出。

有人解决了这个错误吗？

我将我的angular 8.x.x项目迁移到angular 9.x.x，当我尝试发布我的库时，它失败并显示以下错误

npm 错误！@candiman/website@9.0.0 prepublishOnly：node --eval "console.error('ERROR: Trying to publish a package that has been compiled by Ivy. This is not allowed.\nPlease delete and rebuild the package, without compiling with Ivy, before attempting to publish.\n')" && exit 1

有什么变化吗 angular 9

我已经好几周了,我正在寻找解决方案.我创建了(使用ng生成库)一个带有UI的库,用于在这里工作的新webproject ...实际上每个component" template library"都有这个ViewEncapsulation.None集合...我知道这不是我们应该使用Angular的方式,但它会允许我们重复使用前几年所做的所有努力工作.

我希望将样式表"打包" (.css files)成library一种方式,当有人做" npm install templatelib"他/她将自动包含在他们的应用程序中的所有样式和字体时,无需手动复制styles和fonts在他们的src/app.

我希望以某种方式为我的用户提供一个原子单元,只需要template-lib-tag在他们中设置一个app.component.html并且它们都已设置好...然后他们只需要在模板设计中添加他们想要显示/使用的内容.content components

我已经尝试了几乎所有我能找到的"打包"资产,但我要么得到错误说明了Data path "" should NOT have additional properties(styles).当我尝试添加资产或风格的angular.json ...或者它不会做什么我想它做导致的错误,它无法找到资产时NG服务.

我对Angular图书馆要求太高了吗？或者是一个充满了它的库components,它们CSS不是我可以plug进入任何其他Angular应用程序的原子单元？

我做错了什么/误解,我们应该如何将资产"打包"到我们的图书馆,以便他们在安装软件包时一起旅行.

感谢您提前澄清.

我试图以与在角度应用程序中相同的方式添加全局样式，但它完全不起作用。

我的库的名称是example-lib，所以我添加styles.css到/projects/example-lib/。我在主angular.json文件中添加了样式：

...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE 
        ],
      },
...

但是当我尝试使用命令构建库时：

ng build example-lib

我收到错误消息：

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

我想这是在单独的库中添加全局样式的另一种方法。有人可以帮助我吗？

我正在构建一个包含自定义图标字体的库。但是，当我使用 构建我的库时ng build <library-name> --prod，资产文件夹不包含在构建中，这意味着使用生产构建时不会显示图标。

我尝试了多种解决方案，例如添加assets数组angular.json并将资产文件夹复制到创建的 dist 文件夹。

我使用的是 Angular 8，该库是使用 angular-cli 创建的。

我尝试以两种方式包含字体：@import url( '../assets/icon_font.css' );在样式文件之一中使用并../assets/icon_font.css在需要它的组件之一中添加到 styleUrls。（icon_font.css是包含图标字体的 css 文件）

这是我的库目录的布局：

- src
  - lib
    - assets
      - icon_font.css
      - font files
    - component that requires icons
      - style sheet that has @import icon_font.css
    - other components and classes

我希望assets/目录中的 .ttf 和其他字体文件在导出的dist文件夹中可用。

我目前正在开发一个使用独立组件的 Angular 应用程序（版本 16.1.3）。该应用程序还依赖于使用 NgModules 的 Angular 库。我正在尝试将此库中的组件导入到我的应用程序中，其中该库还包含一个从应用程序中检索环境数据的函数。

这是ui-lib.module.ts图书馆的

export class UiLibModule {
    public static forRoot(environment: any): ModuleWithProviders<UiLibModule> {
        return {
            ngModule: UiLibModule,
            providers: [
                {
                    provide: 'environment',
                    useValue: environment,
                },
            ],
        };
    }
}

在我的主应用程序中，我将库导入到我的main.ts文件中，如下所示：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});

但是，当我尝试使用库中的组件时遇到问题：

• 如果我在主应用程序内但在 之外使用库组件<router-outlet></router-outlet>，则一切都会按预期工作。
• 如果我在 中路由的组件中使用我的库中的相同组件<router-outlet></router-outlet>，我就会遇到问题。组件显示正确，但离开页面时，路由器无法从页面中删除该组件。此外，控制台中不会显示任何错误。

以下是我在独立组件中导入 UiLibModule 的方法：

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]

.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作，而使用的库则遇到了上述问题。

我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说，我很好奇是否有一种方法可以通过独立组件直接添加环境。

此外，我不确定是否需要在独立组件中再次声明环境，因为它已经在 …

在构建Angular Library应用程序时，有没有一种自动的方法可以projects/my-library在使用npm version命令时使根级别的package.json和库应用程序的package.json 文件版本（例如）保持同步？

当我使用该命令时，它仅增加根级别package.json，是否有特殊命令或将版本号向下传播到库package.json文件的任何其他方法？

我已经看到了一些解决方案，例如在ng build读取根级别的package.json版本号并将其写入库之后运行脚本，但是我不确定这是最好的方法。

在Angular中构建库时，还有其他人遇到过这种情况吗？如果是的话，您如何处理呢？

谢谢

我创建了Angular Library(ngx-wig),我希望能够通过使用插件来扩展其功能.

什么是在Angular中声明插件的最佳位置？(可能是这样的myLibModule.forRoot(..))和插件本身应该是什么类型的实例？

我通过使用主模块的configProvider为每个插件添加模块,为AngularJs 解决了同样的问题.不太喜欢这个解决方案,因为插件会自行注册,但它应该是使用库的应用程序的责任.

UPDATE:相关的问题被打开GitHub上这里.

我已经向 npm 发布了一个 Angular 10 库，它在启用了 Ivy 的本地 Angular 10 项目中运行良好，但是如果我尝试在 StackBlitz 上使用它，我必须禁用 Ivy。

https://stackblitz.com/edit/angular-ivy-tapxx5?file=tsconfig.json

但与常春藤残疾人一起工作

https://stackblitz.com/edit/angular-ivy-vbpzem?file=tsconfig.json

不知道为什么我必须为 StackBlitz 关闭 Ivy，但我可以在本地 CLI Ivy 项目中很好地使用它。

现在我正在构建 Angular 库来定义可重用组件。我制作了一个名为 main-layout 的组件。我需要在组件中使用 ngx-perfect-scrollbar 。我知道如何在 Angular 项目中添加依赖项。

ng add [package name]

或者

npm install [package name]

但我看到一篇文章说对等依赖项是手动添加的。所以我在我正在开发的库的package.json上的peerDependency中添加了ngx-perfect-scrollbar。

之后，我尝试在项目的根目录中安装 npm 包。

npm install

然后我注意到 ngx-perfect-scrollbar 包没有安装在 node_modules 中。

以下是我的角度库项目的完整结构。