최신 Angular 버전으로 사용자 정의 업데이트

새로운 Angular 버전이 출시되면, Order Hub도 최신 버전으로 업그레이드됩니다. 이러한 변화는 설치, 시작, 빌드 시간의 단축과 같은 개선을 가져옵니다. 이전 버전의 Angular를 사용 중인 경우, 새로운 기능을 활용하려면 사용자 지정 애플리케이션을 최신 Angular 버전으로 마이그레이션해야 합니다. 이 새로운 애플리케이션은 모노레포 또는 표준 앵귤러 저장소에 저장할 수 있습니다.

태스크 정보

사용자 설정이 제대로 작동하도록 하려면 사용자 설정을 순차적으로( v16, v17, v18 순으로 업데이트) 단계적으로 업데이트해야 합니다. 각 Angular 버전 업그레이드 시, package.json 에 속하지 않지만 업그레이드에 필요한 종속성을 포함하는 패키지( @angular/material 또는 @angular/cdk )를 명령에서 제거하십시오.

프로젝트가 Lerna 프로젝트가 아닌 경우 마이그레이션 단계가 다를 수 있습니다. 이 경우, 먼저 Angular 버전을 업그레이드한 다음, material과 다른 의존성 요소들을 업그레이드합니다.

프로시저

다음과 같이 Angular v16 로 업데이트하십시오.
피어 종속성과 공통 구성 요소 패키지의 비호환성으로 인해 Angular v16 로의 업데이트가 강제됩니다.
독립형 Angular 프로젝트의 경우
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@16 @angular/cli@16 --force
yarn ng update @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
참고 : 독립형 프로젝트의 업그레이드에 @angular-builders/custom-webpack@16 를 포함시키지 마십시오. 이 명령은 두 개의 명령으로 나뉩니다.
단일 저장소에 대해
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@16 @angular/cli@16 @angular-builders/custom-webpack@16 @angular/cdk@16 @angular-eslint/schematics@16 @angular/material@16 --force
```
앵귤러 업데이트 가이드를 통해 업데이트를 확인하십시오.
다음과 같이 Angular v17 로 업데이트하십시오.
package.json 파일에 ' @angular-devkit/build-ng-packagr ' 패키지가 존재한다면, 그것을 제거하십시오.
독립형 Angular 프로젝트의 경우
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@17 @angular/cli@17 --force
yarn ng update @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
```
단일 저장소에 대해
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@17 @angular/cli@17 @angular-builders/custom-webpack@17 @angular/cdk@17 @angular-eslint/schematics@17 @angular/material@17 --force
```
앵귤러 업데이트 가이드를 통해 업데이트를 확인하십시오.
다음과 같이 Angular v18 로 업데이트하십시오.
독립형 Angular 프로젝트의 경우
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@18 @angular/cli@18 --force
yarn ng @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
단일 저장소에 대해
다음 명령을 입력하십시오.
```
yarn ng update @angular/core@18 @angular/cli@18 @angular-builders/custom-webpack@18 @angular/cdk@18 @angular-eslint/schematics@18 @angular/material@18 --force
```
참고 : 이 명령을 실행하면 애플리케이션 빌더(use-application-builder)를 사용하라는 메시지가 표시됩니다. 모드포를 업그레이드하는 경우, Enter를 클릭하여 계속 진행하십시오. @angular-devkit/build-angular:browser-esbuild 나 @angular-devkit/build-angular:browser 빌더를 사용하지 마십시오.
앵귤러 업데이트 가이드를 통해 업데이트를 확인하십시오.

다음 수행 작업

최신 Angular 릴리스로 업데이트를 완료한 후 다음 단계를 수행하십시오.

변경된 모듈 파일은 반드시 린트(lint)를 실행해야 합니다. 도식에서 제대로 제거되지 않았다면, 수동으로 HttpClientModule 를 제거하십시오.

.eslintrc.json 파일을 업데이트하십시오. 플러그인 확장 프로그램 두 개를 제거하고 플러그인 확장 프로그램을 추가합니다.

"extends": [
  "plugin:@angular-eslint/ng-cli-compat",                      // - Remove
  "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",   // - Remove
  "plugin:@angular-eslint/recommended",                        // + Add
  "plugin:@angular-eslint/template/process-inline-templates"   // No Change
],

@types/topojson-specification 종속성을 설치하려면 다음 명령을 입력하십시오.
```
yarn add -D @types/topojson-specification ## (include `-W` for lerna monorepo)
```
최신 버전을 사용하려면 프로젝트의 package.json 파일에 있는 모든 @buc 네임스페이스 패키지를 변경하십시오. orderhub-code/lib 파일에 있는 내용에 따라 버전을 최신 버전으로 변경하십시오.