微前端實作

1.參考 https://www.facebook.com/watch/?extid=CL-UNK-UNK-UNK-AN_GK0T-GK1C&v=283678740269320

講義

微前端_Angular.docx

指令

ng new --create-application=false mfdemo1
cd mfdemo1
ng g application mfdemo1 --routing --style=css

ng g application mf-element1 --routing=false --style=css
ng add @angular/elements --project=mf-element1
ng add ngx-build-plus --project=mf-element1

package.json

加上此兩項
"build:mfdemo1": "ng build --project=mfdemo1 --prod --output-hashing=none",
"build:mf-element1": "ng build --project=mf-element1 --prod --output-hashing=none --single-bundle",

執行build

npm run-script
npm run-script build:mf-element1
npm run-script build:mfdemo1

package.json

"build:mf-element1:deploy": "cp dist/mf-element1/main.js dist/mfdemo1/mf-element1.js && cp dist/mf-element1/polyfills.js dist/mfdemo1/mf-polyfills.js",
"serve:mfdemo1": "cd dist/mfdemo1 && lite-server",

執行build

npm run-script build:mf-element1:deploy

copy dist/mf-element1/main.js dist/mfdemo1/mf-element1.js
copy dist/mf-element1/polyfills.js dist/mfdemo1/mf-polyfills.js

出現錯誤npm run build 時報 cp 不是内部命令之錯誤

要用gitbash https://blog.csdn.net/Luzahngfeng/article/details/106999573

執行

npm install lite-server
npm run-script serve:mfdemo1

2.程式開發歷程

https://github.com/yahuihuang/microweb_mfdemo1