Day 38 - Gặp lỗi khi lazy load component có dùng *ngIf hoặc cần import từ module khác about 100-days-of-angular HOT 6 CLOSED

hi @phongca22,
Cảm ơn bạn đã nhắc mình nhen, mình quên mất.
Với để rõ vấn đề, thì 2 ý bạn nói là 2 chuyện khác nhau:

1. Issue gặp lỗi khi dùng *ngIf trong dynamic component.
2. Mình quên xóa import 2 dynamic component trong app.module.ts

Đây là 2 issues hoàn toàn khác nhau.
Đầu tiên với cách fix issue 1 thì mình đã comment ở phía trên rồi. Cũng như a @trungk18 có bổ sung.
Còn với issue 2 thì trong step refactor cho Ivy. Mình quên xóa đi 2 components đã import vào ở những steps trước.

Hiện tại mình đã xóa đi rồi. Thanks bạn nhiều nhen. Mình sẽ update bài viết sau. Bạn có thể xem ở commit này.
januaryofmine/Dynamic-Component-Demo@8660f28

Code hiện tại ở app.module.ts không còn 2 components đó nữa:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { ExampleContainerComponent } from "./example-container/example-container.component";

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

from 100-days-of-angular.

@phongca22 Bạn nói đúng, như trong link của Khánh nếu import hai components vào module thì lazy load sẽ ko có giá trị gì nữa 😂 Để mình review với Khánh rồi update lại Day 38. Cảm ơn bạn đã góp ý nhé.

Để dùng các feature từ Angular khi lazy load component, bạn define thêm một module nữa ví dụ đặt tên là BasicAModule ở trong cùng một file với basic-a.component.ts. Code sẽ trông như thế này, mình test thử luôn cả FormControl cho double kill 🤣

<p>
basic-a works!
</p>
<div *ngIf="true">*ngIf</div>
<input [formControl]="control">

import { Component, OnInit, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-basic-a',
  templateUrl: './basic-a.component.html',
  styleUrls: ['./basic-a.component.css']
})
export class BasicAComponent implements OnInit {
  control = new FormControl();
  constructor() { }

  ngOnInit() {
  }

}

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [
    BasicAComponent
  ]
})
export class BasicAModule { 

}

Result như ở hình này

Chạy thử như ở đây nhé -> https://stackblitz.com/edit/angular-ivy-dynamic-component-with-module?file=src/app/basic-a/basic-a.component.ts

Bạn sẽ thắc mắc là tại sao BasicAModule được define, nhưng ko được import vào đâu mà nó vẫn work đúng ko? Mình cũng ko biết nói tiếng Việt như nào, nhưng để hiểu kĩ hơn thì đọc thêm bài viết này nhé 😂

https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a

The way it works is that the Angular compiler analyzes your NgModules and figures out what components or directives are available to the component in its module scope. Once it has this data, it adds it to the component definition.

from 100-days-of-angular.

hi @phongca22,
Mình vừa xem lỗi này. Và có vẻ như đây là lỗi của version cũ của Ivy đó.
Mình có thử thêm *ngIf vào component demo của mình thử và vẫn work bình thường.
Bạn thử update Angular lên nhen.
Đây là link liên quan issue tương tự và đã được resolve:
angular/angular#32597

from 100-days-of-angular.

@januaryofmine dùng lazy load thì k cần import 2 component DynamicContentOneComponent và DynamicContentTwoComponent mới đúng chứ.
Theo như file này thì bạn đã declare cả 2 rồi nên khi gọi await import sẽ k fetch về nữa
https://github.com/januaryofmine/Dynamic-Component-Demo/blob/master/src/app/app.module.ts

from 100-days-of-angular.

@januaryofmine khi post issue này thì mình k test trên repo của bạn. Mình dùng trực tiếp Stackblitz để create project từ Angular 10. Nên bug mà bạn đề cập sẽ không hợp lý vì nó đang xảy ra trên Angular 8.
Mình có nhìn sơ qua app.module thì mới phát hiện ra issue 2.

Sau khi bạn fix issue 1, mình có check out và chạy thử thì vẫn lỗi.

Can't bind to 'ngIf' since it isn't a known property of 'p'

Repo của bạn: https://github.com/januaryofmine/Dynamic-Component-Demo

from 100-days-of-angular.

hi @phongca22,
Bạn thử update Angular trên máy bạn thử xem. Mình run vẫn bình thường. Không gặp issue này.

from 100-days-of-angular.