[morse]Angular compiler: ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 2.9 kB.

ng build --prod --aot



ERROR in budgets, maximum exceeded for initial. Budget 5 MB was exceeded by 2.9 kB.

Open angular.json file and find budgets keyword.

It should look like:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
   }
]

As you’ve probably guessed you can increase the maximumWarning value to prevent this warning, i.e.:

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", <===
      "maximumError": "5mb"
   }
]

[morse]Geolocation - 撰寫行動裝置上使用的 GPS APP

Geolocation API

https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

這個 API 可以使用 Angular 搭配 Ionic Ionic , 就可以撰寫行動裝置上使用的 GPS APP。

Document

• The geolocation object
• Describing a position
• Handling errors
• Geolocation Live Example
• Prompting for permission
• Browser compatibility
• See also

Related Topics

1. Interfaces

   1. Coordinates
   2. Geolocation
   3. Position
   4. PositionError
   5. PositionOptions
2. Properties

   1. Navigator.geolocation

getCurrentPosition()
獲取設備當前的位置

watchPosition()
這個方法是用來註冊一個處理的函式，當使用者的裝置位置更新時，這個函式所傳入的回呼函式就會自動被呼叫。你也可以選擇性的定義錯誤時那些錯誤回呼函式需要被呼叫。

clearWatch()
這個函式用來取消 watchPosition() 註冊的函式。

Coordinates
這個介面用來存取裝置的經緯度、速度以及這些數值的準確度。

Coordinates.latitude
唯讀，回傳一個十進位的 double 代表緯度

Coordinates.longitude 唯讀，回傳一個十進位的 double 代表經度

Coordinates.altitude 唯讀，回傳一個 double 代表距離海平面的高度，單位為公尺。如果無法提供這個值就傳回null

Coordinates.longitudeAccuracy
唯讀，回傳一個double代表高度的精準度，單位為公尺。如果無法提供這個值就傳回null

Coordinates.heading
唯讀，回傳一個double，代表裝置前進的方向，這個數值代表你偏離北方多少度，0度代表正北方，以順時針方向遞增，如果速度為0則此值NaN，如果無法提供值則傳回null。

Coordinates.speed
唯讀，回傳一個double代表速度，單位為公尺/秒，如果無法提供值則傳回null。

[morse]Angular CLI 初始使用者入門操作筆記

安裝

建議使用 Node.js 的 npm 套件管理工具來安裝 Angular CLI，請使用以下指令安裝：

npm install -g angular-cli

Angular CLI 需要 Node 4.X 和 NPM 3.X 以上的版本支援。

常用指令

• 預覽新專案：ng new AppName --routing --skip-tests --style=scss -d
• 建立新專案：ng new AppName --routing --skip-tests --style=scss
• 建立 PWA 專案：ng new AppName --routing --skip-tests --style=scss --service-worker
• 啟動：ng serve

專案升級步驟

參考：簡介 Angular 4 如何升級至 Angular 5 最新版本

1. 查詢最新版的版本
   • ng -v 查詢目前 Angular CLI 版本
   • npm show @angular/core@* version --json 查詢 Angular 版本
