# Angular Portal ## 快速上手 --- ## 今早主線任務 🔥 ### 請大家建立一個新的APP ### 並基於微前端的架構，註冊到 Portal 的路由中！ ---- ### [補充] 微前端架構的優勢 💪 - 支援分散式部署、提供獨立的服務 - 團隊自己就可以進行迭代和更新 - 只延遲加載必要的資源( js, css, json...) - 如果真的有很多需要並發`Request`的情況時，建議將網站升級至 [HTTP/2](https://developers.google.com/web/fundamentals/performance/http2)。 - 一樣可以基於SPA的架構，保有完整的路由系統 --- # 環境建置 ---- ## Angular CLI 版本 ```shell npm install @angular/cli@9.1.1 --global npm version ``` #### 🌟 建議版本 >= 9.1.1 < 10.0.0 ---- ## Angular CLI 版本  --- ## 先 git clone Portal 專案 ```shell git clone http://172.17.241.115/DefaultCollection/Development%20Plateform/_git/Angular_Portal cd fubon-portal-ng npm install ``` #### 建議大家可以現在就做這件事情！ #### 因為 **npm install** 需要一些時間 😉 --- ## 建立 `ng-sys1` 系統 ---- ## 先透過 ng new 指令 ## 建立專案 ```shell ng new ng-sys1 --style=scss --routing ``` ---- ## 先在專案內加入 .npmrc ``` strict-ssl=false registry=https://registry.npmjs.org/ @fubon:registry=https://172.17.241.115/DefaultCollection/_packaging/Fubon/npm/registry/ ; Treat this auth token like a password. Do not share it with anyone, including Microsoft support. This token expires on or before 2020/8/10. ; begin auth token //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/registry/:username=Fubon //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/registry/:_password=Y2JzZXI0Y2JldnhkNzVpMzNuYmZ1Y3ZqaGVwaHBnM2NncmczNjZhdGd2eTJ5eHVnNDVwcQ== //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/registry/:email=npm requires email to be set but doesn't use the value //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/:username=Fubon //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/:_password=Y2JzZXI0Y2JldnhkNzVpMzNuYmZ1Y3ZqaGVwaHBnM2NncmczNjZhdGd2eTJ5eHVnNDVwcQ== //172.17.241.115/DefaultCollection/_packaging/Fubon/npm/:email=npm requires email to be set but doesn't use the value ; end auth token ``` ---- ## 先在專案內加入 .npmrc  ---- ## 透過 ng add 指令 ## 取得專案範本 ```shell ng add @fubon/shared ``` ---- ## 透過 ng add 指令 ## 取得專案範本  ---- ## 啟動 ng-sys1 ```shell npm start ``` ---- ## 啟動 ng-sys1  ---- ## 啟動 ng-sys1  ---- ## 啟動 ng-sys1 #### [🔗http://localhost:3002/static/ng-sys1/manifest.json](http://localhost:3002/static/ng-sys1/manifest.json)  --- ## 調整 Portal 設置 ---- ## proxy-conf.json ```json PROXY_CONFIG['/static/ng-sys1'] = { target: 'http://localhost:3002', secure: false, changeOrigin: true }; ``` ---- ## system-routers.ts ```ts { path: 'ng-sys1', component: EmptyComponent, children: [ { path: '**', component: EmptyComponent } ] } ``` ---- ## 調整 Portal 設置  --- ## 啟動 Portal - 先建置必要的 api-interfaces ```shell npm run libs:api-interfaces:build ``` - 啟動 Portal 本身 ```shell npm run portal:serve ``` - [🔗http://localhost:3000](http://localhost:3000) --- ## 登入 Portal #### 🙍 **test_it** #### 🔑 **test_it** <BR /> <BR /> ###### 感謝士敬、硯巽提供的測試帳號和資料🙏 --- ## 設定 ng-sys1 的路由配置 ### 建立路由用 component #### hello & hello2 ```shell ng g c pages/hello ng g c pages/hello2 ``` ---- ## 設定 ng-sys1 的路由配置 ### app-routing.module.ts ```ts [ { path: 'hello', component: HelloComponent }, { path: 'hello2', component: Hello2Component } ] ``` --- ## 疑難雜症 - 確認 **環境變數** - C:\Users\your_username\AppData\Roaming\npm - 確認 .npmrc (使用者環境) - C:\Users\your_username\.npmrc - 確認