标签: angular-library

编译 Angular 库时，我收到有关子库的 rootDir 的错误

library/services/src/public-api.ts:31:15 - error TS6059: File 'C:/libname/library/services/src/orders/orders.service.ts' is not under 'rootDir' 'C:/libname\library\classes\src'. 'rootDir' is expected to contain all source files.

我逐渐认识到，在 Angular 库内部的各个辅助条目之间使用相对导入并不是一个好的做法。所以我将我的代码划分为 TSConfig 中的辅助条目 + 设置路径

代码结构

library
  services
    src
      public-api.ts
    package.json
  models
    src
      public-api.ts
    package.json
  src
    public-api.ts
  package.json

TS配置

{
  "rootDir": "./library/",
  "paths": {
    "@core/services": [ "library/services/src/public-api.ts" ]
  }
}

角度.json

{
  "projects": {
    "lib": {
      "root": "library",
      "sourceRoot": "library"
    }
  }
}

所以问题是 - 如何修复各个辅助入口点或文件结构之间的导入并使项目编译正常？我知道辅助入口点的编译是单独的，并且“被视为一个单独的项目”，因此出现错误。因此，我是否应该添加单独的辅助入口点作为对等依赖项？

当然还有更多路径和辅助端点 - 但这与问题无关，这足以显示我的文件结构和设置

我正在尝试创建基于 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": …

我有一个 7.1 版本的 Angular 项目。我还创建了 2 个在我的项目中使用的角度库。我正在将我的项目从 7.1 升级到 8.2。我运行以下命令进行升级，升级了我的角度项目。

ng update @angular/cli@8 @angular/core@8

但它并没有升级我的图书馆项目。如何升级我的图书馆项目中的角度版本？我可以手动更新库项目中 package.json 中的包版本，但随后我需要手动执行所有更改（例如，为 viewChild 添加静态）。

期待一些专家的建议。

我在这里提出一个问题。
\n我有一个ParentComponent它有一个 child ChildComponent，\nchildParentComponent里面有它，所以这里有一个循环。
\n这是我面临的错误：

\xe2\x9c\x96 Compiling with Angular sources in Ivy partial compilation mode.\nERROR: projects/api/src/lib/api.component.ts:3:1\nerror NG3003: One or more import cycles would need to be created to \ncompile this component, which is not supported by the current compiler\nconfiguration.\n\nThe component \'ParentComponent\' is used in the template but importing\nit would create a cycle:\n /lib/child/child.component.ts -> /lib/parent/parent.component.ts -> /lib/child/child.component.ts\n

此错误仅发生在 Angular 库中。正如您所看到的， stackblitz示例中没有问题，它只是一个演示。

"compilationMode": "full"这个错误会随着库文件中的设置而消失tsconfig.lib.prod.json，但在这种情况下，我们会失去向后兼容性！\n

官方文档说：

我创建了一个新的 Angular 13 库，但遇到了问题。于是尝试调试一下。我按照现有角度库问题中提到的更新角度 json 的步骤进行操作，例如