2. 更新 Angular
   • 修正 package.json 中 所有 @angular/* 套件版本至最新版，例 ^5.0.0
3. 更新相依套件
   • npm install @angular/cli@1.5
   • npm install typescript@2.4
   • npm install rxjs@5.5
   • npm install codelyzer@4
4. npm install 重新安裝套件

ng new

• 指令：ng new <project-name> [options]
• 說明：建立 Angular 專案，預設此專案會建立在目前的路徑下
• 選項：
  • --routing
    • 使用路由機制，並建立路由檔
  • --dry-run
    • 只輸出會建立的檔案名稱，不會真的產生檔案
    • 別名：-d
  • --skip-git
    • 此專案不建立 git 庫
    • 別名：-sg
  • --skip-install
    • 當專案建立後，不執行任何 npm/yarn 安裝指令
    • 別名：-si
  • --skip-tests
    • 當專案建立後，不增加單元測試檔案
    • 別名：-st
  • --skip-e2e
    • 當專案建立後，不增加 e2e 測試檔案
    • 別名：-se
  • --directory
    • 設定專案要建立在哪個資料夾內
    • 如果要將產生的專案放在當前資料夾，可這樣下參數 --directory ./
  • --verbose
    • 輸出更多資訊
    • 別名：-v
  • --style=scss
    • 改使用 SCSS 設計 CSS 樣式
  • --service-worker
    • 建立 PWA 專案
    • 別名：-sw

ng init

• 指令：ng init <project-name> [options]
• 說明：在目前資料夾下建立 Angular 專案（不會產生資料夾）
• 選項：
  • --dry-run
    • 只輸出會建立的檔案名稱，不會真的產生檔案
    • 別名：-d
  • --verbose
    • 輸出更多資訊
    • 別名：-v
  • --skip-npm
    • 當專案建立後，不執行任何 npm 指令
  • --name
    • 設定專案名稱

ng serve

在專案資料夾中執行 ng serve，將編譯 Angular 專案並自動在瀏覽器中打開預設網址 http://localhost:4200/，執行後如果修改了專案中的程式碼，網頁會自動重新整理。

也可以使用以下指令，自訂要配置的 IP 和 Port 號：

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49123

ng completion

• 指令：ng completion
• 說明：在目前的 shell 底下增加自動補完 ng 指令的功能

ng doc

• 指令：ng doc <keyword>
• 說明：開啟瀏覽器查詢 <keyword> 用法。相當於在 angular.io API Reference 中查詢 API 文件。

ng e2e

• 指令：ng e2e
• 說明：使用 protractor 執行所有 end-to-end 測試你的應用程式

ng format

• 指令：ng format
• 說明：Formats the code of this project using clang-format.

ng generate

• 指令：ng generate <type> [options]
• 說明：在專案中產生新的程式碼
• 別名：g
• 有效類型：
  • ng g component my-new-component 產生 Component 元件程式碼
  • ng g directive my-new-directive 產生 Directive 指令程式碼
  • ng g pipe my-new-pipe 產生 Pipe 管道程式碼
  • ng g service my-new-service 產生 Service 服務程式碼
  • ng g class my-new-class 產生 Class 程式碼
  • ng g interface my-new-interface 產生 Interface 介面程式碼
  • ng g enum my-new-enum 產生 Enum 程式碼
  • ng g module my-module 產生 Module 模組程式碼
  • ng g guard my-guard 產生 Guard 守衛程式碼
  • ng g app-shell [ --universal-app <universal-app-name>] [ --route <route>] 建立 App Shell

每個產生的元件有各自的資料夾，除非使用 --flat 選項

• 選項：
  • --flat 不建立資料夾
  • --route=<route> 指令父路由，僅用於產生元件和路由，預設使用指定的路徑
  • --skip-router-generation 跳過產生父路由配置，只能用於路由命令
  • --default 指定路由為預設路由 * --lazy 指定路由為延遲載入

ng build

將專案編譯至輸出資料夾，預設為 dist。

ng build 可以指定輸出目標（--target=production 或 --target=development）和要使用的環境文件（--environment=dev或 --environment=prod）。預設情況下，會使用開發目標和環境。

# 這是正式環境的編譯
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# 這是開發環境的編譯
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

ng get

• 指令：ng get <path1, path2, ...pathN> [options]
• 說明：Get a value from the Angular CLI configuration. The pathN arguments is a valid JavaScript path like “users[1].userName”. If the value isn’t set, “undefined” will be shown. This command by default only works inside a project directory.
• 選項： * --global Returns the global configuration value instead of the local one (if both are set). This option also makes the command work outside of a project directory.

ng set

• 指令：ng get <path1=value1, path2=value2, ...pathN=valueN> [options]
• 說明：Set a value in the Angular CLI configuration. By default, sets the value in the project’s configuration if ran inside a project, or fails if not inside a project. The pathN arguments is a valid JavaScript path like “users[1].userName”. The value will be coerced to the proper type or will throw an error if the type cannot be coerced.
• 選項： * --global Sets the global configuration value instead of a local one. This also makes ng set works outside a project.

ng github-pages:deploy

• 指令：ng github-pages:deploy [options]
• 說明：Build the application for production, setup the GitHub repository, then publish the app.
• 選項：
  • --message=<message> Commit message to include with the build. Defaults to “new gh-pages version”.
  • --environment=<env> The Angular environment to build. Defaults to “production”.
  • --branch=<branch-name> The git branch to push the pages to. Defaults to “gh-branch”.
  • --skip-build Skip building the project before publishing.
  • --gh-token=<token> API token to use to deploy. Required.
  • --gh-username=<username> The Github username to use. Required.

ng lint

• 指令：ng lint
• 說明：執行 codelyzer linter 檢查你的專案

ng test

• 指令：ng test [options]
• 說明：使用 karma 執行單元測試
• 選項：
  • --watch Keep running the tests. Default to true.
  • --browsers, --colors, --reporters, --port, --log-level Those arguments are passed directly to karma.

ng version

• 指令：ng version
• 說明：輸出 angular-cli、node 和作業系統版本

[morse]Angular 部屬

服務端配置

Server configuration 

帶路由的應用必須以index.html作為後備頁面

Angular 應用很適合用簡單的靜態HTML 服務器提供服務。你不需要服務端引擎來動態合成應用頁面，因為Angular 會在客戶端完成這件事。

如果該應用使用Angular路由器，你就必須配置服務器，讓它對不存在的文件返回應用的宿主頁( index.html)。

帶路由的應用應該支持“深鏈接”。所謂深鏈接就是指一個URL，它用於指定到應用內某個組件的路徑。比如，http://www.mysite.com/heroes/42就是一個到英雄詳情頁面的深鏈接，用於顯示id: 42的英雄。

當用戶從運行中的客戶端應用導航到這個URL 時，這沒問題。Angular 路由器會攔截這個URL，並且把它路由到正確的頁面。

但是，當從郵件中點擊鏈接或在瀏覽器地址欄中輸入它或僅僅在英雄詳情頁刷新下瀏覽器時，所有這些操作都是由瀏覽器本身處理的，在應用的控制範圍之外。瀏覽器會直接向服務器請求那個URL，路由器沒機會插手。

靜態服務器會在收到對http://www.mysite.com/的請求時返回index.html，但是會拒絕對http://www.mysite.com/heroes/42的請求，並返回一個404 - Not Found錯誤，除非，它被配置成了返回index.html。

後備頁面配置範例

沒有一種配置可以適用於所有服務器。後面這些部分會描述對常見服務器的配置方式。這個列表雖然不夠詳盡，但可以為你提供一個良好的起點。

• Apache：在.htaccess文件中添加一個重寫規則，代碼如下（出處）：

  RewriteEngine On
      # If an existing asset or directory is requested go to it as it is
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
      RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
      RewriteRule ^ - [L]
  
      # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html
  

• 
  
• NGinx：使用try_files指向index.html，詳細描述見Web應用的前端控制器模式。

  try_files $uri $uri/ /index.html;

• 

• IIS：往web.config中添加一條重寫規則，類似於這裡： 不要忘記在服務器上安裝 IIS URL Rewrite。

  
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
  
  

• GitHub頁面服務：你沒辦法直接配置 Github的頁面服務，但可以添加一個404頁，只要把index.html複製到404.html就可以了。它仍然會給出一個404響應，但是瀏覽器將會正確處理該頁，並正常加載該應用。使用在主分支的docs/下啟動服務 並創建一個.nojekyll文件也是一個好辦法。
• Firebase主機服務：添加一條重寫規則。

  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]

請求來自另一個服務器的服務（CORS）

Angular開發者在向與該應用的宿主服務器不同域的服務器發起請求時，可能會遇到一種跨域資源共享（CORS）錯誤。瀏覽器會阻止該請求，除非得到那台服務器的明確許可。

客戶端應用對這種錯誤無能為力。服務器必須配置成可以接受來自該應用的請求。要了解如何對特定的服務器開啟CORS，參見enable-cors.org。

資料來源:

https://angular.cn/guide/deployment