Angular 버전 15로 업그레이드

Sterling Store Engagement 이 Angular 버전 15로 업그레이드되었습니다. 확장을 Anangular 버전 15로 마이그레이션했는지 확인하십시오.

시작하기 전에

23.1.3.2-10.0.2303.2 DTK의 Anangular 버전 13작업공간이 있어야 합니다.
node.js 버전 14.19.0에 있는지 확인하십시오.

태스크 정보

마이그레이션 활동은 2단계프로세스입니다. 먼저 Anangular 버전 13에서 14로 마이그레이션한 후 버전 14에서 15로 마이그레이션해야 합니다.

프로시저

<WORKSPACE>/store-frontend-src 폴더에서 모든 명령을 실행하십시오.

다음 명령을 실행하여 Angular core 및 cli 를 버전 14로 업그레이드하십시오.
```
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
```
다음 명령을 실행하여 @messageformat/core 버전이 3.1.0 인 종속성을 추가하십시오.
```
yarn add -W @messageformat/core@3.1.0
```
다음 명령을 실행하여 종속성 single-spa-angular 을 버전 7.1.0 으로 업데이트하십시오.
```
yarn upgrade single-spa-angular@7.1.0
```
다음 명령을 실행하여 devDependency, @angular-builders/custom-webpack 를 버전 14.1.0 으로 업데이트하십시오.
```
yarn upgrade @angular-builders/custom-webpack@14.1.0 --dev
```
node.js 버전을 다운로드하여 설치 16.4.0.
1. PATH 환경 변수에서 /path/to/nodejs-16.14.0/bin를 업데이트하십시오.
2. 다음 명령을 실행하여 노드 버전을 확인하십시오.
```
node -v
```
다음 명령을 실행하여 글로벌로 yarn 버전 1.22.5 를 설치하십시오.
```
npm install --global yarn
```
다음 명령을 실행하여 Lerna 를 글로벌 모듈로 설치하십시오.
```
npm install -g lerna@4.0.0
```

다음 test.ts 파일을 작성하고 파일을 extensions/features/override-component/src/에 복사하십시오. test.ts 파일은 각도 업그레이드 스크립트를 성공적으로 실행하는 데 중요합니다.

/*******************************************************************************
* IBM Confidential
* IBM® Sterling Order Management System
Software (5737-D18)
* IBM Sterling Order Management System
Software (5725-D10)
* (C) Copyright IBM Corp. 2022
******************************************************************************/
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);

/extensions/libs/styles/package.json 및 /packages/libs/styles/package.json에 있는 스타일 라이브러리의 devDependencies 를 대체하십시오.

"devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "12.1.1",
    "autoprefixer": "^9.0.0",
    "breakpoint-sass": "^2.7.1",
    "css-loader": "^2.0.0",
    "cssnano": "^4.0.5",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "resolve-url-loader": "^5.0.0",
    "sass-loader": "13.2.2",
    "style-loader": "^0.23.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.9.2"
  },

store-frontend-src에 있는 yarn.lock 파일을 삭제하십시오.
다음 명령을 실행하여 devDependencies 를 설치하십시오.
```
yarn bootstrap
```
다음 명령을 실행하여 Angular core 및 cli 를 버전 15로 업그레이드하십시오.
```
ng update @angular/core@15 @angular/cli@15 --allow-dirty --force
```
해당 명령을 실행하여 다음 종속 항목을 업데이트하십시오.
- 다음 명령을 실행하여 ngx-translate-messageformat-compiler 를 6.2.0 으로 업데이트하십시오.
```
yarn upgrade ngx-translate-messageformat-compiler@6.2.0
```
- 다음 명령을 실행하여 single-spa-angular 를 8.1.0 으로 업데이트하십시오.
```
yarn upgrade single-spa-angular@8.1.0
```
- 다음 명령을 실행하여 @carbon/charts를 1.7.6 으로 업데이트하십시오.
```
yarn upgrade @carbon/charts@1.7.6
```
- 다음 명령을 실행하여 @carbon/charts-angular 를 1.7.6 으로 업데이트하십시오.
```
yarn upgrade @carbon/charts-angular@1.7.6
```
다음 명령을 실행하여 devDependency 및 @angular-builders/custom-webpack 를 버전 15.0.0 으로 업데이트하십시오.
```
yarn upgrade @angular-builders/custom-webpack@15.0.0 --dev
```
다음 명령을 실행하여 애플리케이션을 시작하고 사용자 정의 화면이 제대로 작동하는지 유효성 검증하십시오.
```
yarn start-app
```
이 명령을 실행할 때 유형 검사와 관련된 오류가 표시되면 확장 코드를 수정하여 변수의 적절한 유형을 정의하십시오.
모든 확장 애플리케이션의 package.json 에 있는 build-app:extension 명령은 구성 인수를 고려하여 수정해야 합니다. 예를 들어, "build-app:extension": "ng build override-component --prod" 를 "build-app:extension": "ng build override-component --configuration production" 로 변경해야 합니다.
23.2.6.0-10.0.2306.0 DTK에서 새 작업공간을 설정하십시오.
1. 이전 작업공간에서 새 작업공간으로 angular.json 을 복사하십시오.
2. 이전 작업공간에서 새 작업공간으로 마이그레이션된 확장을 복사하십시오.
3. 다음 명령을 다시 실행하여 확장을 테스트하십시오.
```
yarn bootstrap
```
```
yarn start-app
```
참고:
- 최신 DTK에서 extensions/features/override-component 및 extensions/features/override-modals 에 있는 override-component및 override-mo달 애플리케이션의 src/app/app.component.ts 컨텐츠를 복사하거나 대체하십시오.
- Angular 버전 13이 더 이상 지원되지 않으므로 사용자 인터페이스 사용자 정의를 최신 또는 지원되는 Anangular 버전으로 업그레이드해야 합니다. 자세한 내용은 Angular 버전 관리 및 릴리스를 참조하세요.
- Angular 버전 15로 마이그레이션할 수 없지만 Anangular 13에서 확장을 수정하려는 경우, 이전 23.1.3.1-10.0.2303.2 DTK로 사용자 정의를 계속 빌드할 수 있습니다. 최신 기능, 개선사항 및 수정사항을 가져오려면 Anangular 버전 15로 업그레이드해야 합니다.