Angular: 지연 로드된 NgModule의 항목 구성 요소는 모듈 외부에서 사용할 수 없습니다.

@jmcclanahan 감사합니다. 해당 서비스의 모양과 설정 방법에 대해 좀 더 말씀해 주시겠습니까? 비슷한 문제로 어려움을 겪고 있습니다. 하나의 지연 로드된 모듈에서 다른 지연 로드된 모듈의 구성 요소로 구성 요소를 동적으로 로드하려고 시도하고 (제 생각에는) 올바른 위치에 항목 구성 요소를 추가했지만 하지 않았다. 감사 해요

@gcorgnet - 물론입니다. 그래서 제 사용 사례는 앱의 모든 페이지에 공통 도구 모음이 있지만 도구 모음 내에서 내가 어떤 페이지에 있었는지에 따라 추가 기능을 위한 버튼과 도구를 추가하고 싶었습니다. 이를 달성하기 위해 이러한 버튼/도구 및 해당 논리를 보유하는 구성 요소를 만들었으며 이러한 구성 요소를 연결된 모듈 내부에 유지하고 싶었습니다. 따라서 본질적으로 내 모듈 외부에는 이러한 특정 도구 모음 기능에 대해 아는 것이 없지만 여전히 공통 도구 모음에 표시할 수 있습니다. 다음은 도움이 될 만한 작업 솔루션입니다.

내가 도구 모음 서비스로 하는 일은 관찰 가능 항목을 만드는 것뿐이므로 게으른 구성 요소는 receiveContext 를 수신하는 도구 모음 공통 구성 요소에 대한 componentFactoryResolver 및 injector 참조를 전달할 수 있습니다. receiveContext 이벤트.

툴바.서비스.ts

@Injectable()
export class ToolbarService {
    contextReceivedSource = new Subject<any>();
    contextReceived$ = this.contextReceivedSource.asObservable();

    receiveContext(componentFactoryResolver: ComponentFactoryResolver, injector: Injector) {
        this.contextReceivedSource.next({ resolver: componentFactoryResolver, injector: injector });
    }
}

지연 로드된 구성 요소에서 componentFactoryResolver 및 injector 를 삽입하고 도구 모음 서비스에서 이벤트를 시작하려고 할 것입니다.

지연 로드된 도구 모음 구성 요소

...
constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) {}
...
ngOnInit() {
  this.toolbarService.receiveContext(this.componentFactoryResolver, this.injector);
}
...

마지막으로, 내 핵심 도구 모음 구성 요소에서 도구 모음 서비스의 관찰 가능 항목을 구독하고 있으므로 이벤트가 발생할 때마다 필요한 게으른 구성 요소를 삽입하고 만들려고 합니다. 생성한 componentRef 를 파괴하는 것도 중요합니다. 그렇지 않으면 메모리 누수가 발생하게 됩니다.

...
@ViewChild('toolbarTarget', {read: ViewContainerRef}) toolbarTarget: ViewContainerRef;
component: Type<Component>;
refInjector: ReflectiveInjector;
resolverSub: Subscription;
refInjector: ReflectiveInjector;
componentFactoryResolver: ComponentFactoryResolver;
injector: Injector;

ngOnInit() {
  this.resolverSub = this.toolbarService.contextReceived$.subscribe(resolver => {
      this.componentFactoryResolver = resolver.resolver;
      this.injector = resolver.injector;
    });
}

updateToolbar(data: any) {
    this.clearComponent();
    this.component = data['toolbar'];
    if (this.component) {
      const childComponent = this.componentFactoryResolver.resolveComponentFactory(this.component);
      this.refInjector = ReflectiveInjector
          .resolveAndCreate([{provide: this.component, useValue: this.component}], this.injector);
      this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);
    }
  }

  clearComponent() {
    this.toolbarTarget.clear();
    if (this.componentRef) { this.componentRef.destroy(); };
  }

  ngOnDestroy() {
    this.resolverSub.unsubscribe();
    this.clearComponent();
  }

그러면 동적으로 생성된 구성 요소가 해당 #toolbarTarget 를 배치하는 곳에 배치됩니다.

<div #toolbarTarget></div>

제쳐두고, 경로에서 지연 로드된 구성 요소 참조를 가져오기 위해 공통 도구 모음 구성 요소에서 이 줄 this.component = data['toolbar']; 을 사용하고 있습니다. 이에 대한 전체 코드를 보고 싶다면 게시할 수 있지만 이 토론의 범위를 벗어납니다.

{ path: '', component: yourComponent, data: { toolbar: yourToolbarComponentToInject } }

추가 질문이 있으면 알려주세요!

@jmcclanahan 귀하의 코드에 대해 한 가지 질문(아마도 어리석은 질문)이 있습니다. "게으른 로드된 도구 모음 구성 요소"를 언급할 때 ngOnInit 섹션에 서비스 호출 코드를 넣지만 어떻게 초기화(구성 요소)를 관리합니까? HTML 코드에 추가하고 나중에 DOM에서 숨길 필요 없이? 해당 구성 요소는 상단 표시줄에서만 사용되기 때문에 다른 곳에서는 로드하지 않습니다.

@Dunos - 위의 예에서 그 부분을 완전히 생략했다는 것을 깨달았습니다. 죄송합니다! 연결된 지연 로드 모듈에 동적 구성 요소를 entryComponent 로 추가하고 싶을 것입니다.

그런 다음 도구 모음 구성 요소 자체에서 동적 구성 요소를 표시하려는 html 템플릿의 위치를 ​​참조하는 ViewContainerRef 를 정의합니다. 그런 다음 updateToolbar() 메서드가 구성 요소 생성을 처리하여 지정된 위치에 배치하고 도구 모음에 구성 요소를 표시합니다.

@ViewChild('toolbarTarget', {read: ViewContainerRef}) toolbarTarget: ViewContainerRef;
...
updateToolbar(data: any) {
    this.clearComponent();
    this.component = data['toolbar'];
    if (this.component) {
      const childComponent = this.componentFactoryResolver.resolveComponentFactory(this.component);
      this.refInjector = ReflectiveInjector
          .resolveAndCreate([{provide: this.component, useValue: this.component}], this.injector);
      this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);
    }
  }

그러면 동적으로 생성된 구성 요소가 해당 #toolbarTarget을 배치하는 곳에 배치됩니다.

<div #toolbarTarget></div>

clearComponent() 메서드는 ngOnDestroy()가 실행될 때마다 호출되어 페이지를 떠날 때 구성 요소를 숨길 수 있습니다.

clearComponent() {
    this.toolbarTarget.clear();
    if (this.componentRef) { this.componentRef.destroy(); };
  }

  ngOnDestroy() {
    this.resolverSub.unsubscribe();
    this.clearComponent();
  }

또한 위의 원래 게시물을 업데이트했습니다. 이에 대해 많은 질문을 받고 있으므로 가능한 한 빨리 이 동적 도구 모음을 사용하여 작업 예제를 추가하고 링크로 업데이트하겠습니다.

@jmcclanahan 을 얻었지만 (내 생각에는) ngOnInit가 호출되지 않기 때문에 동적 구성 요소( this.toolbarService.receiveContext 호출 부분)에서 서비스에 대한 호출이 어떻게 이루어지는지 여전히 이해하지 못합니다. t 그렇게 하는 방법을 참조하십시오). entryComponents에 추가했지만 onInit가 작동하도록 하려면 초기화해야 합니다.

@Dunos- 아마도 예가 가장 좋을 것입니다. 내 앱의 인덱스 페이지에서 페이지 A로 이동하고 있다고 가정해 보겠습니다. 페이지 A의 모듈/구성 요소를 정의하는 페이지 A에 대한 해당 경로가 있습니다. 페이지 A에는 전역 도구 모음에 표시할 별도의 구성 요소가 정의되어 있습니다. 따라서 Page A의 주요 구성 요소 내부에 ComponentFactoryResolver 및 Injector 를 삽입한 다음 receiveContext 이벤트를 발생시킵니다. 이 코드 비트:

constructor(private componentFactoryResolver: ComponentFactoryResolver, private injector: Injector) {}
...
ngOnInit() {
  this.toolbarService.receiveContext(this.componentFactoryResolver, this.injector);
}

