标签: ng-packagr

我正在构建一个包含自定义图标字体的库。但是，当我使用 构建我的库时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文件夹中可用。

使用ng-packagr打包一个项目@ my / common-util时，没有问题。此类在abstract-person.ts中包含一个名为AbstractPerson的抽象类。

在另一个名为@ my / common-impl的项目中，创建了另一个Person类，该类扩展了AbstractPerson并使用@ my / common-util包名称将其导入。当我使用ng-packagr打包时，出现以下错误->

在options.globals中没有为外部模块'@ my / common / abstract-person'提供名称-猜测'abstractPerson'

似乎这是一个警告，我继续npm将@ my / common和@ my / common-impl都安装到另一个项目中，但是当我从@ my / common-impl导入Person类时遇到以下错误

./node_modules/@my/common-impl/esm5/common-impl.js中的错误未找到模块：错误：无法解析“ C：\ Data \ me \”中的“ @ my / common / abst ract-person” node_modules \ @my \ common-impl \ e sm5'在'C：\ Data \ me \ node_modules \ @my \ common-impl \ esm5'中解析'@ my / common / abstract-person'解析的请求是使用描述的模块文件：C：\ Data \ me \ node_modules \ @my \ co mmon-impl \ package.json（相对路径：./esm5）使用描述文件后，字段“浏览器”不包含有效的别名配置：C：\ Data \ me \ …

如您所知，“ ng g库”方法可帮助我们创建可重用组件的库。但是，如果我希望通过Angular Elements的支持将那些组件编译为Web组件呢？不仅如此，库中的每个组件都将被编译到其自己的文件夹或JS文件中。如何配置一个开发环境以实现这一目标？

例如：

如果创建一个Lib并添加一个自定义组件，我知道我可以对其进行编译，生成一系列文件夹，例如esm5，esm2015，fesm5等。现在，问题是：如何添加，比如说30个自定义组件到我的库中，然后在编译时，它将为每个组件创建一个文件夹，其中包含它们的Web组件版本...仿佛Angular Elements遍历了我的组件库并生成了每个组件的Web组件版本。

像这样：

lib/
lib/custom/comp1
lib/custom/comp2
lib/custom/comp3
lib/custom/comp4

变成类似以下内容：

Dist/
Dist/custom/
Dist/custom/bundle
Dist/custom/esm5
Dist/custom/esm2015
Dist/custom/comp1_web_independend_component_version
Dist/custom/comp2_web_independend_component_version
Dist/custom/comp3_web_independend_component_version
Dist/custom/comp4_web_independend_component_version

我找到的最接近的解决方案是这样的：

https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523

我还要求Angular CLI团队提供帮助：

https://github.com/angular/angular-cli/issues/13999

在构建和打包Angular 6库时,我似乎无法指示Angular CLI将库的资源复制到dist/assets每个构建的文件夹中.

假设项目的文件夹结构是这样的 -

- dist
- e2e
- node_modules
- projects
  - lib1
    - src
      - lib
      - assets
        - icons
- src

当我运行ng build lib1或ng build lib1 --prod在assets/icons文件夹不被复制到dist/lib1/assets/icons.

如果我跑ng build那么src/assets(根SRC /资产)被复制,但没有projects/lib1/assets.

该angular.json文件包含"assets": ["src/assets"]对它的引用,但它不允许将assets密钥专门添加到项目中,只允许添加到主根应用程序.添加时,我收到以下错误:

架构验证失败,出现以下错误:数据路径""不应具有其他属性(资产).

我还尝试将以下自定义复制规则添加到资源,以将资产复制到dist/lib而不是dist/appname:

  "assets": [
     "src/favicon.ico",
     "src/assets",
     { "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
        ],

但是我收到以下错误:

无法将资产写入输出路径之外的位置.

是否有在每个构建中管理库资产副本的内置方法？

更新06/05/2018

我向Angular CLI提出了一个问题,但尚未收到回复.问题#11701

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

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

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

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

谢谢

任何人都可以提示在哪里开始使用ng-packagr将图像和css文件包含到Angular库中？

我有一个纯 javascript 库，用户可以通过 npm 安装。我想向这个库添加/创建一个 Angular“包装器”，以便它可以在 Angular 项目中无缝使用，但我不知道如何做到这一点。我正在使用 Angular-cli v6。

这与如何为现有 Javascript 库创建 Angular 库包装器非常相似？，但是唯一的响应是指向 ng-packagr 的链接。我已经完成了一些关于使用 ng-packagr 创建库的教程，但是它们没有描述（并且我在其他地方找不到示例）如何围绕非 Angular JS 库创建包装器。

任何帮助是极大的赞赏！:)

我正在使用Angular 6.1.0构建一个库

• ng new lib-demo
• ng generate library my-lib

所有文章建议使用如下--prod标志运行库的构建:

ng build my-lib --prod

但是,这会引发错误

Configuration 'production' could not be found in project 'my-lib'.

这可能是正确的,因为当我查看angular.jsonproduction build configuration时,库项目中没有a的定义.它仅适用于应用程序项目.

以下是我在使用的库项目的构建配置下所拥有的内容 ng-packagr

"build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/my-lib/tsconfig.lib.json",
        "project": "projects/my-lib/ng-package.json"
      }
    }

所以这里的问题是,--prod不再需要标志,只是运行ng build m-lib会生成prod构建？

看看dist文件夹的内容看起来如此,但我不是百分百肯定.如果有人可以验证这一点,那就太好了.

Angular的i18n很棒,像ng-packagr这样的工具使组件库包装变得非常简单,但是它们可以组合在一起吗？

如果我想打包和分发具有可翻译组件的组件库,该怎么办？可能吗？我如何打包这样的库？翻译文件是否与包一起发货,还是应该在主应用中定义？

如果有人能指出我的某些文件,那就太棒了.谢谢

我正在写一个Angular 6图书馆,无法弄清楚如何进入打字稿.

我用以下方法生成了应用: ng new mylibapp

然后我使用以下方法添加了库: ng g library @abc/cool-lib -p abc

当我表演时: ng build @abc/cool-lib

它会在mylibapp/dist/abc/cool-lib文件夹中生成代码

我现在如何调试此代码并在位于的ts文件中设置断点 mylibapp/projects/abc/cool-lib/src/lib