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'
}
ng new mini-ui --create-application=false
ng g application main
ng g application mfe1
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版本一定要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
https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/
https://ronnieschaniel.com/angular/webpack-module-federation-in-angular/
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
https://segmentfault.com/a/1190000040275586?sort=votes
github-moduleFederation- webpack5模块联合