죄송합니다. 혼란스러울 수 있다는 것을 알았습니다. 도구 모음에 표시하려는 구성 요소에 해당 코드를 넣는 것이 아니라 현재 있는 페이지와 연결된 구성 요소에 해당 코드를 넣습니다.

@jmcclanahan 아 완벽합니다, 감사합니다!!! 이제 작동합니다 :)

@jmcclanahan 이 게시물을 찾기 전에 동일한 문제를 해결했습니다. 내가 알아차린 한 가지는 함수 선언에 몇 개의 문자를 저장하려는 경우 전달한 인젝터를 사용하여 ComponentFactoryResolver에 대한 참조를 얻을 수 있다는 것입니다. 당신은 그냥 할 수 있습니다:
injector.get(ComponentFactoryResolver);

그리고 필요한 참조를 반환해야 합니다. 그러나 결국 함수의 매개변수로 ComponentFactoryResolver를 전달하는 것과 동일한 결과를 제공합니다.

이것은 내 문제도 해결합니다.

요약하자면, 당신이 알아야 할 것은 당신이 lazy 모듈에서 선언된 컴포넌트를 동적으로 생성하기를 원할 때 당신은 실제로 그 lazy 모듈에서 선언된 컴포넌트로부터 ComponentFactoryResolver를 사용해야 한다는 것입니다. 루트 인젝터(루트 ComponentFactoryResolver 포함)는 로드된 lazyModule에서 선언된 entryComponents에 대해 알지 못합니다.

좀 이상해 보이지만 이것이 Angular가 설계된 방식(이해가 됨)이지만 실제로 imho 프레임워크로 작업할 때 추가 복잡성을 생성합니다.

Angular 팀이 이것을 활용하는 방법: 경로가 활성화될 때마다 루트 인젝터는 해당 lazyModule에 나열된 entryComponents를 자동으로 추가해야 하며 경로가 변경될 때마다 이전에 추가된 entryComponents가 자동으로 소멸되어야 합니다. 이렇게 하면 복잡성이 줄어들고 오버플로가 방지됩니다. 추가 구성 요소 팩토리가 있는 루트 인젝터.

이에 대한 기능 요청을 제출하겠습니다.

감사합니다!

감사 합니다 @jmcclanahan

@jmcclanahan 정말 감사합니다!! @renatoaraujoc 이 기능을 Angular 팀에 제출하셨습니까?

@rraya 이 "문제"에 대한 기능 요청을 제출했습니다(생각해 보면 별 문제가 아닙니다). #17168을 참조하세요.

여기에 추가하기만 하면 됩니다. 내 사용 사례는 앱의 다른 모든 부분이 모달을 열기 위해 호출하는 open 메서드가 있는 AppModule에 ModalManagerService를 만든 것입니다. 구성 요소를 전달받은 다음 모달로 열립니다. 또한 세션 시간 초과로 인한 경로 변경과 같이 사용자가 모달을 닫는 것 이외의 다른 작업으로 모달을 닫아야 할 때 사용되는 closeAll 메서드가 있습니다.

@jmcclanahan 하지만 여전히 당신의 의견을 이해하지 못합니다. 몇 가지 제안이 있으면 감사합니다. 'this.componentFactoryResolver.resolveComponentFactory'에서 오류가 발생한 것 같습니다.

@Dunos 나 좀 도와줄 수 있니?나는 몇 주 동안 같은 문제를 겪었고 정말 머리가 아프다.

@워츠 ,

당신이 이해해야 할 것은 지연 로드된 경로로 이동할 때마다 활성화된 경로가 해당 lazyModule에 대한 entryComponents를 포함하는 자식 인젝터를 생성한다는 것입니다. AppModule(응용 프로그램의 루트 인젝터)에 정의된 전역 modalService가 있는 경우 componentFactoryResolver는 모든 lazyModule의 새 entryComponents를 알지 못합니다. 따라서 이 문제를 해결하는 방법 중 하나는 lazyModule의 구성 요소에서 보완 팩토리 리졸버의 인스턴스를 가져오고 어떻게든 modalService에 "이 인젝터/컴포넌트 팩토리 리졸버를 사용하여 원하는 entryComponent를 렌더링하십시오"라고 말하는 것입니다.

조금 이해하기 어려운 것 같지만 그렇지 않습니다.

@renatoaraujoc 설명해주셔서 감사합니다. 제 사용 사례에서는 링크에서 구성 요소를 로드하고 싶습니다. 즉, 왼쪽 사이드바에서 메뉴를 클릭하고 지연 로드된 모듈에서 모듈을 검색한 다음 생성하겠습니다. 동적 구성 요소는 탭과 같은 앱을 만들고 싶기 때문에 올바른 기본 콘텐츠 영역에 일부 구성 요소 콘텐츠가 있습니다. 탭 트리거를 클릭하면 콘텐츠가 표시됩니다. 또는 솔루션 구축 탭이 있습니까? angular2/4를 통한 앱과 같은?

어쨌든, lazyload 구성 요소는 초기화될 수 없습니다. 어떻게 서비스에 componentFactoryResolver를 알릴 수 있습니까?

내 앱에는 AppModule이 있고 CoreModule이 포함되어 있으므로 내 ContentTabModule(탭셋을 로드하는 데 사용)은 CoreModule에 속하며 모든 생성 구성 요소는 ContentTabModule에서 처리하며 메뉴를 클릭할 때 서비스, 구성 요소, 지시문, 파이프가 있습니다. 링크, ContentTabService는 메뉴 params에서 동적 구성 요소를 생성합니다. 네트워크 패널에 로드된 일부 트렁크(웹팩 사용)를 보았습니다. 그런 다음 지연 로드 모듈에서 시연된 구성 요소를 만들고 싶습니다.

@renatoaraujoc lazyModule의 구성 요소에서 ComplementFactoryResolver의 인스턴스를 어떻게 얻을 수 있습니까? lazymodule의 구성 요소가 초기화되지 않기 때문에 훨씬 더 어렵다고 생각합니다(또는 내가 틀렸습니다).

@werts 위에서 @jmcclanahan 과 나눈 대화를 확인하고 도구 모음과 비슷한 것에 대해 이야기했습니다.

@Dunos @jmcclanahan 의 예제를 이해할 수 없습니다. 같은 문제를 겪고 있다고 생각합니다. lazyload 구성 요소는 초기화되지 않습니다.
지연로드 모듈에서 this.toolbarService.receiveContext()가 호출되었습니까?

@werts 경로와 함께 지연 모듈의 주요 구성 요소를 로드해야 하며 해당 구성 요소는 Injector 및 ComponentFactoryResolver로 aux 서비스를 호출하는 구성 요소입니다.

@Dunos 감사합니다. 편리한 경우 도움을 줄 수 있습니까? 다른 사용 사례가 있습니다. 링크 클릭에서 모듈을 지연 로드한 다음 동적 구성 요소를 만들고 싶습니다. 가능합니까?

@werts ... 네, 가능합니다. 시작점은 https://github.com/Toxicable/module-loading 을 참조하세요.

좋아, 지금 시도하십시오. @mlc-mlapis

@werts et al: 이 지원 스레드를 다른 채널로 가져갈 것을 권할 수 있습니까? StackOverflow 또는 Gitter가 더 적합할 수 있습니다. 있는 그대로, 나는 이 문제를 구독하고 있으며(다른 많은 사람들도 마찬가지라고 확신합니다) 현재 많은 소음을 발생시키고 있어 주제에서 조금 벗어나고 있습니다.

플러스 측면: 도움이 되는 커뮤니티를 보니 반갑습니다!

이 문제가 지연 로드된 모듈과 함께 직면해야 하는 또 다른 장애물이라는 것이 믿기지 않습니다. 필요한 경우 게으른 모듈을 쉽게 제거/내보낼 수 있도록 게으른 모듈의 자식을 부모(app.module)로부터 익명으로 유지하는 솔루션을 필사적으로 찾고 있었습니다. app.component.html의 <router-outlet name="app-popup"> 같은 간단한 앱의 경우(ComponentFactory가 작업을 대체할 수 있기를 바라며 포기했습니다) 게으른 자식 구성 요소를 로드하는 것은 매우 벅찼습니다. 이제야 lazy-modules entry-children과 관련된 entry-components 문제가 발생합니다. 게으른 자식 구성 요소를 등록하기 위해 루트 모듈이 필요한 경우 내 모듈을 적절하게 격리된 상태로 유지하는 것은 불가능합니다. Angular 팀이 이것을 곧 문제로 인식하고 해결하기를 바랍니다. 나는 여전히 그들이 게으른 모듈에 대한 앱 전체 라우터 콘센트에 대한 내 문제에 응답하기를 기다리고 있습니다. https://github.com/angular/angular/issues/19520

