Angular 2 CLI - 部署 [英] Angular 2 CLI - Deployment

问题描述

我使用 Angular 2 CLI 构建了一个 Angular 2 应用程序.我现在的问题是我想将该应用程序部署到本地服务器，作为供其他人查看的暂存环境.

I have built an Angular 2 application using the Angular 2 CLI. My issue is now I want to deploy the application to a local server as a staging environment for others to view.

大多数使用 Angular 2 CLI 的教程都显示了一个 dist 文件夹，该文件夹似乎是在首次使用 CLI 创建项目时生成的.我只能使用 ng build 生成 dist 文件夹.我假设 Angular 2 CLI 改变了最初 dist 文件夹是初始文件夹结构的一部分，但现在它只在使用 ng build 时生成?

Most tutorials that use the Angular 2 CLI show a dist folder that appears to have been generated when the project was first created using the CLI. I can only generate the dist folder using ng build. I assume the Angular 2 CLI changed where initially the dist folder was part of the initial folder structure, but now it is only generated when using ng build?

作为测试，我将生成的dist文件夹复制到WAMP服务器的www文件夹中[http://localhost:8080/Project/dist/] 尝试运行应用程序...浏览器控制台显示:

As a test, I copied the generated dist folder into the www folder of the WAMP server [http://localhost:8080/Project/dist/] to try and run the application... The browser console shows:

Failed to load resource: the server responded with a status of 404 (Not Found)      http://localhost:8080/inline.js
Failed to load resource: the server responded with a status of 404 (Not Found)      http://localhost:8080/bundle.js

它在本地服务器的根目录中查找所有资产，而不是将根设置为 dist 文件夹中 index.html 的位置.所有图像和图标都有相同的问题...我想我没有为相对路径配置一些东西...我该怎么办?

It is looking for all assets at the root of the local server, rather than setting the root to the location of the index.html within the dist folder. All images and icons have the same problem... I figure I have failed to configure something for the relative paths... What do I do?

推荐答案

首先，您可以指定 ng build 命令的输出路径 - 所以不需要手动复制.例如:ng build --output-path/var/www/app_foo/root/.

First of all, you can specify the output path of the ng build command - so no manual copying needed. Eg.: ng build --output-path /var/www/app_foo/root/.

其次，在index.html中有一个base path概念作为base tag实现 - <base href="/路径">.您可以手动或在构建过程中通过 ng build --base-href/path/ 进行设置.

Second, there is a base path concept implemented as base tag in index.html - <base href="/path">. You can set it manually or during building via ng build --base-href /path/.

在您的情况下，它似乎应该匹配:ng build --base-href/Project/dist/.

In your case it seems it should match: ng build --base-href /Project/dist/.

这篇关于Angular 2 CLI - 部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！