标签: ng-packagr

在 angularjs 中开发两个本地项目（其中一个导入另一个）时，我只需在模块 B 的文件夹中运行“npm link”，然后在主模块的文件夹中运行“npm link module-B”，每当我更改模块 BI 中的文件时会直接在我的浏览器服务模块 A 中看到它。

但是使用 angular(4) 似乎并不容易。

我使用 ng-packagr 生成一个 dist 文件夹。
我在 dist 文件夹中运行 npm link 。
我在主模块的文件夹中运行 npm link module-B 。
然后我运行 ng serve --preserve-symlinks。

到目前为止一切顺利，它可以理解模块 B 的组件。但是如果我尝试更改模块 B 中的某些内容，重新运行 ng-packagr，我的主模块的“ng serve”无法编译，我必须停止并启动 ng serve .

我认为 ng-packagr 首先删除了 dist 文件夹，这会触发 ng serve 中的重建，该重建失败并且没有注意到删除 dist 文件夹后新创建的文件。

我们是否必须使用 ng-packagr 或者是否有其他方法可以进行多项目本地开发。

更新：

如果我们在 ng-packagr.js 中注释掉这一部分，它不会删除文件夹，并且浏览器会在文件更改和 ngpackagr 运行时更新：

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

但是运行 ng-packagr 需要一些时间，具体取决于库的大小。因为它构建了整个事物，而不仅仅是被更改的文件。

我正在尝试将本地开发的Angular项目/模块导入到angular应用程序中，而不将其发布到npm存储库中。

首先，我按照本教程以UMD格式构建模块（我跳过了发布部分）：

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

然后，我尝试通过执行以下命令行在最终应用程序中安装模块：

npm install ../path-to-my-module --save

这成功添加我的模块，@myscope/myModule在package.json我的应用程序，但问题是，在应用程序模块的进口无法识别。我最终收到以下错误：

Cannot find module @myscope/myModule

在my中node_modules，@myscope创建了文件夹，并且在其中有一个../path-to-my-module名为的快捷方式myModule

问题的根源是否在于捷径？如果可以的话如何解决？

在一个有角度的cli项目中,我设法像这样嵌入了json

• 添加 typings.d.ts

declare module "*.json" {
    const value: any;
    export default value;
}

• import .json

import * as data from '../assets/data.json';

但是如果我想用ng-packagr将它编译成Angular 5模块,我会收到以下错误:

错误在.../.ng_pkg_build/my-module/ts/src/app/my-module.module.ts:28:33:找不到模块'../assets/data.json'.

有没有人遇到过这个问题并知道如何解决它？

我正在使用 ngPackagr 创建一个有角度的可重用模块。那里一切正常，但我在内部引用的图像没有出现在我安装组件的最终版本中。我尝试使用以下线程中的操作：

https://github.com/dherges/ng-packagr/issues/123

但他们似乎都没有工作。任何人都可以在这里提供一些帮助吗？

APP_INITIALIZER在库模块中定义时,构建将失败并显示Lambda not supported错误.按照文档导出函数时抛出构建错误:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { MylibComponent } from './mylib.component';

export function myLibInit() {
  return () => console.log('Hi from exported function');
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: myLibInit
    }
  ]
})
export class MylibModule { }

构建误差均投掷dev和prod.

我也尝试使用ES6对象方法简写符号来定义工厂函数:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { MylibComponent } from './mylib.component';

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory() { …

我想在使用CLI generate library命令创建的Angular库中使用Pure.css模块。

我有一个工作区应用程序，在其中运行了generate library用于创建库的命令。该库已成功创建，我可以将其链接并安装到其他项目中。但是我想使用Pure.css库中的网格系统，在工作区应用程序的angular.json文件（包含库的一个）中，我在库项目的构建配置中有样式条目。

"styles": [
   "node_modules/purecss/build/pure-min.css",
   "node_modules/purecss/build/grids-responsive-min.css"
]

在一个库的组件中，我有一个使用Pure.css规则的标记，例如

<div class="pure-g">
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
  <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

但是，当我在外部项目中使用组件时，很明显，没有应用样式。

因此，我已将Pure.css样式文件导入相应组件的.css文件中，例如

@import url("node_modules/purecss/build/pure-min.css");
@import url("node_modules/purecss/build/grids-responsive-min.css");

这可行，但我希望将Pure.css库中的样式包含在整个库中，而不是仅包含一个组件。

有没有一种方法可以做到这一点，我已经做了一些搜索但是找不到任何资源，是否可以配置ng-packagr使其在库的构建中包括样式？

我正在使用package.json文件中定义的脚本从包含工作区的项目中构建库

"build:lib": "ng-packagr -p projects/my-library-project/package.json"

以及通常如何将第三方模块安装到库项目中，是否通过工作空间项目安装它们？

感谢您的任何帮助，谢谢。

我目前正在处理一个 Angular 6 项目，其中包含使用 ng-packagr 构建和发布的多个库。这些库之一是组件库。因此，它包含多个组件，每个组件都有自己的 scss。作为使用 ng-packagr 构建此库的一部分，html 和 scss 被内联（并转换为 css），这是正常的和预期的行为。

我知道在使用 构建标准 Angular 应用程序时，@angular-devkit/build-angular:browser有一个标志extractCss将创建一个 style.css 文件，作为包含所有样式的构建应用程序的一部分。

有没有办法使用 ng-packagr 做到这一点？

ng-package.json：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/storager",
  "lib": {
    "umdModuleIds": {
      "@ngrx/effects": "effects",
      "@ng-bootstrap/ng-bootstrap": "ngBootstrap",
      "@ngrx/store": "store",
      "@ngrx/router-store": "fromNgrxRouter",
      "ngrx-store-localstorage": "ngrxStoreLocalstorage",
      "@ng-select/ng-select": "ngSelect",
    },
    "entryFile": "src/public_api.ts",
    "styleIncludePaths": ["../", "../styles/scss"]
  }
}