처음에는 아무것도 없었고,
'뷰를 만들어보자! '라고 jQuery 팀은 말합니다.
'목록을 만들자! '라고 Angular 팀은 말합니다.

@jmcclanahan 이제 ngComponentOutlet이 생겼습니다. 훨씬 간단해졌습니다.

<ng-container  *ngComponentOutlet="yourComponentClass;injector: yourInjector;"></ng-container>

@crysislinux ngComponentOutlet은 훌륭하지만 아직 구성 요소에 데이터를 전달할 수 없으므로 솔루션이 아닙니다.

이 기능에 대한 소식이 있습니까? =/

방금이 문제가 발생했습니다. 몇 가지 제안을 시도했지만 성공하지 못했습니다. 그래도 작동했습니다. 실제로 느리게 로드된 모듈에 다른 종속 모듈(이 경우 NGX 모달 모듈)의 가져오기가 누락되었지만 오류로 인해 내 구성 요소를 해결할 수 없다고 비난했습니다.

궁금합니다. ui-router를 사용하면 이 문제가 해결되나요? 아니면 Angular의 자체 라우터 다중 콘센트 기능도 있습니까? 그들은 배후에서 이러한 논리를 수행합니까? 이것은 Angular 1.x에서 매우 일반적인 경우이며 이를 Angular 2+로 전환하려고 합니다.

도구 모음 예제에서 ui-view(아마도 명명된 보기 또는 앵귤러 라우터의 경우 라우터 콘센트)는 더 높은 수준의 모듈에서 설정됩니다. 지연 로드된 모듈 상태가 도구 모음 ui-view를 자체 콘텐츠로 대체하는 경우 "작동"해야 하거나 현재 모듈 외부의 상위 수준 보기를 교체해야 하는 지연 로드된 환경에서 ui-router가 작동하지 않습니다. . 이는 Angular 1.x에 비해 매우 제한적입니다.

위의 예는 ui-router/angular 라우터가 해결하도록 설계된 것과 동일한 문제를 해결하는 것처럼 보입니다. 내가 뭔가를 놓치고 있습니까?

... 우리는 아마도 문제가 무엇인지 전혀 잃어 버렸을 것입니다. 우리가 알고 매일 사용하는 것처럼 지연 로드된 모듈의 구성 요소를 사용하는 데 문제가 없습니다. 라우터를 통하거나 프로그래밍 방식으로 자체 코드를 사용하는 경우에도 마찬가지입니다.

위의 @jmcclanahan 예제를 사용할 때 내 사용 사례에 잘 작동하는 것으로 보입니다.

this.componentRef = this.toolbarTarget.createComponent(childComponent, 0, this.refInjector);. $ 다음에 $ this.componentRef.changeDetectorRef.markForCheck(); 를 추가해야 했습니다.

이렇게 하면 HostBinding 속성이 트리거되지 않는 문제가 수정되었습니다.

나는 나에게 효과가 있었던 잠재적인 솔루션으로 스윙을 할 것이라고 생각했습니다. 이것은 원래 plunkr의 포크입니다.
http://plnkr.co/edit/x3fdwqrFDQr2og0p6gwr?p=preview

이 문제를 해결하려면 entryComponent(Page1Module)가 있는 모듈에 제공된 서비스(ResolverService)에서 구성 요소 팩토리를 해결해야 합니다. 그런 다음 해결된 팩토리를 사용하고 MainComponent의 보기에 구성 요소를 추가하는 두 번째 서비스(ChangerService)로 전달됩니다.

내가 심각하게 이해하지 못하는 것은 이 빌어먹을 라우터입니다. 이 plunker를 확인하십시오( @patkoeller 의 예에서 분기됨)
http://plnkr.co/edit/keMuCdU9BwBDNcaMUAEU?p=미리보기 @ src/page1.ts

내가 기본적으로 하고 싶은 것은 일부 구성 요소를 최상위 앱에 삽입하고 /page-1/sub/component [routerLink]="['./', 'sub', 'component'] 와 같은 지연 로드 모듈을 정의하는 것과 관련된 명령과 함께 [routerLink] 지시문을 사용하는 것입니다. ActivatedRoute $를 사용하여 인젝터를 createComponent 에 전달하고 제 경우에 작동하면 다른 모든 routerLink를 망칠 수 있지만 router.routerState.snapshot 를 state 에 다시 할당하면

버그를 신고해야 하나요?

내 대화 싱글톤 서비스의 항목 구성 요소와 동일한 문제에 직면하고 있습니다. 기능 관련 모달 구성 요소는 @jmcclanahan 의 해결 방법 없이도 해당 모듈에 남아 있어야 합니다.

이에 대한 새로운 ETA가 있습니까? 아니면 적어도 Angular 팀의 응답입니까? 모듈 캡슐화가 창 밖으로 던져졌기 때문에 이 기능이 없는 것은 정말 나쁜 일입니다. @angular/material에 대한 모든 대화 상자는 루트 모듈에서 가져와야 합니다.

@xban1x 나는 우리가 그것에 대해 진전이 없다고 생각합니다. 우리는 그것의 둘러보기를 수행해야합니다 :(

@jmcclanahan 귀하의 접근 방식을 사용하여 주입된 구성 요소의 참조를 얻을 수 있습니까? 구성 요소를 성공적으로 주입했습니다. 그것은 트리 btw이므로 이제 트리를 주입한 구성 요소의 트리 클릭 이벤트를 구독해야 합니다. 이 작업을 수행할 수 있는 방법이 있습니까?

문제 #23819에서 항목 구성 요소가 providesIn: 'root' 서비스와 유사한 방식으로 동작하도록 하는 방법에 대해 질문했습니다. 두 문제가 같은 문제를 해결하기 위한 것 같기 때문에 해당 문제를 닫았습니다. 중요한 기능이기 때문에 이 문제가 빨리 해결되었으면 합니다. :)

업데이트

축소되지 않은 코드에서 볼 수 있듯이 서비스에 providesIn 가 정의되어 있을 때 이미 사용할 수 있도록 팩토리를 등록합니다(모듈로 가져올 필요 없이), 이해하면 바르게:

var Injectable = makeDecorator('Injectable', undefined, undefined, undefined, function (injectableType, options) {
    if (options && options.providedIn !== undefined &&
        injectableType.ngInjectableDef === undefined) {
        injectableType.ngInjectableDef = defineInjectable({
            providedIn: options.providedIn,
            factory: convertInjectableProviderToFactory(injectableType, options)
        });
    }
});

@Component({ ... entryComponent: true }) 와 같은 옵션을 사용하여 구성 요소에 유사한 논리를 적용하는 방법이 있다고 가정합니다. 그러면 구성 요소를 포함하는 청크가 로드될 때 팩토리가 리졸버 에 정의됩니다(다음을 포함하는 모듈이 있어야 합니다). 구성 요소 종속성이 있는 entryComponents 의 구성 요소, 그렇지 않으면 컴파일 시간 오류가 발생함).

@lucasbasquerotto ... 다음 논리를 사용하여 모듈을 로드하고 해당 구성 요소 유형을 사용합니다(해당 모듈에 직접 저장된 문자열 키 <-> 구성 요소 유형 간의 자체 매핑 사용).

this._loader.load(url)
    .then((_ngModuleFactory: NgModuleFactory<any>) => {
        const _ngModuleRef: NgModuleRef<any> = _ngModuleFactory.create(this._injector);
        const _cmpType: Type<any> = _ngModuleRef.instance.cmps.get('dynamic');
        const _cmpFactory: ComponentFactory<any> = _ngModuleRef
            .componentFactoryResolver
            .resolveComponentFactory(_cmpType);
        this._cmpRef = this.vc.createComponent(_cmpFactory, 0, this._injector, []);
    });

안녕하세요 여러분, 지금은 여러 지연 로드 모듈 해석기에 대한 참조를 유지 관리하는 싱글톤 클래스를 갖는 해결 방법을 사용하고 있습니다.
Angular의 새 버전으로 이것을 처리하는 더 좋은 방법이 있습니까?
감사 해요

