标签: ng-packagr

在Nikolas LeBlanc的这篇优秀文章的帮助下,我正在尝试创建一个Angular 4组件库:

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

问题是这个...我的库依赖于外部JavaScript文件 - 让我们调用它somefunctions.js.

在常规的Angular 4应用程序中 - 我已经能够通过引用文件中的angular-cli.json文件来完成此操作:

  "scripts": [
      "./app/js/somefunctions.js"
  ],

...然后声明变量类型any中typings.d.ts的文件.

这使得JavaScript文件可供应用程序使用,并且它可以正常工作.

但是 - 我的目标是创建一个Angular 4组件库,并将其打包/发布到npm.

当我按照创建库的说明进行操作时 - 功能模块没有打包somefunctions.js.

所以 - 如果其他人安装我的模块,他们将不会somefunctions.js,并且它显然不会工作.

所以,我想我需要知道如何告诉ng-packagr捆绑模块,使其包含somefunctions.js,以及如何设置我的模块,以便我的代码可以在其他应用程序中安装模块时引用该文件.

提前致谢!

我正在尝试使用ng-packagr创建一个角度包。

我已将以下脚本添加到我的包json中以构建该包

"scripts": {
"build:lib": "ng-packagr -p lib/package.json"},

但是，运行build命令时出现以下错误。

我正在尝试创建基于 Angular(ng 11) 库的 scss 主题，我将通过私有 npm 注册表在单独的项目中使用该库。现在我正在尝试将全局 scss 文件添加到我的库中并将其与我的库捆绑在一起。

我想要的是：

假设我将我的scss保存在projects/my-lib/src/styles/_material.scss中：

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

我希望我的捆绑包（库包）包含此 scss，以便在安装此库应用程序后可以将其导入到其全局 style.scss 文件中。

项目/my-app/src/style.scss

@import 'my-lib/_material.scss'

我做了什么：

我从角度管理库中的资产中遵循了此文档

库 package.json （为了简单起见，我现在将 scss 文件保留在 src 文件夹之外）：

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "ui-sdk",
  "version": "0.0.1",
  "ngPackage": …

我在 cli 中收到以下警告，想知道新allowedNonPeerDependencies功能有何不同。

WARNING: Option "whitelistedNonPeerDependencies" is deprecated: Use "allowedNonPeerDependencies" instead.

我不确定这个问题的真正原因是什么。我认为它是 Typescript，但它可能是 ng-packagr 或 Angular。它仅在我更新到 Angular 9 时才开始。

这是我在生产构建中收到的消息...

WARNING: Conflicting namespaces: dist/web-apps-shared/esm2015/public_api.js re-exports '?0' from both dist/web-apps-shared/esm2015/lib/api-applications/reducers.js and dist/web-apps-shared/esm2015/lib/account-codes/reducers.js (will be ignored)

这是导致这种情况的来源之一......

export const selectTotalAccountCodes = createSelector(selectSharedAccountCodeState,
  (state: SharedAccountCodeState) => state.totalItems);

编译器出于某种原因接受函数参数并将其分配给 aconst然后像这样导出它......

const ?0 = (state) => state.totalItems;
export const selectTotalAccountCodes = createSelector(selectSharedAccountCodeState, ?0);
export { ?0 };

我的问题是，为什么?0需要导出？它仅在此文件内部使用。我错过了什么吗？应该担心这个吗？在使用使用此代码构建的库时，它似乎不会引起问题。

我有一个使用ngrx / store的Angular 5项目。该项目由一个应用程序和该应用程序使用的共享库组成。直到今天，我们一直在为两个项目一起编译TypeScript-仅使用TypeScript代码来“发布”该库。

今天，我使用了该库，ng-packagr并使用将该库引入了应用程序yarn link，以便可以运行本地代码。但是，当我尝试启动我的应用程序时，在浏览器中出现此错误：

Unhandled Promise rejection: StaticInjectorError(AppModule)[Store -> StateObservable]: StaticInjectorError(Platform: core)[Store -> StateObservable]: NullInjectorError: No provider for StateObservable! ; Zone: <root> ; Task: Promise.then ; Value: Error: StaticInjectorError(AppModule)[Store -> StateObservable]: StaticInjectorError(Platform: core)[Store -> StateObservable]: NullInjectorError: No provider for StateObservable! at _NullInjector.get (core.js:1002) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.get (core.js:1110) at resolveToken (core.js:1300) at tryResolveToken (core.js:1242) at StaticInjector.get (core.js:1110) at resolveNgModuleDep (core.js:10854) at _createClass (core.js:10895) at _createProviderInstance$1 (core.js:10865)

我不知道这是错误的来源。我唯一的提示是它提到了AppModule。在我的中AppModule …

我使用angular cli 创建了一个组件库ng generate library，并*ngIf在模块内部使用了一个组件。

在我的主项目中成功构建并安装了库之后，尝试使用该组件时No provider for ViewContainerRef出现错误。

版本：

@ angular / cli版本：“〜7.0.6”，

@ angular / *版本：“〜7.0.0”

错误：

错误错误：StaticInjectorError（AppModule）[NgIf-> ViewContainerRef]：StaticInjectorError（平台：核心）[NgIf-> ViewContainerRef]：NullInjectorError：ViewContainerRef没有提供者！

