應 @若末lan 的要求 試著寫一個簡單的懶載入專案，如有發現不對的地方，請斧正。

1.建立專案

安裝nodejs和angular cli我這裡就略過了。如果沒有安裝的話，百度一下就有了。

我用的是webstrom，建立過程如下圖：

當然大家也可以用命令建立。

ng new lazyloading

如果用webstorm建立，建立完成後會自動npm install，下載依賴。

如果用命令建立的話，需要自己進入根目錄npm install。

這是建立完成後的介面

然後執行專案看一下，因為曾經有遇到過webstorm卡死退出後導致nodejs無法正常關閉導致宕機的問題，所以我個人傾向於用cmd在根目錄npm start。這裡我用的是win10的powershell，在根目錄按住shift右鍵就能打開了。

2.建立Component

我們建立兩個Component，用來展示路由切換。
這裡我演示webstrom 用 Angular CLI建立。




建立完成後，會預設在module.ts寫入

修改app.component.html看一下效果

3.配置路由

我們在app.component.html上加上兩個a標籤，然後稍微美化一下。

這裡你會發現報錯了，別急跟我做下一步。

我們建立一個module，名字叫app-routings 這裡建立的步驟我就不重複了。
修改程式碼如下圖

最後，在app.module.ts匯入AppRoutingsModule

檢視介面效果~

4.使用懶載入

1.我們首先為apple和banana兩個component 建立對應module並修改對應的程式碼。

2.然後我們建立2個自路由moduleapple-routings.module.ts和 banana-routings.module.ts修改程式碼如下：

注意：這裡是RouterModule.forChild(routes)

3.在對應module引入路由：

4.在app.module.ts刪除 apple 和 banana 的Cmponent

5.修改app-routings.module.ts檔案，將path: 'apple'和 path: 'banana'改為 path: ''

6.檢視效果。

到這裡，懶載入基本就完成了。

這裡標記一下容易採坑的點：

1.將上級路由中想要懶載入的路徑一定要為空，即 path: ''。
2.將上級路由中想要懶載入的component: xxComponent替換為loadChildren: ‘app/component/xx.module#xxModule’ 。
3.在xxModule 的路由中寫原上級路由的引數如

// apple-routings.module.ts
export const routes: Routes = [
  {
    path: 'apple',
    component: AppleComponent
  },
];

4.在子路由：

 imports: [
    RouterModule.forChild(routes)
  ],

在根路由

  imports: [
    RouterModule.forRoot(appRoutes)
  ],

5.程式碼檔案

最後，在這裡附上程式碼檔案 點選下載

6.採坑心得

順帶寫一下自己這方面的踩的坑吧。

404問題

首先，大家打包釋出後會發現，Angular路由預設配置會出現一個問題，當你重新整理介面的時候會發生404的情況。面對這個情況，我們需要在根路由中RouterModule.forRoot(appRoutes)加上一個引數，修改成 RouterModule.forRoot(appRoutes, {useHash: true})然後我們的路徑就變成了

這次，重新整理後不會404了。

萬用字元

一般情況下，我們如果輸入了錯誤的地址，那麼我們希望介面跳轉到404頁面，但是我上面的程式碼如果輸入http://localhost:4200/#/apple121還是會跳轉到 http://localhost:4200/#/apple這並不是我們所希望看到的。所以，我們需要改一下路由的匹配規則，讓除了正確地址外的所有地址都跳轉到404頁面。

首先我們建立一個404component。
然後在根路由最後加上

{
    path: '**',
    component: NoContentComponent
  }

最後，我們嘗試重新訪問http://localhost:4200/#/apple121

顯示404我們這裡是成功了 ，這裡你會發現導航的 apple 和 banana 沒有消失，這是因為我們把a標籤放在了路由外，所以我們這裡再加一層路由。

我們建立一個component 叫 root,並修改程式碼如下：

刪除app.component.css程式碼，並修改 app.component.html程式碼如下

在 app.module.ts中新增 RootComponent：

最後修改app-routings.module.ts程式碼如下：

測試效果

跨域問題

web專案或多或少，總會遇到跨域問題。這裡記錄一種簡單的解決方法：反向代理。

首先我們在專案根目錄建立proxy.config.json檔案 並修改程式碼如下 ：

其中target表示要代理的伺服器，然後修改package.json檔案程式碼如下：

然後跑專案的時候使用npm start命令就行了。
注意:@CleaningStrings說

package.json 檔案 “start”: “ng serve --proxy proxy.config.json”, Unknown option: ‘–proxy’ 改為 “start”: “ng serve --proxy-config proxy.config.json”,

因為我很久沒有寫Angular了,所以也沒有測試新版本相容問題。如果上面的方法不行,那麼大家可以試一下@CleaningStrings的方法

附上全部程式碼 點選下載