將產品發佈到正式環境 最簡單的方法是 將所有dist/資料夾底下的文件複製一份到伺服器上 如果想順帶設置base href至<base href=”/my/app/”>，則可加下面參數 若有使用Router功能，將所有找不到的頁面都導向index.html（下面會有詳細介紹） 優化我們的Angular專案 加上–prod參數，會能輸出優化過的檔案 這個參數會為我們的專案做這些事情 改使用AOT編譯：預先編譯而不是用JIT的方式 開啟production mode: 可以讓網站執行更快，等同於下這個參數–environment=prod Bundling: 將所有的所使用的library和許多應用綁在一起 縮小檔案：刪除多餘的空白，註釋和可選的令牌。 Uglification：將變數名稱做混淆的動作。 消除死代碼：刪除未引用的模塊和很多未使用的代碼 添加–build-optimizer可進一步減少檔案的大小 如果要使用惰性加載去載入部份的JS檔案，記得不要在需要被首先加載的模組裡面import要被惰性加載的元件，否則會在一開始就被載入。 AOT預設在編譯時會對ngModules做識別並且做惰性加載的設定。 善用bundles工具 source-map-explorer是一個很棒的bundles工具。可以將許多的js綑綁在一起。 首先先安裝…

TypeScript配置 TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript，得先用tsc編譯器轉譯(transpile)成JavaScript，而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json 這邊是官方關於此配置文件的詳細說明：tsconfig.json tsconfig.json 下面為一個tsconfig.json的範例 關於設定檔裡的noImplicitAny意思是是否不允許typescript編譯時隱性將沒有設定類型的變數設定為any。如果設定為true的話，如果typescript裡面有沒有設定類型的變數則會產生錯誤訊息。當這個值設定為true時，記得要將suppressImplicitAnyIndexErrors也設定為true，不然會發生隱式報錯。 lib.d.ts 文件 TypeScript有一個特殊的聲明文件lib.d.ts。包含了JavaScript運行庫和DOM的各種常用Javascript環境聲明。 基於–target，TypeScript添加額外的環境聲明，例如如果目標為es6時將添加Promise。

安裝NPM環境 Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。 因此Node.js和npm是做Angular開發的基礎。 這邊是Node.js下載連結：Downloads NPM 如果在電腦中需要同時運行多個不同版本的npm，可以使用nvm來管理他們：nvm package.json設定 這邊有詳細的說明文檔：Specifics of npm’s package.json handling 下面是一個預設CLI設定檔的範例 這邊說明幾個比較重要的設定值： script: 是一個script commands的列表，這些script commands會在生命週期中的不同時間運行。其內容的key是生命週期事件，value是要執行的命令。可獲得的生命周期列表：請見此 dependencies: 要運行這個應用程式必要一定要安裝的package devDependencies: 只有在開發時需要用到的功能則寫在這邊，當別人要導入我們所開發的專案時，不用一定要下載完整的devDependencies內容。 在dependencies需載入的Angular…

Ahead-of-Time (AOT)編譯 在Angular 2 中有兩種編譯模式： JIT(Just-in-Time)：Angular預設是使用 Just-in-Time (JIT) 即時編譯，等瀏覽器下載完 *.js 檔案後，會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼，接著才會渲染畫面。 AOT(Ahead-of-Time)：在程式發佈之前就透過 Angular Compiler 進行編譯，所以瀏覽器下載完的 *.js 檔案，就可以直接被執行，然後渲染畫面。 下表為這兩種佈署方式的簡單比較表： Characteristic JiT AoT…

什麼是Angular Universal 下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明 雖然Angular是一種構建Web應用的強大方式，但是長期以來，開發人員都知道它在SEO和可訪問性方面的限制。當然，Google的爬蟲能夠執行JavaScript，但是它並不是唯一的爬蟲方案。例如，在將一個連結提交給Slack之後，它的爬蟲會抓取一個預覽，但是並不會執行JavaScript，所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題，Jeff Whelpley和Patrick Stapleton開發了Angular Universal，它允許在服務端進行渲染。 從上面的文字可以了解，Angular Universal可以在server side預先對網頁模版做處理，變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面，也可以事先產生好靜態檔案以供未來使用。 Angular Universal的主要目的有以下三個 方便網路爬蟲（SEO） 提高在手機裝置和效能較差的設備上的性能表現 快速顯示第一頁 Google，Bing，Facebook，Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引，並在搜索內容。Angular Universal可以生成應用程序的靜態版本，無需JavaScript即可輕鬆搜索，鏈接和導航。這也使網站預覽可用，因為每個URL返回一個完全呈現的頁面。 啟用網頁抓取工具通常被稱為 搜索引擎優化（SEO）。 安裝Angular Universal所需工具 @angular/platform-server – 通用服務器端組件。…

