标签: angular-library

我想编写自己的库并在其他项目中重用它,所以我创建了一个新的应用程序并在那里生成了一个库:

ng new lib-collection
cd lib-collection
ng g library first-lib --prefix va

如何将Angular Material添加到我的库中？我想用这样的东西:

ng add @angular/material --project=first-lib

但是我收到了一个错误:Could not find the project main file inside of the workspace config (projects/first-lib/src).怎么了？

我正在为我公司的组件库迁移 angular 7 到 angular 8，该组件库是用“ng generate library”构建的。我试图尽可能接近标准的 angular cli 构建。我创建了一个全新的应用程序和一个带有“@angular/cli”：“~8.2.0”的库。

https://github.com/Annie-Huang/my-angular8-app/tree/create-lib

我注意到在 angular 8 中，他们将 public_api.ts 更改为 public-api.ts https://github.com/Annie-Huang/my-angular8-app/blob/create-lib/projects/ea-ui/src/public -api.ts

所以我将现有库中的入口文件从 public_api.ts 重命名为 public-api.ts 并在 ng-package.json 中更新它

我得到这个错误

Bradleys-MacBook-Pro:ea-component-library anniehuang$ ng build ea-ui
Building Angular Package
ERROR: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.

An unhandled exception occurred: error TS6053: File '/Users/anniehuang/projects/ea-component-library/projects/ea-ui/src/public_api.ts' not found.

See "/private/var/folders/sw/1rxh903n6y39kkwbgr737n8m0000gp/T/ng-SE3jbI/angular-errors.log" for further details.

当我在我自己的 repo ( ng build ea-ui)中的全新 angular 8 应用程序中构建它时。我没有这个错误。

而且我在公司组件库上进行全局搜索时没有public_api.ts字符串。

ng-package.json:
---------------------
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ea-ui",
  "lib": {
    "entryFile": …

I created an internal directive in a module in my project (Angular 8 + Material Design). Following tuto and official doc.

@Directive({
  selector: '[button-confirmation]'
})
export class ButtonConfirmationDirective {

  @Output('bc-confirm')
  confirmAction = new EventEmitter<any>();

  @Input('bc-options')
  options: Option[] = [...];

  constructor(
    private el: ElementRef,
    private confirmationService: ConfirmationService
  ) { }

  @HostListener('mouseup') onMouseUp() {
    this.confirmationService.displayConfirm(this.el, this.options, this.confirmAction);
  }

}

Ok, it's work. BUT, when i create an external library and move my directive (with components, services, ...) i got the error : …

我目前正在开发一个 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", …

I have created one angular library using angular 8 and CLI 8. I am trying to build the library, but I am getting the error.

ng build <lib-name>

I have gone through some questions posted related to this error, most of them say remove node_modules and reinstall them. I tried this solution but still, I am getting the following error.

[Browserslist] Could not parse package.json. Ignoring it.

ERROR: Unknown version 67 of android
Unknown version 67 of android
BrowserslistError: …

我正在为一些现有的（不受我控制的）身份验证库（例如keycloak-angular）构建一个包装库“auth-lib” 。我正在包装的身份验证库需要在应用程序初始化或引导期间使用配置参数进行初始化，这在我的 Wrapper 库中硬编码配置时有效，但我无法从我的包装器的示例应用程序中使用注入或 forRoot图书馆。

如何将配置参数从我的示例应用程序通过我的包装库传递到身份验证库？

根据本指南升级我的复杂项目后：

当我构建我的库时，我收到了这个错误：

Building Angular Package

------------------------------------------------------------------------------
Building entry point 'my-library'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: this.typeChecker.getTypeArguments is not a function
An unhandled exception occurred: this.typeChecker.getTypeArguments is not a function
See "XXXXXX\angular-errors.log" for further details.

我在全球范围内更新 Node.js、Typescript 和 Ancular.Cli

所有步骤都成功完成。

我应该做些什么来单独升级我的图书馆吗？

更新：

要构建我将此命令ng build my-library-name与此包一起使用ng-packagr": "^5.4.0

所有库都在一个项目中，并使用 ng update 进行项目升级

节点版本：12.14.1，打字稿版本：3.4.5

如何一次性替换或更改旧的组件前缀？

或者

如何使前缀动态化，以便每当想要更改它时都会更新所有组件前缀？

我有一个带有 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 * …

我已经使用 cli 创建了一个 Angular lib (mylib)，并使用 dist 目录中的 npm link 创建了一个符号链接。

我使用 cli 创建了一个 Angular 应用程序，并使用 npm link mylib 链接了 lib。

我能够从应用程序使用 mylib 并在应用程序中使用组件、服务等。

在 lib 上运行“ng build --watch”并在应用程序上运行“ng serve”后，如果我对 lib 中的 .ts 文件进行更改并保存，lib 将重建，然后应用程序将重建和这些更改反映在应用程序中。

但是，如果我对 lib 中的 html 或 scss 文件进行更改，它将构建，然后应用程序将重新构建，但这些更改不会反映在应用程序中。“ng serve”窗口确实显示vendor.js“chunk”发生了变化，但它也显示“警告没有发出任何文件”。紧随其后。我应该补充一点，即使模板/样式是内联的（在 ts 组件文件中），它仍然不会反映这些更改。

当我使用 chrome 开发工具并查看源代码时，vendor.js会更新为模板的最新更改以及组件的样式参数。

我可以显示更改的唯一方法是终止 ng serve 并再次运行它。

Windows 10、Angular 10、NPM 6.14.10、Node 14.15.4

提前致谢！