{
  "projects": {
    "your-app": {
      "architect": {
        "serve": {
          "options": {
            "vendorSourceMap": true

但我仍然无法使用 Firefox 开发工具来调试该库。

我创建了一个简单的角度独立组件，它使用注入令牌进行配置：

export const PERSON_DEFAULT_OPTIONS = new InjectionToken<IPersonDefaults>('...')

export interface IPersonDefaults { ... }

export const providePersonDefaultOptions = (options: IPersonDefaults): Provider => ({
    provide: PERSON_DEFAULT_OPTIONS,
    useValue: options
})

@Component({...})
export class StandaloneComponent {
   readonly #config = inject(PERSON_DEFAULT_OPTIONS, {optional: true})
}

然后，在我的 main.ts 中，我只需调用providePersonDefaultOptions()我的价值观，一切都会很好。

现在我已经将该令牌/接口/组件放入 npm 库中。当我尝试再次运行该应用程序时，出现以下错误：

错误：NG0203：inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项或使用的函数EnvironmentInjector#runInContext

我不明白为什么该代码不能作为 npm 库工作，因为它仍然是一个正在设置的字段初始值设定项。

在最新版本的 Angular cli 中，我们可以使用ng g library lib-name命令来创建库。如 Angular文档中所述：

ng serve <project>

和：

<project>   The name of the project to build. Can be an app or a library.

所以，我们可以为library提供服务。但是当我服务时，我收到以下错误：

Project 'ngx-tab-component' does not support the 'serve' target.
Error: Project 'ngx-tab-component' does not support the 'serve' target.
at ServeCommand.initialize (C:\Users\vahidnajafi\angular\ngx-tab-app\node_modules\@angular\cli\models\architect-command.js:53:19)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3

构建angular库项目时出现以下错误。

Building Angular Package
Building entry point '@abc/lib'
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Could not resolve entry (C:\Dev\abc\build\dist-npm\esm2015\abc-lib.js)
Error: Could not resolve entry (C:\Dev\abc\build\dist-npm\esm2015\abc-lib.js)
    at error (C:\Dev\abc\node_modules\rollup\dist\rollup.js:3460:30)
    at C:\Dev\AppBuilder\node_modules\rollup\dist\rollup.js:21474:17

Could not resolve entry (C:\Dev\abc\build\dist-npm\esm2015\abc-lib.js)
Error: Could not resolve entry (C:\Dev\abc\build\dist-npm\esm2015\abc-lib.js)
    at error (C:\Dev\abc\node_modules\rollup\dist\rollup.js:3460:30)
    at C:\Dev\AppBuilder\node_modules\rollup\dist\rollup.js:21474:17

当我module在public_api.ts文件中添加新内容时，我只会收到此错误

export * from './lib/designer.service';
export * from './lib/designer.component';
export * from './lib/designer.module';
export * from './lib/core/app-core.module'; // new module

我正在使用以下命令来构建模块

ng建立库

知道为什么我会收到此错误吗？

我正在尝试将此库https://github.com/flauc/angular2-notifications从 Angular 2+迁移到 Angular 9。

最初的错误是关于ModuleWithProviders已经成为泛型类型的，所以我修复了它。我也在这里描述了一个错误https://github.com/angular/angular/issues/32352我修复了它require('@angular/compiler-cli');，现在我面临另一个错误：

../node_modules/@angular/common/common.d.ts:115:22 - 错误 NG6002：出现在 SimpleNotificationsModule 的 NgModule.imports 中，但无法解析为 NgModule 类

我很难理解发生了什么，因为我以前从未构建过库，并且使用 gulp 构建似乎有点 hacky，因为这一行ngc = require('@angular/compiler-cli/src/main').main引用了一个不属于公共 API 的函数。

编辑：

按照评论中的想法（以及我自己的感觉），我尝试在没有吞咽的情况下进行构建：

• 创建了一个angular.json文件
• 分离index.ts成public_api.ts和simple-notifications.module.ts
• 对文件和文件夹结构做了一些更改

但我仍然有同样的确切错误......

我的尝试：https : //github.com/youkouleley/angular2-notifications 我尝试用 构建它ng build，其中的脚本package.json尚未更新

这是我的 ng 库模块代码

   @NgModule({
      imports: [NgIdleModule.forRoot()],
      providers: [ {
        provide: APP_INITIALIZER,
        useFactory: (idleStateChangeHandlerService: IdleStateChangeHandlerService) =>  () => console.log(IdleStateChangeHandlerService),
        multi: true,
        deps: [IdleStateChangeHandlerService]
      }]
    })
    export class IdleActivityModule {
      static forRoot(config: IdleActivityConfig): ModuleWithProviders {
        return {
          ngModule: IdleActivityModule,
          providers: [
            {
              provide: IdleActivityConfigInjectionToken,
              useValue: config
            }
          ]
        };
      }
    }

构建时：

> Compiling TypeScript sources through ngc ERROR:
> C:/_dev/seemis-workspace/projects/shared-modules/src/lib/idle-activity/idle-activity.module.ts:9:1:
> Error encountered in metadata generated for exported symbol
> 'IdleActivityModule':  
> C:/_dev/seemis-workspace/projects/shared-modules/src/lib/idle-activity/idle-activity.module.ts:13:17:
> Metadata collected contains an error that will …