안녕 모두들,

동일한 문제에 직면하고 해결 방법을 솔루션의 부트스트랩으로 사용합니다.

이에 대해 더 나아가 글로벌 서비스의 필요성을 줄이는 방법은 RouteConfigLoadEnd 이벤트의 loadedConfig 개인 변수를 노출하는 것입니다. LoadedRouterConfig 유형의 이 개인 변수에는 로드된 모듈, 해당 인젝터 및 componentFactoryResolver가 포함됩니다.

이것을 기능 요청으로 제안하려면 새 문제를 열어야 합니까?
---------- 수정 후

내 질문은 신경쓰지 마세요. 이 기능 요청을 찾았습니다. https://github.com/angular/angular/issues/24069

나는 같은 문제가 있다고 생각하지만 내 추가 모듈은 lazy loaded 가 아닙니다. entryModules 를 SharedFeatureModule (필요한 경우에만 로드됨)에서 CoreModule 로 이동해야 합니다.
이제 작동합니다. 그러나 내 의견으로는 좋지 않은 기능 관련 구성 요소를 코어로 옮겼습니다.

이 문제가 아직 해결되지 않았습니까?

@jmcclanahan 의 솔루션

{ path: '', component: yourComponent, data: { toolbar: yourToolbarComponentToInject } }

끝에 빈 경로를 추가합니다. 동적 이동 경로를 만들려고 하면 이것이 문제가 됩니다.

이 빈 경로를 구성 요소에 기본적으로 추가하지 않고 지연 자식 모듈의 부트스트랩과 비슷한 것을 선호합니다.

이에 대한 업데이트가 있습니까?

우리의 사용자 정의 솔루션에는 글로벌 사이드바를 열 수 있는 각 구성 요소에 ComponentFactoryResolver 및 Injector 를 생성자 주입하는 작업이 포함됩니다. 그런 다음 호출 구성 요소는 해당 참조(자체)를 원하는 Component 와 함께 서비스에 전달합니다. 서비스는 이러한 인스턴스를 사용하여 구성 요소를 만듭니다. 지나치게 복잡하고 장황합니다.

항목 구성 요소를 자체 하위 모듈에 넣고 앱으로 가져오기만 하면 됩니다.

@broweratcognitecdotcom 이 문제의 요점은 지연 로드된 모듈 의 entryComponents 에 있다고 생각합니다. AppModule 항목 구성 요소로 사용하려는 모든 구성 요소의 모든 하위 모듈을 포함하면 이러한 모든 구성 요소가 강제로 로드 되어 시작 시 성능 문제 가 발생할 수 있습니다.

이러한 구성 요소는 해당 구성 요소를 사용하는 구성 요소(소비자)에 대해 불가지론적이어야 한다는 것은 말할 것도 없고, 해당 모듈이 진입 구성 요소 또는 일반 구성 요소(html에 선언됨)로 사용되고 있는지 알 수 없도록 해야 합니다. 소비자는 알아야 합니다(따라서 AppModule에 넣으면 왜 거기에 있는지 알기가 어려워 다른 곳에서 검색해야 알 수 있습니다).

@lucasbasquerotto ... 그런 게으른 모듈을 프로그래밍 방식으로 로드합니다... 그러면 모든 권한이 있고 제대로 작동합니다.

문자열 키 및 해당 구성 요소의 맵을 사용하여 루트 확인자에서 구성 요소를 해결할 수 없는 이상한 문제가 발생한 후 이 스레드를 우연히 발견했습니다. 말 그대로 _factories 맵에서 구성 요소를 볼 수 있지만 어떻게 든 올바르게 비교되지 않고 정의되지 않은 값을 반환합니다.

@jmcclanahan @Dunos 기능 모듈이 인젝터 참조를 넘겨주는 대신(메인 앱 모듈에 컨텍스트 등록) 실제로 올바르게 해결된 팩토리를 반환하는 FactoryResolver라는 서비스를 노출하는 것이 더 나을 것이라고 생각하지 않습니까? 구성 요소는 자체 모듈의 인젝터에 대한 올바른 참조를 갖기 때문입니다. 이렇게하면 구성 요소에 대한 공개 API를 노출하는 것과 같습니다.

비슷한 작업을 수행하려고 하지만 내 모듈이 지연 로드되지 않고 위에서 설명한 문제에 부딪쳤습니다. 이론적으로 여기에서 분명한 것을 놓치고 있지 않는 한 작동해야 합니까?

@h-arora 나는 comp를보고 동일한 문제를 발견했습니다. _factories에 있지만 문제는 모듈에 실제로 표시되지 않는 빌드 오류가 있다는 것입니다.

#17168에서 극복(이것의 복제본으로 폐쇄됨)

현재 행동
앱의 RootInjector에서 제공하는 ComponentFactoryResolver를 사용하여 구성 요소를 동적으로 생성하는 싱글톤 서비스가 있고 지연 모듈에 선언된 entryComponent를 생성하려는 경우 루트 인젝터가 이에 대해 알지 못하기 때문에 실패합니다.

예상되는 행동
이것은 루트 인젝터가 자식 인젝터에 의해 알려진 entryComponents에 대해 알지 못한다는 점을 고려하면 실제로 예상되는 동작입니다.

행동을 바꾸는 동기/사용 사례는 무엇입니까?
동기는 Angular의 모듈식 설계가 정확하지만 복잡성을 활용하여 동적 구성 요소를 만드는 것입니다.

각도 버전: 2.4.9

제안된 솔루션: 이것은 Angular 자체에서 채택한 모듈식 설계에 어긋나지만, LazyModule의 entryComponents를 RootInjector의 entryComponents에 추가하고 탐색할 때마다 RootInjector 범람을 피하기 위해 동적 구성 요소를 생성하기 위해 제공되는 복잡성을 완화할 수 있다고 생각합니다. (LazyModule을 파괴), 이전에 주입된 entryComponents는 배열에서 지워집니다.

간단히 말하면:

페이지가 로드됨 -> RootInjector가 생성됩니다.
LazyModule -> ChildInjector가 생성되도록 활성화하는 탐색을 실행합니다.
RootInjector.entryComponents.append(childInjector.entryComponents)
다른 곳으로의 탐색 문제 -> LazyModule이 더 이상 필요하지 않으므로 파괴됩니다.
RootInjector.entryComponents.destroyLastAppendedEntryComponents()
좋은 것을 제안할 수 있기를 바랍니다.

나는 회사 프로젝트를 분해하고 지연 로딩을 구현하는 데 며칠을 보냈습니다. 나는 우리의 모달이 각각의 모듈에 있는 항목으로 인해 작동하지 않는다는 것을 깨달았습니다. 우리는 되돌아왔고 수정을 기다리고 있습니다...

이것은 예정된 것입니까 아니면 해결 방법을 모색해야 합니다. 사람들이 위에서 하는 것처럼.

@ravtakhar 아마도 이것이 백로그에 있고 현재 할당된 우선 순위가 없기 때문에 해결 방법을 살펴보고 싶을 것입니다.

나는 회사 프로젝트를 분해하고 지연 로딩을 구현하는 데 며칠을 보냈습니다. 나는 우리의 모달이 각각의 모듈에 있는 항목으로 인해 작동하지 않는다는 것을 깨달았습니다. 우리는 되돌아왔고 수정을 기다리고 있습니다...

이것은 예정된 것입니까 아니면 해결 방법을 모색해야 합니다. 사람들이 위에서 하는 것처럼.

여기에 같은 문제

@tmirun ... 프로그래밍 방식으로 이러한 게으른 모듈을 로드하면 ... 모든 권한이 있습니다. 그러면 ... 마지막으로 모듈 참조를 얻고 moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponentType) 를 호출할 수 있음을 의미합니다.

위의 많은 문제와 동일한 문제가 있었고 모든 단일 lazyLoaded 모듈이 이러한 구성 요소를 로드하도록 appModule에 있는 항목을 포함하여 모든 entryComponents를 선언하고 내보내고 내보내는 독립 실행형 모듈을 만들어 해결했습니다.

내가 찾은 유일한 다른 실행 가능한 솔루션은 entryComponent 를 호스팅하는 모듈에 따라 사용자 정의 ComponentFactoryResolver 를 제공하여 대화 상자를 생성하는 것입니다.

