微前端 使用笔记

微前端 工具ngx-planet

项目流程

1、创建主项目

ng new main  

2、创建子项目

cd main
ng generate application first-app
ng generate application second-app

3、安装@worktile/planet （主应用，子应用都要）

npm i @worktile/planet --save
npm i @angular/cdk --save

主应用和子应用的appModule.ts中引用

import { NgxPlanetModule } from '@worktile/planet';

@NgModule({
  imports: [
    CommonModule,
    NgxPlanetModule
  ]
})
class AppModule {}

4、更改打包插件 【@angular-devkit/build-angular 更改为@angular-builders/custom-webpack】
因为主应用和子应用都是通过Webpack打包的，打包的版本依赖会有冲突，需要通过@angular-builders/custom-webpack插件设置扩展的Webpack配置runtimeChunk, 期望 Webpack 5 对于微前端支持的更好。

  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular-devkit/build-angular": "~0.900.0-rc.3",
	......
    "webpack-assets-manifest": "^3.1.1"
  }

更改配置（angular.json）：

//子应用
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": {
                "externals": "prepend"
              }
            },
            "outputPath": "dist/first-project",
            ...
            }
	 }
	 "serve": {
	          "builder": "@angular-builders/custom-webpack:dev-server",
	          "options": {
	            "browserTarget": "first-project:build",
	            "port": 4201,
	            "vendorChunk": false
	          },
	}
//主应用
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies&#