在建置 angular 專案時,一開始就先設定好些方便開發的小技巧, 對之後的開發體驗可以省下不少工時。

自訂 Typescript 匯入路徑 (import paths)

編輯 tsconfig.json 檔案,在 compilerOptions 新增 paths 並在這裡設定 import path 的自動匯入路徑,這麼做可以讓路徑長度變短一點.

{
  "compilerOptions": {
    "paths":{
      "@core-models/*":["app/core/models/*"],
      "@core-services/*":["app/core/services/*"],
      "@core-guards/*":["app/core/guards/*"],
      "@public/*":["app/public/*"],
      "@pages/*":["app/pages/*"],
      "@app/*":["app/*"],
    },

設定完之後,在撰寫程式碼時即可使用自訂命名來取代原有的絕對路徑.

import { UserService } from '@core-services/user.service';
import { UserProfile } from '@core-models/users.model';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.css']
})

export class AccountComponent implements OnInit, OnDestroy {
}

Routing

不可以把 default route 定義為 lazy-loading,在這裡可以用 ngx-quicklink 只要將 router prefetch strategy 設定好,就會預先自動讀取雨下載 view 中 routerLink 所指定的 lazy loading route,加快載入速度!大幅增加操作體驗!