주의 : 루트에 제공된 싱글톤 모듈 은 기본 모듈 항목 구성 요소 만 볼 수 있다는 것을 기억하십시오. 그래서 첫 번째 솔루션을 생각해 내기로 결정했습니다. 그렇지 않으면 응용 프로그램의 각 하위 모듈에 대해 대화 상자 생성기를 만드는 것에 대해 생각할 수 있습니다. 해당 하위 모듈은 결국 해당 모듈의 ComponentFactoryResolver 모달을 생성하는 서비스를 제공하여 다른 entryComponents 가 있는 공유 모듈을 포함합니다.

... 일반적으로 지원되는 솔루션을 사용할 수 있어야 합니다(일부 새로운 API + Ivy 지원) ... Jason의 프레젠테이션으로 인해 http://www.youtube.com/watch?v=2wMQTxtpvoY&t=131m24s ... Angular 7.2 . .. 하지만 버전 7.2가 올바르게 언급되었는지 확실하지 않습니다.

CDK 오버레이 와 동일한 문제가 있습니다. CDK 오버레이 위에 빌드된 갤러리 플러그인 이 있지만 이 문제 때문에 루트 모듈에서 가져와야 합니다.

BTW, 내 경우에 대한 해결 방법이 있습니까?

@MurhafSousli ... lol, 나는 그것이 의도적 인 것이라고 다시 말해야합니다. 이것은 100번 설명했습니다... 루트 인젝터가 하나 있고 지연 로드된 모듈은 한 수준 깊이이므로 루트 수준에서 구성 요소를 만질 수 있다고 가정할 수 없습니다. 그러나 여러 번 말했듯이 프로그래밍 방식으로 해당 모듈을 로드할 수 있습니다. 따라서 해당 모듈 참조를 얻을 수 있습니다. 그러면 해당 구성 요소에 도달할 수 있습니다.

나도 목록에 추가 😄. 내 구성 요소를 동적으로 로드하는 모달 구성 요소가 있고 앱 구성 요소의 일부가 아니므로 잘못된 디자인이 될 모든 구성 요소를 앱에 로드하고 싶지 않습니다. 하지만 이것이 내가 이 모든 것을 읽은 후에 추측해야 하는 것입니다.

@msarica 는 오늘 나에게 느리게 로드되는 서비스를 만들고 팝업을 여는 글로벌 서비스를 확장한 다음, 느리게 로드된 서비스를 사용하여 팝업을 열면 예상대로 작동할 것이라고 지적했습니다.

글로벌 PopupService

@Injectable({ providedIn: 'root' })
export class PopupService {
  constructor(
    private injector: Injector,
    private overlay: Overlay,
  ) {}

  open<T = any>(component: ComponentType<T>) { ... }
}

특정 서비스는 MyFeatureModule 에서만 지연 로드됨

@Injectable()
export class MyFeaturePopupService extends PopupService {}

느리게 로드된 MyFeatureModule 의 일부인 구성 요소에서 사용

@Component({ ... })
export class MyFeatureComponent {
  constructor(
    private myFeaturePopupService: MyFeaturePopupService,
  ) {}

  openPopup() {
    this.myFeaturePopupService.open(MyFeaturePopupComponent);
  }
}

지연 로드 모듈의 정의 예

@NgModule({
  imports: [MyFeatureRoutingModule],
  declarations: [
    MyFeatureComponent,
    MyFeaturePopupComponent,
  ],
  entryComponents: [MyFeaturePopupComponent],
  providers: [MyFeaturePopupService],
})
export class MyFeatureModule {}

Angular 7에서 테스트되었습니다.

참고: 우리 코드는 Angular CDK의 Overlay 를 활용하지만 개념은 동일합니다(이 스레드의 다른 부분에 따르면 우려되는 것은 Injector 입니다).

... 일반적으로 지원되는 솔루션을 사용할 수 있어야 합니다(일부 새로운 API + Ivy 지원) ... Angular 7.2에서

... @mlc-mlapis 일반 지원 솔루션이 무엇인지 확장할 수 있습니까?

@cedvdb ... 실제로 솔루션처럼 보이는 프레젠테이션에서 중요한 순간을 언급했습니다. 이는 프로그래밍 방식으로 지연 로드된 모듈을 로드한 다음 구성 요소, 지시문, ...

그 방법은 오늘날에도 사용 가능하지만 Angular CLI를 사용하면 라우터를 통해 사용하지 않는 경우에도 항상 필요한 경로를 정의해야 합니다.

와. 이것은 매우 예상치 못한 일이었습니다.

@angular/cdk 포털 및 오버레이를 기반으로 내 자신의 대화 시스템을 구현했습니다: https://stackblitz.com/edit/cdk-dialog-example-p1. 이 문제도 받았습니다.

@CWSpear 가 언급한 해결 방법이 작동합니다. 기능 모듈에서 서비스를 확장해야 했고 그게 저에게 효과적이었습니다. 얼마나 이상한가!

이에 대한 더 우아한 솔루션이 있습니까?

이에 대한 더 우아한 솔루션이 있습니까?

내가 실험해 온 것은 게으른 모듈 수준에서 실행기 래퍼를 다시 제공하는 것입니다. 이 래퍼가 생성자에서 인젝터를 사용하도록 하고 이를 실제 런처(루트에서 주입됨)에 전달합니다. 한 줄 수정입니다. 얼마나 안정적인지는 모르겠지만,

@NgModule({
  declarations: [LazyRootComponent, LazyEntryComponent],
  entryComponents:[LazyEntryComponent],
  providers:[LauncherWrapper],  //<---- reprovision here 
  imports: [
    CommonModule,
    LazyModRoutingModule
  ]
})
export class LazyModModule { }

@Injectable()
export class LauncherWrapper {
    constructor(private injector: Injector,  private launcher:ActualLaucherClass) {
    }

내 문제는 @Injectable({providedIn: 'root'}) 를 사용했기 때문에 발생했습니다. @Injectable({providedIn: MyModule}) 로 변경하면 해결됩니다. 😄

서비스가 지연 로드된 모듈 항목 구성 요소에 액세스해야 하기 때문에 이는 의미가 있습니다. 루트에서 제공되면 모듈이 루트 인젝터에서 일시적으로 연결이 끊어지기 때문에 액세스할 수 없습니다.

@jmcclanahan 및 @dirkluijk 덕분에 몇 시간 동안 머리를 긁적이며 귀하의 설명이 제 경우에 대한 솔루션을 찾는 데 도움이 되었습니다.

올바른 방법이 무엇인지 궁금합니다.
@angular/cdk가 필요합니까? 왜요 ?

특별한 대체 레지스트리에 대해 알지 못하고 ComponentFactoryResolver 만 사용하는 타사 코드가 많기 때문에 통합하려는 코드가 필요한 경우 해결 방법이 실행 가능하다고 생각하지 않습니다.

이를 염두에 두고 내 "해결책"이 있습니다. CoalescingComponentFactoryResolver . 다음과 같이 앱 모듈에서 제공하고 해당 생성자에서 초기화해야 하는 서비스입니다.

@NgModule({
 providers: [CoalescingComponentFactoryResolver]
})
class AppModule {
  constructor(coalescingResolver: CoalescingComponentFactoryResolver) {
    coalescingResolver.init();
  }
}

그런 다음 지연 로드 모듈은 이를 주입하고 자체 ComponentFactoryResolver 인스턴스를 등록해야 합니다. 이렇게:

@NgModule({})
export class LazyModule {
  constructor(
    coalescingResolver: CoalescingComponentFactoryResolver,
    localResolver: ComponentFactoryResolver
  ) {
    coalescingResolver.registerResolver(localResolver);
  }
}

이 작업이 완료되면 지연 로드 모듈의 항목 구성 요소는 지연 로드되지 않은 서비스에서 사용할 수 있어야 합니다.

작동 원리: 초기화되면 루트 앱의 ComponentFactoryResolver 를 주입하고 원숭이는 자체 구현을 호출하기 위해 resolveComponentFactory 메서드를 패치합니다. 이 구현은 먼저 등록된 모든 지연 모듈 해석기에서 구성 요소 팩토리를 해석한 다음 루트 앱 해석기로 폴백합니다(순환 호출을 피하기 위한 약간의 추가 논리가 있지만 이것이 요점입니다).

네, 꽤 심한 해킹입니다. 하지만 지금 당장은 Angular 7에서 작동합니다. 누군가에게 유용할 수도 있습니다.

@CWSpear 의 솔루션을 기반으로 구성 요소의 제공자 배열에 기존 PopupService를 추가하기만 하면 이 작업을 수행할 수 있습니다. 따라서 별도의 "기능별" PopupService를 만들 필요가 없었습니다.

그래서 다음과 같이:

@Component({
  ...
  providers: [PopupService]  //<---- generic PopupService
})
export class MedicationPortletComponent implements OnInit, OnDestroy {
...

또는 지연 로드 모듈의 NgModule의 제공자 배열에 PopupService를 추가할 수도 있습니다. 예:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [PopupService] //<--- here's the PopupService!
})
export class SharedFeaturePatientModule {}

