Standalone

Standalone 방식은 v14에서 실험적으로 도입되었다가 v16부터 정식 도입되었습니다.

NgModule에서 StandAlone 으로 변경

Module, component, 은 필요한 component에서 직접 적용

기존에는 module에서 모든 module, compoent, service등을 불러와서 정의하였고 이곳에 정의된 것은 하위에서도 상속되었다면 standalone에서는 각각 모듈을 불러들영서 정의

@Component({
  standalone: true,
  imports: [TranslateModule, otherComponent],
  ..........
})

Service

Service 는 app.config.ts에 정의한다.

• app.config.ts

import { MyService } from './services/my.service';

export const appConfig: ApplicationConfig = {
  providers: [
    ..........
    MyService
  ]
};

Service provideIn 'root'로 정의했을 경우는 별도 정의 없이 바로 다른 서비스나 컴포넌트에서 사용가능하다.

@Injectable({
  providedIn: 'root',
})
export class MyService {
}

Animation

• app.config.ts

import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    ..........
    provideAnimations(),
  ]
};