零件：

import {Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'al-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {

  @Input() header: string;
  @Input() text: string;

  constructor() { }

  ngOnInit() {
  }

}

模板：

<div *ngIf="header">

</div>

模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; …

我在将JSON文件导入到Angular 7库中的环境文件时遇到问题。我的environment.ts文件如下所示：

import firebase from './firebase.json';

export const environment = {
  production: false,
  firebase,
};

和firebase.json：

{
  "apiKey": "",
  "authDomain": "",
  "databaseURL": "",
  "projectId": "",
  "storageBucket": "",
  "messagingSenderId": ""
}

但是不幸的是，当ng build它运行失败时：

> sdk@0.0.0 build <path-to-project>/sdk
> ng build sdk

Building Angular Package
Building entry point 'sdk'
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Unexpected token / in JSON at position 0
SyntaxError: Unexpected token / in JSON at position 0 …

我的 Angular monorepo 项目中有几个应用程序。我还编写了大约 5 个库以在应用程序中使用。

我想知道的是如何更好地构建/架构这些库。

ins如下：

1. 库仅供内部使用（意味着不能在其他应用程序中发布或使用，只能在projects文件夹中使用）
2. 库具有不同的依赖项，例如lodash和RxJs
3. 一个库可以在其内部导入另一个库

到目前为止我所做的：

1. 指定的umdModuleIds每个库的ng-package.json。
2. peerDependencies在外部库上指定，例如lodash和RxJs
3. 设置我的应用程序构建，其中包含通过“&&”组合的prebuild大约 5 个命令ng build lib-name
4. 我以下一种方式导入 Lodash import { cloneDeep } from 'lodash'

现在我看到我的main.js块比将一些服务/组件/功能提取到外部库之前大得多。现在main.jsprod build 的大小是 2.1 Mb，在我看来这太大了。

另外，我不确定是否值得为每个库（UMD、FESM2015、FESM5）制作 3 个不同的版本。

我从 dist 文件夹中导入库，因为它在文档中推荐的遵循下一个表单import { LibService } from 'lib'。

使用 Angular 13 以及ng-packagr当我们发布带有库的 SASS mixin 时，我们需要将该库添加到导出中package.json，并assets在ng-package.json.

这些是说明。

https://github.com/ng-packagr/ng-packagr/blob/main/docs/copy-assets.md

本期也对此进行了解释：\n SCSS @use 语句中的波浪号 ~ 自 Angular 13 起不再解析为 node_modules

所以我已经为这个项目做到了这一点：\n https://github.com/fireflysemantics/big-packaged-component-example

这是ng-package.json配置：

{\n  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",\n  "dest": "../../dist/big",\n  "assets": [\n    "./src/CHANGELOG.md",\n    "./src/lib/**/*.theme.scss"\n  ],\n  "lib": {\n    "entryFile": "src/public-api.ts"\n  }\n}\n

这是package.json配置：

\n   \n{\n  "name": "@fireflysemantics/big-packaged-component-example",\n  "version": "0.0.7",\n  "exports": {\n    ".": {\n      "sass": "./src/lib/big.component.theme.scss"\n    }\n  },\n  "peerDependencies": {\n    "@angular/common": "^13.3.0",\n    "@angular/core": "^13.3.0"\n  },\n  "dependencies": …

我正在创建一个非常大的 Angular 库。因为我有很多类和组件，所以我将它们结构化为层次结构。例如，我有：

• 地图
  • 面板
    • 工具栏
    • 主面板
    • ETC。
  • 层数
    • 必应层
    • WMS层
    • WMTS层
  • 几何形状
    • 观点
    • 线
    • 多边形等

在 中public_api.ts，我有许多导出，每个component/module/service我想在库上公开的导出都有一个，但这会扁平化我的层次结构。

我发现维护层次结构的唯一方法是为层次结构树上的每个组创建一个库。例如，面板库（Panels-lib）、图层库（Layers-lib）等，然后复制文件系统上的层次结构，将每个库放在单独的文件夹中：面板文件夹、图层文件夹ETC。

这样，在主应用程序中我可以通过这种方式导入组件：

import {ToolBar} from "MyMap/Panels/Panels-lib";
import {Line} from "MyMap/Geometries/Geometries-lib";

有更好的方法来实现这一目标吗？先感谢您。

大家好，2022 年新年快乐！我目前正在研究我的角度库，尽管有文档和我花费时间寻找解决方案，但我似乎无法解决两个问题。这就是我想要实现的目标：

1. 我想在我的角度库中设置一个主要入口点，以便链接更清晰
2. 我想使用ng-packagr中的styleIncludePaths来缩短我的 SCSS 导入

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

"name": "@ngx-chrono-ui-kit/core",
...
"exports": {
    ".": {
      "sass": "./lib/scss/_index.scss"
    }
  }

@import '~@ngx-chrono-ui-kit/core/lib/scss';

@import '~@ngx-chrono-ui-kit/core';

@use '../../scss/abstracts/variables' as variables;
@use '../../scss/abstracts/colors' as colors;
@use '../../scss/abstracts/typography' as typography;
@use '../../scss/abstracts/mixins' as mixins;
@use '../../scss/abstracts/functions' as functions;