@jonrimmer 최고의 솔루션

@jonrimmer 이것은 최소한의 방해가 되며 우리의 사용 사례에 완벽하게 작동합니다. 저와 저희 팀에게 큰 감사를 드립니다 :)

게으른 라우터의 경우 어떻게 원활하게 작동하는지 궁금하지만 게으른 경로를 제거하고 ngModuleFactoryLoader를 사용하여 수동으로 모듈을 로드하면 오류가 발생합니다.

//Ignore the syntax
CompA {
  openDialog() {//invoked on button click of this comp
    matDialog.open(FilterComponent);//works fine in case of lazy route but throws error when manually loaded
  }
}

ModuleA {//lazy module
  imports: [MatDialog, FilterModule],
  declaration: [CompA]
}

FilterModule {
  declaration: [FilterComponent],
  entryComponent: [FilterComponent]
}

FilterComponent { ...
}

@jmcclanahan @MartinJHItInstituttet @splincode

async showBar() {
    const module = await import("../bar/bar.module");
    const compiled = this._compiler.compileModuleAndAllComponentsSync(
      module.BarModule
    );
    compiled.ngModuleFactory.create(this._injector);

    let factory: any = compiled.componentFactories.find(
      componentFactory => componentFactory.selector === "app-dialog"
    );
    this.modal.show(factory.componentType);
  }

@Jimmysh JIT 모드용입니다. AOT 모드에서는 import("../bar/bar.module.ngfactory") 를 로드해야 합니다( compileModuleAndAllComponentsSync 는 사용할 수 없음).

@mlc-mlapis
https://github.com/angular/angular/blob/master/aio/src/app/custom-elements/elements-loader.ts 에서 크게 영감을 받았습니다.

https://github.com/Jimmysh/ng-lazy-component-load

AOT JIT를 사용할 수 있습니다. 나를 위한 성공.

import { InjectionToken, Type } from '@angular/core';
import { LoadChildrenCallback } from '@angular/router';

export const ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES = [
  {
    path: 'aio-foo',
    loadChildren: () => import('../foo/foo.module').then(mod => mod.FooModule)
  }
];

export interface WithCustomElementComponent {
  customElementComponent: Type<any>;
}

export const ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN = new InjectionToken<Map<string, LoadChildrenCallback>>(
  'aio/elements-map'
);

export const ELEMENT_MODULE_LOAD_CALLBACKS = new Map<string, LoadChildrenCallback>();
ELEMENT_MODULE_LOAD_CALLBACKS_AS_ROUTES.forEach(route => {
  ELEMENT_MODULE_LOAD_CALLBACKS.set(route.path, route.loadChildren);
});

```타이프스크립트
import { Compiler, Inject, Injectable, NgModuleFactory, NgModuleRef, Type, ComponentFactory } from '@angular/core';
'@angular/router'에서 { LoadChildrenCallback } 가져오기;

'./lazy-component-registry'에서 { ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN } 가져오기;

@주사가능({
제공됨: '루트'
})
내보내기 클래스 LazyComponentLoader {
private moduleToLoad: 지도;
private moduleLoading = 새 지도>();

건설자(
개인 moduleRef: NgModuleRef,
@Inject(ELEMENT_MODULE_LOAD_CALLBACKS_TOKEN) elementModulePaths: 지도,
개인 컴파일러: 컴파일러
) {
this.modulesToLoad = 새로운 지도(elementModulePaths);
}

load(경로: 문자열, 선택자?: 문자열): 약속{
if (this.modulesLoading.has(경로)) {
반환 this.modulesLoading.get(경로);
}

if (this.modulesToLoad.has(path)) {
  const modulePathLoader = this.modulesToLoad.get(path);
  const loadedAndRegistered = (modulePathLoader() as Promise<NgModuleFactory<any> | Type<any>>)
    .then(elementModuleOrFactory => {
      if (elementModuleOrFactory instanceof NgModuleFactory) {
        return elementModuleOrFactory;
      } else {
        return this.compiler.compileModuleAsync(elementModuleOrFactory);
      }
    })
    .then(elementModuleFactory => {
      const elementModuleRef = elementModuleFactory.create(this.moduleRef.injector);
      const factories: Map<any, ComponentFactory<any>> = (elementModuleRef.componentFactoryResolver as any)
        ._factories;
      if (selector) {
        const find = Array.from(factories.keys()).find(type => {
          const factory = factories.get(type);
          return factory.selector === selector;
        });
        if (find) {
          return find;
        } else {
          return Promise.reject(new Error(`not found selector:${selector}`));
        }
      }
      this.modulesToLoad.delete(path);
      return;
    })
    .catch(err => {
      this.modulesLoading.delete(path);
      return Promise.reject(err);
    });
  this.modulesLoading.set(path, loadedAndRegistered);
  return loadedAndRegistered;
}
return Promise.resolve();

}
}

``` typescript
  async showFoo() {
    await this.lazyComponentLoader.load('aio-foo');
    this.modal.show(FooDialogComponent);
  }
  async showFoo2() {
      const aaa = await this.lazyComponentLoader.load('aio-foo', 'app-dialog');
    this.modal.show(aaa);
  }

@Jimmysh ... 그러면 맞습니다. JIT 모드에서만 컴파일러를 사용하고 있습니다.

constructor(private compiler: Compiler) {}
...
if (elementModuleOrFactory instanceof NgModuleFactory) {
   return elementModuleOrFactory;
} else {
   return this.compiler.compileModuleAsync(elementModuleOrFactory);
}

@mlc-mlapis AOT는 NgModuleFactory가 됩니다. https://github.com/Jimmysh/ng-lazy-component-load 를 테스트할 수 있습니다.

안녕하세요 여러분, 이 스레드의 주석 덕분에 라우팅을 통해 모듈 외부에 로드된 항목 구성 요소를 가져오려고 하는 해결 방법이 될 패키지를 만들었습니다. 보시고 도움이 되시길 바랍니다.

레포 링크: https://github.com/Jonathan002/route-master-example
데모 URL: https://jonathan002.github.io/route-master-example/

FWIW, @CWSpear 및 @dirkluijk 와 유사한 맥락에서 내 서비스에서 providedIn: 'root' 를 제거했습니다(지연 로드 모듈에 정의되어 있고 entryComponent 여는 책임이 있음). 대신 서비스를 지정했습니다. 내 지연 모듈 정의의 providers 에서. 이 서비스의 가장 큰/유일한 단점은 서비스가 더 이상 나무를 흔들 수 없다는 것입니다.

providedIn: MyLazyModule 를 사용하면 순환 종속성 경고가 발생했습니다.

@jonrimmer 감사하지 않고 글을 남길 수가 없었어요!! 당신은 내 하루를 저장했습니다.
내 의견을 읽는 모든 사람에게 이 멋진 답변 을 보면 시간을 낭비하지 않는 데 도움이 될 수 있습니다.

Angular 8.2.0에서 아직 해결되지 않았음을 확인했습니다. OP가 만들어진 지 2.5년이 된 이래로 Angular의 풍경은 많이 바뀌었고 Angular Material 2는 Angular Components가 되었습니다.

다른 주석가들이 지적한 바와 같이 Angular Material은 DOM을 사용하므로 응용 프로그램 구성 요소가 느리게 로드된 하위 모듈의 entryComponents에 선언된 경우에도 MatDialog에서 응용 프로그램 구성 요소를 로드할 때 응용 프로그램 개발자가 DOM을 사용할 필요가 없습니다.

그러나 비즈니스 애플리케이션에서 동일한 DOM 작업을 수행하는 것은 Angular의 애플리케이션 프로그래밍 지침에 반해 이상해 보입니다.