在 angular.json 中为我的库构建配置：

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

我目前正在开发一个 Angular 库（在Angular v 8.1.0 中）并想知道如何将它“拆分到不同的子库中”？

例如，Angular ( @angular) 以某种方式拆分为不同的“部分”，例如：

• @angular/common
• @angular/core
• @angular/forms
• 等等。

例如，@angular/common有不同的子目录可供导入：

• @angular/common/http
• @angular/common/locale
• @angular/common/testing

我想知道如何在我自己的 Angular 库中进行这种结构化，以保持不同的上下文元素彼此独立。假设我的库被调用，cool-lib并且有不同的功能模块包含它们自己的服务/组件/等：common, featureA, featureB.

我想实现这样的目标：

import { CommonService } from 'cool-lib/common';
import { FeatAComponent, FeatAService } from 'cool-lib/feature-a';
import { FeatBModule } from 'cool-lib/feature-b';

而不是：

import { 
  CommonService, 
  FeatAComponent, 
  FeatAService,
  FeatBModule
} from 'cool-lib';

甚至能够独立地改变不同功能模块的版本号，或者只安装那些将需要的模块而不必安装整个库（假设我只需要featureA）也很好。

例如，在我的package.json 上：

{
  "dependencies": {
    "cool-lib/common": "1.0.0",
    "cool-lib/feature-a": "1.0.0", …

随着 Angular 10 的发布，我将用于构建库 + 演示应用程序的 Angular 版本更新到版本 10。

一般来说，这一切进展顺利，并且该库仍然与 Angular 的早期版本兼容，但此版本似乎并非如此（针对 Angular 9 的先前版本构建与 Angular 8 运行良好）。

输出打字稿定义文件包括：

import * as \xc9\xb5ngcc0 from \'@angular/core\';\n\n...\n\nstatic \xc9\xb5fac: \xc9\xb5ngcc0.\xc9\xb5\xc9\xb5FactoryDef<QrCodeComponent, never>;\nstatic \xc9\xb5cmp: \xc9\xb5ngcc0.\xc9\xb5\xc9\xb5ComponentDefWithMeta<QrCodeComponent, "qr-code", never, { "value": "value"; "size": "size"; "errorCorrectionLevel": "errorCorrectionLevel"; }, {}, never, never>;\n

在 Angular 8 项目中使用时会导致这样的错误：

 ERROR in node_modules/ng-qrcode/lib/qr-code.component.d.ts(7,25): error TS2694: Namespace \'"/ngqrcode-ng8-test/node_modules/@angular/core/core"\' has no exported member \'\xc9\xb5\xc9\xb5FactoryDef\'.\n    node_modules/ng-qrcode/lib/qr-code.component.d.ts(8,18): error TS2314: Generic type \'\xc9\xb5\xc9\xb5ComponentDefWithMeta\' requires 6 type argument(s).\n    node_modules/ng-qrcode/lib/qr-code.directive.d.ts(13,25): error TS2694: Namespace \'"/ngqrcode-ng8-test/node_modules/@angular/core/core"\' has …

我有一个带有 store 实现的 angular 库，这个库被打包为 NPM 并用于不同的 angular 应用程序。

我正在尝试使用一个 ngrx 存储选择器，该选择器在我的不同 angular 项目的库中导出，应用程序抛出错误。

找不到模块：错误：无法解析“C:\workspace\Client\AngularApp\src\app\app.component”中的“@lib/core-lib/lib/core-store/store/account/account.selector” '

角度库实现：

import { createSelector } from '@ngrx/store';
import { ILibState } from '../../lib.state';
import { IAccountState } from './account.state';

const selectAccounts = (state: IAppState) => state.accounts;

export const selectSelectedAccount = createSelector(
  selectAccounts,
  (state: IAccountState) => state?.selectedAccount
);

从 public_api.ts 导出这个选择器

export * from './lib/core-store/store/account/account.selector'
// Also tried this
// export { selectSelectedAccount } from './lib/core-store/store/account/account.selector'
// Also tried the barrel approach
// export * …