36

我使用 angular-cli 创建了 n 个新的 angular 应用程序。

我完成了应用程序并使用 ng-serve 对其进行了预览，它运行良好。

之后我使用了ng build --prod，它生成了“dist”文件夹。当我将该文件夹放在 xampp 中运行时，它不起作用。我发现没有 *.js 文件，它应该在 *.ts -> *.js 转换之后存在（我想）。

我附上了屏幕截图，其中左侧显示了包含所有 .ts 文件的 src 文件夹，中间显示了“dist”文件夹和浏览器屏幕截图。

请指导我如何从 angular-cli 生成完全工作的应用程序，我可以在我的 xampp 服务器中运行它。

截屏：

截屏

4

9 回答 9

50

方法1（流行的一种）： 如果你使用的是angular-cli，那么

ng build --prod

会成功的。然后您可以将.dist文件夹中的所有内容复制到您的服务器文件夹

方法二：

您可以使用 http-server 为您的应用程序提供服务。安装 http-server

npm install http-server -g

进入你的项目文件夹后

http-server ./dist

它将为您文件夹中的所有文件提供服务。您可以检查终端您可以用来访问应用程序的 IP 地址和端口。现在打开浏览器并输入

ip-adress:port/index.html

希望它会帮助你:)

奖励： 如果你想在 heroku 中部署。请阅读此详细教程 https://medium.com/@ryanchenkie_40935/angular-cli-deployment-host-your-angular-2-app-on-heroku-3f266f13f352

于 2016-06-10T09:33:26.940 回答
16

对于任何寻找 IIS 托管答案的人...

构建你的项目

ng build --prod

将 ./dist 文件夹的所有内容复制到您网站的根文件夹中，维护 ./dist 中的文件夹结构（即 - 不要移动任何东西）。使用 Angular-cli 的 Beta-18 版本，所有资产（在我的情况下为图像）在构建期间被复制到 ./dist/assets 并在其包含的组件中正确引用。

于 2016-11-01T14:09:39.527 回答
9

检查您的 index.html 文件并编辑此行

<base href="/[your-project-folder-name]/dist/">

您的内容应该正确加载。然后，您可以全局加载样式

您应该按照 Johan 的建议设置基本 href

ng build --prod --bh /[your-project-folder-name]/dist/
于 2016-12-17T09:40:00.963 回答
4

以下是 Heroku 的示例：

  1. 创建 Heroku 帐户并安装 CLI

  2. 将angular-clidep 移到dependenciesin package.json（以便在您推送到 Heroku 时安装它。

  3. 添加一个将在代码推送到 Heroku 时postinstall运行的脚本。ng build还为将在以下步骤中创建的节点服务器添加启动命令。这会将应用程序的静态文件dist放在服务器上的目录中，然后启动应用程序。

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. 创建一个 Express 服务器来为应用程序提供服务。
// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);
  1. 创建一个 Heroku 遥控器并推送应用程序。
heroku create
git add .
git commit -m "first deploy"
git push heroku master

这是我做的快速文章，其中包含更多详细信息，包括如何强制请求使用 HTTPS 以及如何处理PathLocationStrategy:)

于 2016-12-16T03:18:32.573 回答
3

ng build与--bh标志一起使用

在 index.html 中将基本标记 href 设置为 /myUrl/：

ng build --base-href /myUrl/
ng build --bh /myUrl/
于 2016-12-17T16:10:03.820 回答
1

我正在使用最新版本的 Angular-CLI（在本回复时是 1.0.0Beta-18）

这个版本的工作方式是将所有内容放在捆绑文件中，并在 index.html 文件中调用它们。之后，您必须将资产复制到 dist 文件夹（由于某种原因，它不会这样做）。最后，仔细检查您的基本 href 确保其设置为需要设置的内容，然后它应该可以工作。这对我有用，我已经在 Apache 和 Node.js 上进行了测试。

于 2016-10-27T14:27:23.003 回答
1

我目前正在使用 Angular-CLI 1.0.0-beta.32.3

在项目的根目录中运行 npm install http-server -g

安装成功后运行 ng build --prod

成功构建后运行 http-server ./dist

于 2017-02-23T15:28:24.777 回答
0

http-server 不支持客户端路由，所以除了你的基本 URL 之外没有其他东西可以工作。相反，您可以使用angular-http-server：

npm install -g angular-http-server
ng build --prod
cd dist
angular-http-server

这应该只用于在将应用程序部署到 Web 服务器之前在本地测试应用程序。要了解如何在 Web 服务器上实际部署应用程序，请查看有关部署的 Angular.io 文章，该文章讨论了构建部署时的注意事项，并为生产中常用的各种不同 Web 服务器提供了配置。

于 2018-05-30T17:23:02.093 回答
0

如果有人在使用 Nginx，那么这里是完整的解决方案：

假设您想在 HOST:http://example.com和 PORT: 部署您的 Angular 应用程序：8080 注意 - HOST 和 PORT 在您的情况下可能会有所不同。

确保你有<base href="/">index.html 头标签。

  1. 首先，转到您机器上的 Angular 存储库（即 /home/user/helloWorld）路径。

  2. 然后使用以下命令为您的生产服务器构建 /dist：

    ng build --prod --base-href http://example.com:8080

  3. 现在将 /dist（即 /home/user/helloWorld/dist）文件夹从您机器的 angular repo 复制到您要托管生产服务器的远程机器上。

  4. 现在登录到您的远程服务器并添加以下 nginx 服务器配置。

    server {

    listen 8080;

    server_name http://example.com;

    root /path/to/your/dist/location;

    # eg. root /home/admin/helloWorld/dist

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

  5. 现在重启nginx。

  6. 而已 ！！现在您可以在http://example.com:8080访问您的 Angular 应用程序

希望它会有所帮助。

于 2018-04-04T16:59:54.497 回答