ComponentFactoryResolver 가 지연 로드된 하위 모듈에 선언된 항목 구성 요소를 어떤 식으로든 "볼" 수 있도록 OP의 기능 요청을 구현하면 좋을 것입니다. app.module에서 지연 모듈의 항목 구성 요소를 선언하는 것은 작동하지만 보기 흉합니다.

위에서 언급한 더러운 작업 솔루션: 1. DOM, 2. app.module에서 구성 요소 선언, 아래에서 덜 더러운 다른 솔루션을 제공합니다.

세 번째 솔루션, 덜 더럽습니다.

지연 로드된 여러 모듈에서 사용하는 공유 서비스가 있습니다.

export interface DataComponent {
    data: any;
}

/**
 * Display an NG component in a dialog, and this dialog has not need to answer but close.
 */
@Injectable()
export class DataComponentDialogService {
    modalRef: MatDialogRef<DataComponentDialog>;

    constructor(private dialog: MatDialog) { }

    open(title: string, externalComponentType: Type<DataComponent>, componentData: any, autofocus = true): Observable<any> {
        const isSmallScreen = window.innerWidth < 640 || window.innerHeight < 640;
        this.modalRef = this.dialog.open(DataComponentDialog,
            {
                disableClose: true,
                minWidth: isSmallScreen ? '98vw' : undefined,
                autoFocus: autofocus,
                data: {
                    title: title,
                    externalComponentType: externalComponentType,
                    componentData: componentData,
                    isSmallScreen: isSmallScreen
                }
            });

        return this.modalRef.afterClosed();

    }

}

이 서비스는 지연 로드되지 않은 모듈의 항목 구성 요소를 볼 수 있습니다. 지연 로드된 일부 모듈에 구현된 일부 항목 구성 요소가 있습니다. 그래서 각 지연 모듈에서 제공할 이 서비스의 클래스를 파생했습니다.

import { DataComponentDialogService } from '../_ui_services/dataComponentDialog.component';

@Injectable()
export class LazyComponentDialogService extends DataComponentDialogService {
    constructor(dialog: MatDialog) {
        super(dialog);
    }
}

LazyComponentDialogService는 lazy entry 컴포넌트와 동일한 lazy 모듈에서 제공되기 때문에 컴포넌트를 볼 수 있다.

앱 아키텍처에 따라 파생 클래스가 필요하지 않을 수 있지만 각 모듈에서 DataComponentDialogService 또는 이와 유사한 것을 제공하면 됩니다.

아이비 구현(9.0.0-next.7에서 테스트)으로 인해 Angular 9에는 더 이상 문제가 존재하지 않는 것 같습니다. 지연 모듈 외부에서 지연 로드된 모듈의 구성 요소를 동적으로 만들 수 있습니다. 아이비에서 동적인 컴포넌트에 대해서는 엔트리 컴포넌트 선언이 더 이상 필요하지 않은 경우로 보입니다. Ivy는 컴파일러에 의해 생성되었던 분리된 컴포넌트 팩토리가 필요하지 않습니다. 구성 요소 공장 정보는 Ivy(?)를 사용하여 구성 요소 정의에 포함됩니다. 구성 요소 유형이 있으면 구성 요소 팩토리를 가져온 다음 인스턴스를 생성할 수 있어야 합니다. 그것은 단지 내 인상입니다. 한 알의 소금으로 내 말을 받아

모든 동적 구성 요소를 선언하고 이를 entryComponent로 포함하는 별도의 위젯 모듈을 생성하기만 하면 됩니다. 그런 다음 AppModule에서 이 모듈을 가져옵니다. 이렇게 하면 입력 구성 요소가 루트 인젝터에 등록되었는지 확인할 수 있습니다.

이 솔루션은 깨끗하고 Lazy 캡슐화를 중단하지 않습니다.

@NgModule({
  declarations: [
    ModalComponent,
    ... more dynamic components ...
  ],
  entryComponents: [
     ModalComponent,
    ... more dynamic components ...
  ]
})
export class DynamicModule {

}

앱 모듈:

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      DynamicModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

@pixelbits-mk 그러면 모든 동적 구성 요소(예: 모달 등)가 즉시 로드 되지만 여기서 요점 은 앱의 초기 로드 속도를 늦추지 않도록 (특히 프로젝트가 성장함에 따라) 지연 로드할 수 있도록 하는 것입니다. ), 이를 호출하는 구성 요소와 같습니다.

지연 로드된 ComponentA 이 지연 로드된 동적 ComponentB 을 동적으로 호출한다고 가정해 보겠습니다. ComponentA 가 ComponentB 를 호출한다는 것을 알고 있으면 ComponentAModule ComponentBModule 를 가져올 수 있습니다. 이것은 이상적인 경우는 아니지만, 나는 그것으로 살 수 있습니다.

주요 문제는 ComponentA 가 ComponentB 가 로드될 것이라는 것을 모를 때 발생합니다. 예를 들어 ComponentB 가 모달이고 ComponentA 가 서비스에서 showModal() 메서드를 호출하고 서비스가 백그라운드에서 ComponentB 를 동적으로 로드하는 경우 ComponentA 는 그것을 모를 것입니다.

지금 내가 하는 일은 ComponentB showModal(ComponentB) ComponentA 가 ComponentB 로드 되지만 내 의견으로는 좋지 않습니다 (메서드에 대한 각 호출은 구성 요소 참조를 전달해야 함).

모듈을 명시적으로 가져올 필요 없이 항목 구성 요소를 사용할 수 있다면(이 문제가 무엇인지 생각합니다) 문제가 해결될 것입니다(Angular는 ComponentA 가 ComponentB 을 가져오는 서비스를 호출하는 것을 감지하는 방법이 있을 수 있습니다. ComponentAModule 가져오기를 암시적으로 ComponentBModule 하고 참조를 가져온 구성 요소의 모듈을 가져오는 바람직하지 않은 영향을 미칠 수 있지만 가져오기의 이유는 동적으로 생성하지 않기 위한 것입니다. , 나는 이것을 극단적 인 경우로 볼 것이고 괜찮을 것입니다).

나는 (아직) @jonrimmer 제안 을 테스트하지 않았지만 그것은 유망해 보입니다.

ComponentA 가 표시되는 경우에만 ComponentA 가 ComponentB 로 모듈을 자동으로 지연 로드하면 굉장할 것입니다.
ModuleA 에는 ComponentA1 , ComponentA2 구성요소가 있습니다.
ComponentA1 html ComponentB 참조 ( 모듈 ModuleB ), 하지만 ComponentA2 는 그렇지 않습니다.
ModuleB 는 ComponentA1 가 표시되는 경우에만 자동으로 지연 로드되지만 ComponentA2 가 표시되는 경우에는 그렇지 않습니다.

이것은 홈 페이지의 대시보드 시나리오에 완벽하게 맞습니다. Dahsboard는 다양한 모듈에서 제공되지만 대시보드가 ​​포함되지 않은 경우(예: 사용자 설정을 통해) 해당 모듈을 다운로드할 필요가 없습니다.

@jonrimmer 메인 ComponentFactoryResolver의 resolveComponentFactory 함수를 래핑하고 이전에 등록된 지연 로드 모듈을 검색하는 좋은 아이디어입니다.

루트에서 제공되는 서비스를 주입하는 항목 구성 요소와 함께 작동합니다. 하지만 지연 로드 모듈에서만 제공되는 서비스는 주입할 수 없습니다. 이 경우 StaticInjectorError가 발생했습니다. 확인해 주시겠습니까?

ivy가 이 문제를 처리하는 것 같다는 것을 확인하고 싶었습니다. 나는 오늘 이 문제를 우연히 발견했는데, 여기에는 항목 구성 요소와 공유 서비스를 포함하는 지연 로드로 모듈을 다시 작성하여 구성 요소 팩토리를 찾을 수 없다는 새로운 오류를 찾기 위해서만 인스턴스화할 수 있습니다. 사실 처음에 이게 문제였다는 걸 읽고 충격을 받았습니다.

어쨌든 기존 Angular 8.2 프로젝트에서 ivy를 활성화했고 모두 예상대로 작동하는 것 같습니다.

지연 로드 모듈에서 Overlay 사용을 위한 내 솔루션:
다음과 같이 ComponentPortal 의 생성자에게 팩토리 리졸버를 전달해야 합니다.

