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

问题描述

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

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

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

 无法加载资源：服务器响应一个状态404（未找到）http：// localhost：8080 / inline.js 
无法加载资源：服务器响应状态为404（未找到）http：// localhost：8080 / bundle.js 
  

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

解决方案

首先，您可以指定 ng build 命令的输出路径，因此无需手动复制。例如： ng build --output-path / var / www / app_foo / root / 。

在 index.html - 中实现的基本路径概念 base href =/ path> 。您可以通过 ng build --base-href / path / 在手动或建立过程中进行设置。

在您的情况似乎应该匹配： ng build --base-href / Project / dist / 。

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.

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?

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

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?

解决方案

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/.

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/.

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

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