Для компиляции этого компонента потребуется создать один или несколько циклов импорта, что не поддерживается текущей конфигурацией компилятора.

Question

У меня есть старая библиотека angular, и когда я перехожу на angular 12 и попробуйте создать свою библиотеку, я получаю следующую ошибку:

        projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts:7:1
      7 @Component({
        ~~~~~~~~~~~~
      8   selector: 'app-alerts',
        ~~~~~~~~~~~~~~~~~~~~~~~~~
    ... 
     39 
        
     40 }
        ~
    The component 'AlertsComponent' is used in the template but importing it would create a cycle: projects/namespace/lin-folder//src/lib/components/header/header.component.ts -> projects/namespace/lin-folder/src/lib/components/alerts/alerts.component.ts -> projects/namespace/lin-folder//src/lib/website.module.ts -> projects/namespace/lin-folder/src/lib/components/header/header.component.ts

Кто-нибудь сталкивался с такой же ошибкой?

Answer 1

Проблема заключалась в том, что в моем Library основной moduleи один из моих компонентов импортировал это. Поэтому мне нужно переместить interface в новый файл и поделитесь им как в файле модулей, так и в файле компонента.

Ниже приведен код модуля, который используется в компоненте.

      export interface WebsiteEnvironment {. // as this in the module file and imported in one of the component, it created the problem
  restUrl?: string;
  alertDelayInSeconds?: number;
  loginUrl: string;
  allowTokenToAllDomain?: string;
}

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
    ...
  ],
  entryComponents: [
    ...
  ]
})
export class WebsiteModule {
  public static forRoot(websiteEnvironment: WebsiteEnvironment): ModuleWithProviders<WebsiteModule> {
    return {
      ngModule: WebsiteModule,
      providers: [
        ...
      ]
    };
  }

  constructor(@Optional() @SkipSelf() parentModule: WebsiteModule) {
    if (parentModule) {
      throw new Error(
        ...
    }
  }
}

Просто удалил интерфейс. создайте новый файл и добавьте этот интерфейс. совместное использование импорта интерфейса как в модуле, так и в компоненте удалит циклическую зависимость

Answer 2

У меня только что возникла проблема с простым компонентом и директивой внутри библиотеки. Директива внедряет компонент, и компонент использует эту директиву в шаблоне. Таким образом, вводится цикл импорта машинописного текста.

resizable.comComponent.ts

      import { Component } from '@angular/core';

@Component({
  selector: 'lib-resizable',
  template: `<div [resizableGlyph]="['top', 'start']"></div>`
})
export class ResizableComponent {}

изменяемый размер-glyph.directive.ts

      import { Directive, Input } from '@angular/core';
import { ResizableComponent } from '../resizable/resizable.component';
export type Position = 'top' | 'end' | 'bottom' | 'start';

@Directive({ selector: '[resizableGlyph]' })
export class ResizableGlyphDirective {
  constructor(private resizable: ResizableComponent) { }

  @Input('resizableGlyph') positions: Position[] = [];
}

• Вот ошибка , но, к сожалению, в документации показан только сценарий.
• Вот информация о том, как это решить

Чтобы решить эту проблему, мне пришлось использоватьimport type

resizable.comComponent.ts

      import { Component } from '@angular/core';

@Component({
  selector: 'lib-resizable',
  template: `<div [resizableGlyph]="['top', 'start']"></div>`,
  providers: [
    { provide: 'RESIZABLE', useExisting: ResizableComponent }
  ]
})
export class ResizableComponent {}

изменяемый размер-glyph.directive.ts

      import { Directive, Inject, Input } from '@angular/core';
// Below solves the import cycle
import type { ResizableComponent } from '../resizable/resizable.component';
export type Position = 'top' | 'end' | 'bottom' | 'start';

@Directive({ selector: '[resizableGlyph]' })
export class ResizableGlyphDirective {
  constructor(@Inject('RESIZABLE') private resizable: ResizableComponent) { }
  @Input('resizableGlyph') positions: Position[] = [];
}

Ссылка на фиксацию

Теперь у вас возникнут проблемы с запуском модульных тестов jest. Чтобы решить эту проблему, вам нужно сделать следующее

Answer 3

Обновление 2022

Мы столкнулись с этой проблемой, потому что у нас был оператор импорта, который выглядел как

      import { myUtilFunc } from "../../"

Это было добавлено vscode автоматически при автоматическом импорте и работало нормально во времяng serveа такжеng serve --prod.

Нам пришлось изменить оператор импорта на

      import { myUtilFunc } from "../../utils"

и сборка разрешилась после нее

Answer 4

Я получил ту же ошибку, когда собирал библиотеку.

Чтобы исправить это, я изменил в tsconfig.lib.prod.jsonвариант enableIvyбыть правдой