standalone 관련

 

* 영어표기가 디폴트, 이하 한글표기

* angular 15.2.0 버전 이상

---

컴포넌트가 뭔가요?

    - 재사용 가능한 웹의 구성요소

     - 참고 (https://www.remain.co.kr/page/designsystem/component-understanding.php)

 

---

 

 

 

angular 는 컴포넌트 방식이다.

기본적으로 부모 - 자식간의 종속 관계를 갖는다.

app.module 에서 각각의 컴포넌트들 뿐만 아니라

PrimeNg 등의 다양한 라이브러리도 import 하여 사용할 수 있다.

 

 

 

-참고 (https://ksrae.github.io/angular/standalone-route/)

그런데 버전이 업그레이드 되면서 standalone 옵션이 추가되었다.

말 그대로 혼자 독립할 수 있는 속성이다.

위 참고자료에 의하면 Angular 애플리케이션의 초기 로딩 속도 최적화 및

코드 구조를 간소화 등의 여러 장점을 가지고 있다.

 

 

그런데 라이브러리를 많이 사용할 경우,

특히 primeNg는 필요한 기능을 모두 import 해야하기 때문에 오히려 불편했다.

엄청난 성능을 필요로 하는 것이 아니기에 더더욱 standalone 옵션이 불필요 하다고 느꼈다.

 

그래서 소개하는 standalone 옵션 끄는 방법 입니다.

 

 

 

                                                                       1. 프로젝트 생성 시                                                                         

ng new --standalone=false

    - 나중에 standalone  옵션이 적용된 컴포넌트 또한 사용할 수 있다.

 

 

 

 

                                    2. 이미 standalone 옵션을 적용하여 컴포넌트를 생성한 경우                                

      1). standalone 과 import 지우기

 

 

 

      2). app.module.ts 생성

import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { BrowserModule } from "@angular/platform-browser"; import { CommonModule } from "@angular/common"; import { RouterModule } from "@angular/router"; @NgModule({   //컴포넌트   declarations: [     AppComponent,   ],   //angular 모듈    imports: [     BrowserModule,     RouterModule,   //라우터     CommonModule   ],   schemas: [   ],   //임의 추가 서비스   providers: [   ],   bootstrap: [AppComponent] }) export class AppModule { }

 

 

       3). main.ts 수정

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; platformBrowserDynamic().bootstrapModule(AppModule, {   ngZoneEventCoalescing: true })   .catch(err => console.error(err));