标签: ng-packagr

我使用postcss、postcss-css-modules和posthtml-css-modules在 Angular 应用程序中实现 CSS 模块。我还使用了@angular-builders/custom-webpack来实现这一点。

现在，我想对我的自定义 Angular 库做同样的事情。但是，我不能使用@angular-builders/custom-webpack，因为 Angular 库是使用ng-packagr构建的。

所以，@angular-builders/custom-webpack不能使用：https : //github.com/just-jeb/angular-builders/issues/356

另一方面，ng-packagr不支持postcss：https : //github.com/ng-packagr/ng-packagr/issues/1471

我已阅读，它可以延长汇总配置（就是使用编译器NG-packagr在构建结束）在NG-packagr：

https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

但我没有找到任何文档来实现这一点。

有人知道怎么做吗？

我认为的其他解决方案，它使所有样式全局化并使用scss-bundle和 postcss编译它们，就像我在这里所做的那样：NodeJs Script that compiles scss files failed because of postcss rule for undefined variables

如果我可以使用lodash，我将能够用散列类名替换类名，就像这里建议的那样：在 JavaScript / TypeScript 文件中使用 [hash:base64:5]

但要做到这一点，我需要知道如何在ng-packagr的构建中调用lodash。

有人知道怎么做吗？

任何其他解决方案都非常受欢迎。 …

我正在尝试在我的角度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时，使用辅助入口点创建库的正确方法是什么？

我正在使用Angular CLI（v7.x）创建一个组件库，并且无法弄清楚如何获得css规则包含在ng-packagr生成的dist文件夹中所需的第三方字体资产。

由于ng-packagr根据此问题不支持scss捆绑，因此我在后期构建任务中使用scss-bundle为我执行捆绑，并将最终捆绑的scss文件放入我的dist文件夹中。

但是，某些css规则（例如字体声明）包括对相对字体文件夹的url引用，而我还没有将其包含在dist文件夹中。

因此，例如，在我的角度库应用程序中，我有styles.scss文件，其中包含一个导入图标样式表的条目：

@import "~primeicons/primeicons.css";

但是在我的node_modules文件夹中有一个相对的字体文件夹，这些质素位于这些文件夹中，用于CSS。

一种方法是，我可以写一个进一步的后期构建步骤，将它们捆绑在一起，并将它们放到dist文件夹中我串联的scss文件旁边的fonts文件夹中，以便可以解决它们。

我想知道是否有更聪明的方法，或者在构建库来执行此操作时是否使用ng-packager或angular-cli构建的方法？

更新资料

因此，我尝试了fonts在库项目根目录（实际上是在资产文件夹下）中拥有一个文件夹的方法，并在dist构建库后将其复制到文件夹的根目录中。

在我的运动场应用程序中，我尝试在实际的lib中使用打包的样式，我有以下内容：

my-lib-playground / src / styles.scss

@import "../../../dist/my-lib/styles";

但是，当尝试使用CLI构建我的游乐场应用程序时，我得到：

ERROR in ./src/styles.scss (/Users/someone/Documents/Github/my-lib-playground/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!/Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src??embedded!/Users/someone/Documents/Github/my-lib-playground/node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from /Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/someone/Documents/Github/my-lib-playground/dist/my-lib-playground/styles.scss:609:56: Can't resolve './fonts/open-sans-v15-latin-700.eot' in '/Users/someone/Documents/Github/my-lib-playground/projects/my-lib-playground/src'

所以我的实际问题是：

在使用cli进行构建时，如何使正在使用的“游乐场”应用程序正确地包含\解析字体文件？相对于我当前的Playground应用，显然这些问题正在设法解决。什么是正确的解决方案？还是我做错了什么？

其它的办法

制作primeng一个peerDependency我的库，让开发人员负责添加primeng到他们的应用中，并angular.json根据以下丹尼尔建议的答案将相关样式包括在内。这是正确的方法，只有方法吗？

我正在将 angular 应用程序转换为 angular lib。我生成了 angular lib 项目并慢慢移动了模块。我现在在构建库时收到以下错误。

ng构建库

错误

Cannot read property 'module' of undefined
TypeError: Cannot read property 'module' of undefined
    at MetadataBundler.convertSymbol (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:312:61)
    at createReference (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:438:27)
    at MetadataBundler.convertReference (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:486:28)
    at MetadataBundler.convertExpression (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:415:37)
    at C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:364:79
    at Array.map (<anonymous>)
    at MetadataBundler.convertMember (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:364:47)
    at C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:349:70
    at Array.map (<anonymous>)
    at MetadataBundler.convertMembers (C:\Code\abc\client\node_modules\@angular\compiler-cli\src\metadata\bundler.js:349:38)

通常，当尝试在模块中错误地注册依赖项时会导致此错误。我如何才能找到我的配置的哪一部分导致此异常？

它在 angular 应用程序中运行良好。

我有一个自定义角度库，我想使用postcss自定义该库的构建。

就像 Angular 库是使用ng-packagr构建的一样，我需要扩展rollup.config.jsng -packagr来自定义我的库的构建。

事实上，我想通过rollup使用postcss，就像这里使用的那样： https: //www.learnwithjason.dev/blog/learn-rollup-css/

我在ng-packagr的文档中看到可以扩展汇总配置： https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

但是，我没有找到任何有关如何执行此操作的文档或示例。

有人知道该怎么做吗？

有人能给我举个例子吗？

提前致谢。

将我的项目更新到最新版本的Angular(6.0.4)后,我想最终将我的代码分成不同的库.

设置如下:

1. CMS - 应用程序
2. 客户 - 应用程序
3. 核心 - 两个应用程序共享成员的库

我创建了3个空项目,并开始将所有组件和服务移动到正确的文件夹中.在最终完成所有这些编辑并删除TS错误后,我的构建仍然失败.好像我的CMS应用程序找不到我库中定义的任何模块,组件或服务.我的库正在构建,似乎包含所有这些元素.

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '**\Webdictaat.Client\dist\core\core' in '**\Webdictaat.Client\projects\cms\src\app'

我的库包含一个public_api.ts,看起来它正常工作但生成的core.ts文件不包含所有导出的成员.例如,wd-core.module位于public_api.d.ts的第二行

真正的问题:我的图书馆出了什么问题,并非所有成员都出口了？

//dist/core/public_api.d.ts
export * from './lib/avatar/avatar.component';
    export * from './lib/wd-core.module'; 
export * from './lib/modal-component/modal-component.component';
export * from './lib/game-elements/game-elements.module';
export * from './lib/core/html-outlet.directive';
export * from './lib/services';
export * from './lib/models';

//dist/core/core.d.ts
//No wd-core.module :(
/**
 * Generated bundle index. Do not edit.
 */
export * from './public_api';
export { BaseModalService as …

我有一个 Angular CLI 库，其中每个组件只能通过它们各自的入口点（如 Angular Material）导入：

import {Foo} from '@myLib/foo
import {Bar} from '@myLib/bar

所以我不想要 ng-packagr 配置中的主要入口点。

我已经定义了所有次要入口点，我想删除主要入口点，因此用户不能只是“从 '@myLib ”导入 {Bar}，但是 ng-package.json 需要一个 entryFile，当我离开 entryFile 时空我收到一个错误

错误：内部错误：无法获取入口点的符号

我必须在 entryFile 中添加至少一个有效的导出。

Angular Material 团队似乎已经做到了这一点 - https://github.com/angular/components/blob/master/src/material/index.ts

关于如何做到这一点的任何想法？

我尝试将一些资产捆绑到我发布的 angular 库中。在我的角度工作区中，我在 - 文件src夹中找到了以下资产ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/project",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "src/assets"
  ]
}

