Question

我正在尝试使用命令

在nginx服务器上部署我的Angular 5应用程序

ng build --env=prod

但是当我访问我的网站时，供应商文件总是出错。

当我使用以下命令在/ test之类的文件夹中构建应用程序时，该应用程序运行良好：ng build --env=prod --bh /test/

我真的迷路了。这是一个nginx问题吗？

非常感谢。

Answer 1

您没有使用-bh选项指定文件夹。您指定基础href。

如果要从根目录提供角度，只需使用-bh /。还要检查index.html如果有预定义的基本路径。

<base href="/">

Answer 2

Angular默认使用PathLocationStratergy，当你进行prod构建时，如果我们没有明确指定base href，它就无法使它工作。如果您不想在这种情况下指定基本href，则需要在路由中使用HashLocationStratergy。

实例 RouterModule.forRoot（appRoutes， {useHash：true} ）;

还有另一招 以下不是最佳做法 在制作prod构建之后，只需将index.html中的基本href更改为＆＃34;。＆＃34; 。

Answer 3

而不是

ng build --env=prod

使用

ng build --prod

Answer 4

如果有人仍在努力进行角度2/4/5 app + Nginx的制作设置，那么这是完整的解决方案：

假设您要在主持人处部署角度应用：http://example.com和PORT：8080 注 - 在您的情况下，HOST和PORT可能会有所不同。

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

首先，转到您机器上的角度回购（即/ home / user / helloWorld）路径。
然后使用以下命令为生产服务器构建/ dist：

ng build --prod --base-href http://example.com:8080
现在将copy / dist（即/ home / user / helloWorld / dist）文件夹从您机器的angular repo复制到您要托管生产服务器的远程计算机。

现在登录到您的远程服务器并添加以下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.

    }

}

现在重启nginx。
就是这样!!现在，您可以在http://example.com:8080

希望它会有所帮助。

Angular 5生产问题

4 个答案: