Angular 14微前端项目构建

前景知识命令

How to create a new remote using Angular CLI? (Webpack 5 Module Federation micro frontends)

ng cli
ng new
ng generate
ng new dashboard --create-application=false
ng generate application dashboard
ng new icrm-regulatory-mansement-dashboard-ui --create-application=false 
dashboard: {
	type: 'module',
    remoteEntry: 'http://localhost:5010/remoteEntry.js',
    exposedModule: './web-components'
}

新建一个空的angular项目工作域

ng new mini-ui --create-application=false

新建子应用项目

ng g application main
ng g application mfe1

新建一个library项目

ng g library shared-lib

关联模块的处理

安装自定义构造器

npm i @angular-architects/module-federation -D 

//初始化主项目
 ng g @angular-architects/module-federation:init --project main --port 4200 --type host
//初始化远端项目
 ng g @angular-architects/module-federation:init --project mfe1 --port 4201 --type remote
//安装加初始化一步到位
 ng add @angular-architects/module-federation --project main --port 4200 --type host
 ng add @angular-architects/module-federation --project mfe1 --port 4201 --type remote

创建两个路由组件（主项目里面可以不指定组件）

ng g component home/home
ng g component not-found/not-found

在主应用中新建decl.d.ts文件

declare module 'mfe1/Module';

另外，我们需要告诉 webpack 所有以 开头的路径mfe1都指向另一个项目。这可以在生成的webpack.config.js：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'mfe1',

  exposes: {
    './Module': './projects/mfe1/src/app/flights/flights.module.ts',
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

指定项目创建组件

ng g component home/home --project mfe1

指定项目建立模块

ng g module flights --routing --project mfe1

创建指定项目的组件

ng g component flights/flights-search --project mfe1 
ng g component flights/lazy --project mfe1 

更新angular版本

// angular版本一定要14， 才可以启动项目
ng update @angular/core@14 @angular/cli@14

如果全局angular版本不高，就用这个以下版本，执行 npm i

{
  "name": "mini-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "run:all": "node node_modules/@angular-architects/module-federation/src/server/mf-dev-server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-architects/module-federation": "^14.3.9",
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "concurrently": "^5.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ng-packagr": "^14.0.0",
    "ngx-build-plus": "14.0.0",
    "protractor": "~7.0.0",
    "serve": "^11.3.2",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.7.3",
    "word-wrap": "^1.2.3"
  }
}

启动项目
ng serve main -o
ng serve mfe1 -o
npm run run:all main mfe1

学习地址

1. https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/

2. https://ronnieschaniel.com/angular/webpack-module-federation-in-angular/

3. https://dev.to/sbhuvane/micro-frontend-in-angular-using-module-federation-31om#:~:text=Step%201%3A%20Create%20mfe1%20application%20and%20home%20component,2%3A%20Create%20a%20new%20feature%20module%20under%20mfe1

4. https://segmentfault.com/a/1190000040275586?sort=votes

5. github-moduleFederation- webpack5模块联合