资产按原样成功复制，但如何在模板中使用资产（在本例中为图像）？例如，相关模板文件如下所示：

<div class="login">
  <img src="assets/image.png">
  <div class="actions">
    <ot-cis-input
      [placeholder]="'Bitte Nutzername eingeben'"
      [title]="'Nutzername'"
      [value]="username"
      (changedValue)="username=$event">
    </ot-cis-input>
    <ot-cis-input
      [title]="'Passwort'"
      [type]="'password'"
      (changedValue)="password=$event"></ot-cis-input>
    <div class="login-button">
      <ot-cis-button
        [isPrimary]="true"
        [isLoading]="loadingState"
        (click)="performLogin()">Einloggen</ot-cis-button>
    </div>
  </div>
</div>

捆绑的库结构是这样的： dist/project/lib/library并且资产被放置在dist/project/src/assets/image.png

谁能帮我？

目标：

我正在尝试从我的库中包含一个路径，以便我可以使用一个@import语句在我的应用程序中包含 scss 文件，如下所示：

@import "some-scss-in-my-lib"

问题：

不幸的是，每次我尝试为我的应用程序提供服务时，我都会收到以下编译器错误：

SassError: Can't find stylesheet to import.

我已经尝试过的：

• 在 Stackoverflow 上查找搜索给我带来了这个线程，它描述了与我现在面临的相同问题。而且我已经尝试styleIncludePaths像Zainu建议的那样包含属性的路径，但是在尝试为应用程序提供服务时，我遇到了上面“问题”部分中描述的确切问题。

• 我试图在第一篇文章中设置stylePreprocessorOptions像GreatHawkeye这样的属性，并且可以@import在使用后设置 scss 文件ng build，但我不明白这是如何以及为什么会起作用，stylePreprocessorOptions但不是styleIncludePaths？

• 我还尝试在 google 上搜索，这使我找到了 Thread Unable to get styles bundled using styleIncludePaths 选项，在那里我找到了Alan Aguis的答案，但不幸的是，没有真正解释 styleIncludePaths 的真正用途。Alan Aguis说的唯一一句话是：

那是因为 styleIncludePaths 是为其他东西缩进的。

但正如所说，他没有说 styleIncludePaths 到底是什么，这让我更加困惑。

我还尝试查找有关在线程上添加样式包含路径的文档如何使用“styleIncludePaths”的 …

我有一个使用 Bootstrap 4.5 的 Angular 11 库
ng-packagr 使用 SASS 1.34，它会产生很多关于除法运算符弃用的警告，这在 Bootstrap 中被大量使用（https://sass-lang.com/documentation/break -更改/斜杠-div )

有问题的警告：

弃用警告：不推荐使用 / 进行除法，并将在 Dart Sass 2.0.0 中删除。

有一个选项：--quiet-deps可以在手动执行 sass 时使用，以隐藏这些警告。

我的问题是，在构建 Angular 库时如何以及在何处传递此选项？
它没有找到ng build命令或ng-package.json文件中的任何可能的配置