index.html 位於應用程式的 src 資料夾中。 編譯器在此檔案的`末尾`動態新增所有 javascript 檔案。

由於現在所有元件都是已知的，因此 html 檔案呼叫根元件即 app-root。 根元件在 app.components.ts 中定義，它以 app.component.html 為目標。

這是 index.html 檔案在 Visual Studio Code 環境中的樣子：

```html

```typescript
import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'hello-world';
}
```
當在瀏覽器中提供並開啟這個 Angular 應用程式時，指令碼注入由編譯器完成，這就是檔案在瀏覽器中的樣子：
 
![](https://img-blog.csdnimg.cn/img_convert/f5823f5ddc67d75c50e352a0ee2f9eb5.png)

其中黃色高亮區域是編輯器動態注入的。

上述程式碼的 vendor.js: 在幕後，Angular CLI 使用 Webpack，一個模組打包器。 除此之外，Webpack（在許多外掛的幫助下）將專案程式碼和資產轉換為 JavaScript 包。 這些包包含應用程式的所有程式碼，以及第三方程式碼（例如 Angular 和應用程式可能使用的其他庫）。

當使用 `ng build --prod` 構建應用時，還會生成如下 artifacts：

![](https://img-blog.csdnimg.cn/img_convert/01bcefcaaf3ff7a2bd2df261a665abf3.png)

包名稱後的看似隨機的字串是雜湊值，新增在此處是為了清除快取。 也就是說，確保 Web 瀏覽器使用更新後的內容，而不是之前在本地儲存的版本。 通常，如果應用程式的內容沒有改變，那麼即使多次構建，這些 hash 字串也將保持不變。

- main.js：應用程式程式碼和開發人員匯入的所有內容
- vendor.js：應用依賴的第三方程式碼
- polyfills.js：允許在舊環境中使用新功能的 polyfill（例如，在過時的 Web 瀏覽器上使用 Angular）
- runtime.js：Webpack 用於在執行時載入程式碼的實用程式程式碼

Angular 應用裡 index.html 的作用

相關文章