Angular 部署應(yīng)用

部署應(yīng)用

部署應(yīng)用是指編譯或構(gòu)建代碼并將生成的 JavaScript、CSS 和 HTML 托管到 Web 服務(wù)器上的過(guò)程。

本節(jié)基于“入門(mén)”教程中的前序步驟，并向你展示如何部署應(yīng)用。

先決條件

這里的最佳實(shí)踐是在部署項(xiàng)目之前先在本地運(yùn)行項(xiàng)目。要在本地運(yùn)行項(xiàng)目，你需要在計(jì)算機(jī)上安裝以下軟件：

• Node.js
• Angular CLI。在終端上，使用以下命令全局安裝 Angular CLI：

npm install -g @angular/cli

借助 Angular CLI，你可以使用 ?ng ?命令創(chuàng)建新的工作區(qū)、新項(xiàng)目、在開(kāi)發(fā)過(guò)程中啟動(dòng)開(kāi)發(fā)服務(wù)器，或生成要共享或分發(fā)的構(gòu)建成果。

在本地運(yùn)行你的應(yīng)用

1. 在左邊的菜單中點(diǎn)擊 ?Project ?后面的 ?Download Project? 圖標(biāo)，以下載你的 StackBlitz 項(xiàng)目源代碼的 zip 包。




2. 解包，并進(jìn)入新創(chuàng)建的這個(gè)項(xiàng)目目錄中。比如：

cd angular-ynqttp

3. 使用以下 CLI 命令在本地運(yùn)行你的應(yīng)用：

ng serve

4. 要在瀏覽器中查看你的應(yīng)用，請(qǐng)?jiān)L問(wèn) ?http://localhost:4200/?。如果默認(rèn)端口 4200 不可用，則可以使用端口標(biāo)志指定另一個(gè)端口，如下所示：

ng serve --port 4201

當(dāng)啟動(dòng)了應(yīng)用的開(kāi)發(fā)服務(wù)器時(shí)，你可以編輯代碼并在瀏覽器中查看對(duì)此更改的自動(dòng)更新。要停止此 ?ng serve? 命令，請(qǐng)按 ?Ctrl + c? 鍵。

構(gòu)建和托管你的應(yīng)用

1. 要構(gòu)建用于生產(chǎn)的應(yīng)用，請(qǐng)使用 ?build ?命令。默認(rèn)情況下，此命令使用 ?production ?構(gòu)建配置。

ng build

此命令會(huì)創(chuàng)建一個(gè) ?dist ?文件夾，其中包含把你的應(yīng)用部署到托管服務(wù)時(shí)所需的全部文件。

如果上述 ?ng build? 命令引發(fā)了“缺少軟件包”之類的錯(cuò)誤，請(qǐng)將缺失的依賴項(xiàng)附加到本地項(xiàng)目的 ?package.json? 文件中，以匹配從 StackBlitz 下載的項(xiàng)目中的依賴項(xiàng)。

2. 把 ?dist/my-project-name? 文件夾的內(nèi)容復(fù)制到 Web 服務(wù)器。由于這些文件是靜態(tài)的，因此你可以將它們托管在任何支持靜態(tài)文件的 Web 服務(wù)器上。（例如 Node.js、Java、.NET 或任何后端（例如Firebase，Google Cloud 或 App Engine）)。