關於Service worker Angular在第5版新推出了支援Service worker的功能，主要是可以讓Angular更能符合PWA的概念。 所謂PWA（Progressive Web App）是希望能夠讓Web application盡可能的在各種環境（網路環境、手機作業系統等）下都能順暢且不減功能性的運作。 例如要可以支援離線功能，在使用 App 收信、寫信、刪除信件等動作，都需要將結果丟回伺服器儲存，但在某些環境下並無法一直使用網路連線，因此必須使用一種機制，讓我們仍能順暢的使用這些功能，待網路正常連線，再將剛才所執行的一切動作反應回伺服器。 而Service Worker可以讓Web application做到上面這樣的事情。 使用Service worker所需環境 要使用Angular Service worker，您必須具有以下Angular和CLI版本： Angular 5.0.0或更高版本。 Angular CLI 1.6.0或更高版本。 Web…

語法自動補完 自動完成可以通過在輸入時提供可能要填入的值讓我們選擇，以加速開發的速度，如下圖： 錯誤檢查 可以檢查像是模版變數是否在元件內有對應的變數供綁定 跳轉到模版變數或方法所指向的程式碼位置 單擊並按下F12進入相對應的變數位置 可使用Angular Language Service的IDE Visual Studio Code 1. 直接在VSCode的擴充功能裡下載Angular language service 2. 自行使用VSIX安裝 打開VSCode，先安裝.VSIX 下載附加元件：直接按此下載 / 原始專案位置：vscode-ng-language-service 下載之後，按下command+shift+P來打開指令列，並輸入 然後選擇剛剛所下載的檔案，Reload。 接著你的VSCode就可以支援Angular…

Angular i18n可做到的事 以本地格式顯示日期，數量，百分比和貨幣。 在組件模板中翻譯文字。 翻譯單數和複數 翻譯HTML屬性的替代文字 可以透過CLI來產生XLS檔案，並透過XLS檔案來設定多語系字串，接著使用下面的字串來產生網站檔案： 假如是使用JIT的方式去佈暑網站，則也要在頁面設定LOCALE_ID的值如下： 從上面的範例可以看出，Angular多語系的實作方式是讓每個語言獨立一個 index.html 版本。這樣優點是網站瀏覽較為快速，缺點則是修改時要重新REBULE的工程較大。 此連結有Angular所有支援的語系：Angular repository 在angular5的地區設定是使用BCP47，這個規格隨著時間而有些微改變如下： LOCALE NAME OLD LOCALE ID NEW LOCALE ID Indonesian in id…

設定Router Module 若我們的Router設定較為複雜時，可將Router配置為一個Router Module。 首先，設定一個路由模組app-routing.module.ts 多層的Router Module 我們在做網站時，會希望每個模組專注在自己的功能上，Router也不例外。因此像英雄列表的元件，如果希望點選列表內容，可以進入該英雄詳細資料的頁面如下： 首先，創建一個pre-routing檔案heroes.module.ts 新增一個heroes-routing.module.ts，內容如下： 將Router Module的檔案放在與其伴隨的模組在相同的文件夾中。這兩個heroes-routing.module.ts和heroes.module.ts在同一個src/app/heroes文件夾中。 考慮給每個功能模組自己的路由配置文件。當功能路線很簡單時，看起來可能會過早。但是，路線趨於變得更加複雜，模式的一致性會隨著時間的推移而得到回報。 接著在heroes.module.ts裡導入HeroRoutingModule path: ‘heroes’目前定義在兩個地方：HeroesRoutingModule和AppRoutingModule。 由功能模塊提供的route由Router合併到其導入的模塊的route中。這使您可以繼續定義功能模塊路由，而無需修改主路由配置。 如果不想設定兩次相同的資料，可以把舊的Router設定移除 這邊要注意的是模塊導入順序很重要 當所有的路由都在AppRoutingModule時，我們將通用path: ‘**’符號的設定放在路由/heroes的後面，這樣路由器才有機會匹配一個URL到/heroes路由，而不會先被AppRoutingModule的這個設定匹配走。 如果Routing在兩個不同的模組內，也是要先載入HeroesModule再載入AppRoutingModule，這樣才會使用HeroesModule裡的路由設定而不會因為在AppRoutingModule找到匹配的通用符號而顯示PageNotFoundComponent。 如果將import的順序倒過來，則會顯示PageNotFoundComponent的頁面。 在程式裡去操控路由器 使用this.router.navigate來在程式內操作路由工作…

什麼是Routing? Routing意指路由器，也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時，會有下列的實踐流程 1. 套用轉址設定（讓伺服器不去真正網址所在的位置去讀取資料，而改由Routing來決定現在要顯示什麼畫面） 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作，由這個畫面切換至另一個畫面 在Angular裡，最佳做法是將載入和設定Routing放在一個top-level的模組內，並於AppModule內來import所有的路由資訊。 按照慣例，模組AppRoutingModule和app-routing.module.ts會放在src/app裡 Angular的Routing 產生的虛擬 URL，並不是真的存在於檔案系統裡，因此需要伺服器能夠支援，否則重新整理時會出現404 not found。 設定base href Router使用history.pushState來進行導航。靠著pushState，可以讓瀏覽器網頁路徑看起來像是更換真實的網址。因此Angular APP內的網址可能與伺服器的網址無法區分。 我們需要添加元素到index.html讓pushState路由能夠生效。當引用CSS或JS檔案時應用base…