모놀리식에서 마이크로 프론트엔드로 - 2부

목차

React 애플리케이션 마이그레이션

단일 스파 애플리케이션으로 마이그레이션

npm i single-spa single-spa-react
// or with yarn
yarn add single-spa single-spa-react

touch src/root.app.js

추가 구성

이 방법을 사용한 마이그레이션의 이점

같은 스크립트를 사용하여 애플리케이션을 실행할 수 있습니다npm start.

Migrating Angular Application

To migrate any existing Angular application I followed this documentation from single-spa I am assuming you already have an existing Angular application.
in my case, I am using Angular version 10

• Inside your root folder run the following command

ng add single-spa-angular

According to single-spa documentation, this command will:

• Install single-spa-angular.
• Generate a main.single-spa.ts in your project src/.
• Generate single-spa-props.ts in src/single-spa/.
• Generate asset-url.ts in src/single-spa/.
• Generate an EmptyRouteComponent in src/app/empty-route/, to be used in app-routing.module.ts.
• Add an npm script npm run build:single-spa.
• Add an npm script npm run serve:single-spa.

and also will:

• Add single-spa as a dependency, you will need to install it, as it not installed by default, it will be only added to your package.json, you can install it manually

npm i single-spa

or in your root folder where your package.json located run

npm i

which will refresh your dependencies tree and install any missing package.

• Generate extra-webpack.config.js
• Update build option inside angular.json and use @angular-builders/custom-webpack instead of @angular-devkit/build-angular you will need to install other dependencies by running

npm i @angular-builders/custom-webpack
npm i @types/[email protected] --saveDev

Extra Steps to complete the migration

Some of these steps are not documented in the single-spa documentation, and I figured it out while I was migrating the application

• Inside app.module.ts file

import {APP_BASE_HREF} from '@angular/common';

and add this object to the providers array

{provide: APP_BASE_HREF, useValue: '/'}

• Inside tsconfig.app.json, add node to types array "types": ["node"]

• In package.json, --deploy-url flag should be set to the host URL, In order for the webpack public path to be correctly set for your assets, see this Stack Overflow answer .

The result of this migration is a compiled JS file. After finishing the migration you can run the Angular application using this command

npm run serve:single-spa:angular-app

Which will start a dev server that is serving your js file, which will be located in http://localhost:4200/main.js

Conclusion

지금까지 한 일:

이 Githubrepo에서 완전한 작업 솔루션을 찾을 수 있으며 게시된 각 부분에 따라 업데이트됩니다.

다음 파트에서는 ​​루트 구성 파일에 Angular 애플리케이션을 등록하는 방법에 대해 자세히 설명합니다.