@Injectable()
export class OverlayService {

  constructor(
    private overlay: Overlay,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {
  }

  open<T>(component: ComponentType<T>) {
    const overlayRef = this.overlay.create();

    const filePreviewPortal = new ComponentPortal(component, null, null, this.componentFactoryResolver);

    overlayRef.attach(filePreviewPortal);
  }
}

그러나 지연 로드된 모듈에서도 OverlayService 를 제공해야 합니다. OverlayService는 OverlayService가 제공되는 모듈의 ComponentFactoryResolver 를 주입해야 합니다.

@NgModule({
  declarations: [
     SomeComponent,
  ],
  entryComponents: [
    SomeComponent,  // <-------- will be opened via this.overlayService.open(SomeComponent)
  ],
  providers: [
    OverlayService, // <--------
  ]
})
export class LazyLoadedModule {}

@mixrich 이 접근 방식은 [내 앱에서 그렇게 하고 있으며 로그아웃과 같은 일부 이벤트에서 모든 모달 대화 상자를 닫아야 할 때까지 잘 작동합니다.] 이 모듈을 가져옵니다. 즉, 앱에는 예전 서비스와 같은 단일 인스턴스가 없습니다.

오버레이 서비스의 신호 톤이 없기 때문에 얼마나 많은 모달 대화 상자가 열려 있는지 알기가 쉽지 않습니다.

물론 앱의 요구 사항이지만 이 접근 방식에 주의할 뿐입니다.

@mixrich 이 접근 방식은 [내 앱에서 그렇게 하고 있으며 로그아웃과 같은 일부 이벤트에서 모든 모달 대화 상자를 닫아야 할 때까지 잘 작동합니다.] 이 모듈을 가져옵니다. 즉, 앱에는 예전 서비스와 같은 단일 인스턴스가 없습니다.

오버레이 서비스의 신호 톤이 없기 때문에 얼마나 많은 모달 대화 상자가 열려 있는지 알기가 쉽지 않습니다.

물론 앱의 요구 사항이지만 이 접근 방식에 주의할 뿐입니다.

예를 들어, 제 경우에는 OverlayService가 제공된 OverlayService ModalDialogModule 이 있고 OverlayService.open(SomeComponent) 를 호출하면 모달 창 템플릿도 생성되고 내부에 SomeComponent 가 삽입됩니다. 유용한 관찰 가능 항목(닫기 및 성공 이벤트의 경우), 구성 요소 인스턴스 및 수동 close 메서드를 사용하여 일부 데이터 구조를 반환합니다.
따라서 LazyModule에서 모달을 사용해야 할 때 OverlayService 를 사용할 수 있도록 ModalDialogModule 를 가져오기만 하면 됩니다. 모달을 사용하려면 ModalDialogModule 를 가져와야 한다는 것을 항상 알고 있기 때문에 이 접근 방식이 편리하다는 것을 알았습니다. 반응 양식을 사용하려면 ReactiveFormModule 를 가져와야 한다는 것을 항상 알고 있는 것처럼

Angular 8.3.6에서 작동합니다. 라이브러리 모듈 항목 구성 요소에 추가하면 로드되지 않는 항목 구성 요소(매트 대화 상자)가 있는 라이브러리 모듈이 있습니다. 열려고 했을 때 콘솔 로그에서 MyCustomDialog에 대한 구성 요소 팩토리를 찾을 수 없다고 나옵니다.

솔루션은 라이브러리 모듈의 NgModule 클래스에서 모든 모듈의 항목 구성 요소의 배열을 반환하는 정적 메서드를 만드는 것입니다. 그런 다음 앱 모듈 NgModule에서 이 메서드를 호출합니다.

@NgModule({
    declarations: [
        MyCustomDialogComponent
    ],
    imports: [
        CommonModule
    ],
    exports: [
        MyCustomDialogComponent
    ]
    // no need to add the dialog component to entryComponents here.
})
export class MyCustomModule {
    static getEntryComponents() {
        const entryComponents = [];
        entryComponents.push(MyCustomDialogComponent);
        return entryComponents;
    }
}

import {MyCustomModule} from 'my-custom-library'; // import library from node_modules

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MyCustomModule
    ],
    providers: [],
    bootstrap: [AppComponent],
    entryComponents: [].concat(MyCustomModule.getEntryComponents())
})
export class AppModule {
}

나는 이것이 여전히 작동하지 않는 라이브러리의 entryComponents를 수정하지 않는다는 것을 알고 있지만 적어도 정적 메서드를 사용하면 앱 모듈은 사용자 정의 라이브러리의 항목 구성 요소에 대해 알 필요가 없습니다. 그것은 단지 그 메소드를 호출하고 라이브러리에 나열된 것을 가져옵니다. 앱은 라이브러리의 어떤 구성 요소가 항목 구성 요소인지 알 책임이 없습니다.

@asmith2306 왜 스프레드 연산자를 사용하지 않습니까? 못생겼어

@asmith2306 왜 스프레드 연산자를 사용하지 않습니까? 못생겼어

작동하지 않기 때문입니다. 어딘가에 버그가 있습니다.

--prod 모드에서 작동하지 않는 것 같습니다.

작동하더라도 실제 문제를 해결하지 않습니다. 문제는 NgModule의 entryComponents에 구성 요소를 추가하고 해당 모듈을 내 앱에서 느리게 로드된 모듈로 가져오면 entryComponents가 앱 항목 구성 요소에 자동으로 등록되어야 한다는 것입니다. 더 이상의 작업이 필요하지 않아야 합니다. NgModule의 entryComponents에 있는 모든 구성 요소는 앱 모듈의 entryComponents에 자동으로 포함되어야 합니다. 현재는 그렇지 않습니다. 그렇다면 우리는 여기에 있지 않았을 것입니다.

@broweratcognitecdotcom 다양한 주입 수준의 충돌 및 우선 순위는 어떻습니까?

@mlc-mlapis 주문은 선착순으로 이루어져야 한다고 생각합니다.

@mlc-mlapis 다른 구성 요소의 이름이 같은 경우를 의미합니까? 첫 번째 일치 항목 또는 일치 항목이 여러 개인 경우 오류입니다. 항목 구성 요소 이름이 고유해야 한다는 요구 사항에 따라 생활할 수 있습니다.

@broweratcognitecdotcom 네 안녕하세요. 일반 원칙에 대해 이야기하려면 모든 변형을 다루어야 하기 때문입니다.

@mlc-mlapis 많은 사람들이 극복하고 싶어하는 각도의 한계는 항목 구성 요소가 인스턴스화되고 앱에 의해서만 dom에 배치될 수 있다는 것입니다. 앱은 내가 지연 로드된 모듈로 가져오는 모듈이 사용하는 대화 상자에 대해 알 필요가 없습니다. 항목 구성 요소의 현재 개념은 각도의 모듈식 패턴을 깨뜨립니다.

Ivy entryComponents가 있는 AFAIK는 더 이상 필요하지 않습니다. 맞죠? 구성 요소에는 지역성이 있으므로 동적으로 가져오기만 하면 항상 작동합니까?

@Airblader 당신이 옳습니다. 우리는 알고 있습니다. 그것은 역사에 대한 작은 회상이었습니다. 😄

여전히 이 문제로 어려움을 겪고 있는 사람들을 위해 실제로 작동하는 솔루션이 있습니다. https://github.com/angular/angular/issues/14324#issuecomment -481898762

이 문제에 대한 패키지를 게시합니다. jonrimmer의 일부 코드 사본.
Angular 9에는 문제가 없는 것 같습니다. 필요한 경우 지금 수정하세요. @aiao/lazy-component 를 사용할 수 있습니다.
여기에 샘플 코드
https://github.com/aiao-io/aiao/tree/master/integration/lazy-component

나는 이것이 아이비를 실행하는 Angular v9에서 수정되었다고 생각합니다. 여전히 유사한 문제에 직면하는 사람이 있으면 최소한의 재현 시나리오로 새 문제를 여십시오. 씽크스!

이 문제는 활동이 없어 자동으로 잠겼습니다.
유사하거나 관련된 문제가 발생하면 새 문제를 제출하십시오.

자동 대화 잠금 정책 에 대해 자세히 알아보세요.

<sub>_이 작업은 봇에 의해 자동으로 수행되었습니다._</sub>