NgModule Angular 앱을 독립형 구성 요소로 변환

NgModule를 사용하는 Angular cli로 생성된 새로운 Angular 앱을 Standalone Component로 변환할 것입니다.

내Github 프로필에서 사용할 수 있는 코드입니다.

AppComponent를 독립형 구성 요소로 변환

독립형 구성 요소를 가지려면 standalone 값과 같이 @Component() 속성을 true 지시문에 전달하기만 하면 됩니다.

따라서 AppComponent는 다음과 같습니다.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<router-outlet></router-outlet>`,
  imports: [RouterModule],
})
export class AppComponent {}

참고

As we are using `router-outlet` component to out put the routed views, we need to import `RouterModule`.

Other dependencies should be imported too.

AppModule 제거

AppModule를 제거하려면 루트 초기화를 main.ts로 이동해야 합니다.

경로를 보다 깔끔하게 관리하기 위해 경로 구성의 첫 번째 계층을 내보내는 routes.ts라는 별도의 파일을 생성해 보겠습니다.

그리고 그것은 다음과 같아야합니다

import {Routes} from '@angular/router';

const routes: Routes = [
  {path: '', redirectTo: 'appointment', pathMatch: 'full'},
  {
    path: 'appointment',
    loadComponent: () =>
      import('./app/pages/appointment/appointment.page')
        .then(mod => mod.AppointmentPage)
  }
];

export default routes;

참고

보시다시피 여기서는 loadComponent 대신 loadChildren를 사용했습니다. 이는 AppointmentPage가 독립형 구성 요소이기 때문입니다.

main.ts 업데이트

이전에는 main.ts가 AppModule를 부트스트랩하는 역할을 담당했으며 그게 다였습니다!

그러나 이제 독립 실행형 AppComponent가 있으므로 애플리케이션을 부트스트랩하고 루트 공급자 모듈도 초기화해야 합니다. 예를 들어 RouterModule 를 가져오려는 경우 경로 구성을 전달하여 실제로 forRoot 메서드를 호출해야 합니다.

따라서 최종main.ts은 다음과 같습니다.

import {enableProdMode, importProvidersFrom} from '@angular/core';

import { environment } from './environments/environment';
import {bootstrapApplication} from '@angular/platform-browser';
import {AppComponent} from './app/app.component';
import {RouterModule} from '@angular/router';
import routes from './routes';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      RouterModule.forRoot(routes)
    )
  ]
})
  .catch(err => console.error(err));

그게 다야! 이제 Standalone Component를 기반으로 하는 Angular 애플리케이션이 있습니다.

시간 내 주셔서 감사합니다.

이 게시물이 마음에 드셨다면 에서 내 게시물을 좋아하실 것 같습니다.