在建置 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,加快載入速度!大幅增加操作體驗!