Claire's Blog

將產品發佈到正式環境 最簡單的方法是 將所有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綑綁在一起。 首先先安裝 然後建構應用程式 在dist生成綑綁包 運行管理器來生成這個被綑綁的檔案的分析圖 產生的圖如下： 善用效能觀察工具 首推的當然就是google chrome囉！ 這邊有相關的教學系列文：認識 Chrome 開發者工具 官網也有推薦使用WebPageTest 來衡量自己網頁的速度 伺服器啟用Routee功能的配置方法 Apache設定方式 添加一個重寫規則.htaccess…

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 Packages @angular/animations：網頁切換動畫效果 @angular/common： services, pipes, and directives等都在這邊 @angular/compiler：Angular的模板編譯器，在JIT @angular/core： 基本angular框架所需的功能如metadata decorators, Component, Directive, dependency injection,以及元件的lifecycle…

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 Compilation target Browser Server Compilation context Runtime Build Bundle size Huge (~1.2 MB) Smaller (~400…

什麼是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 – 通用服務器端組件。 @nguniversal/module-map-ngfactory-loader – 用於在服務器渲染的上下文中處理延遲加載。 @nguniversal/express-engine – 通用應用程序的快速引擎。 ts-loader – 傳輸服務器應用程序 使用下面指令安裝上面四個package 更新 AppModule 模組 修正預設AppModule中BrowserModule的匯入方式 根據使用者的瀏覽器來決定是否使用SSR（server-side rendering） 撰寫SSR 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 application必須在支援Service worker的Web瀏覽器中運行。 目前支持最新版本的Chrome和Firefox。其他瀏覽器的支援狀況如下圖（連結）： Service Worker 的生命週期 圖片來源：Browser push notifications using JavaScript 在創建新的應用程序時使用Service worker 將–service-worker標誌添加到ng new命令中：…

語法自動補完 自動完成可以通過在輸入時提供可能要填入的值讓我們選擇，以加速開發的速度，如下圖： 錯誤檢查 可以檢查像是模版變數是否在元件內有對應的變數供綁定 跳轉到模版變數或方法所指向的程式碼位置 單擊並按下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 Language Service了！ WebStorm 在package.json加上 然後執行 Sublime Text 在專案下執行下面兩個指令： 參考資料 VS Code Plugin for the Angular…