Question

我使用Angular-CLI创建测试应用程序并使用Nginx提供服务。有一个404或403.我想这是我的Nginx配置的问题，但只是为了确定，我提供了我执行的所有步骤，以达到这一点。

这是我遵循的步骤：

已安装的angular-cli：npm install -g @angular/cli
开始了一个新项目：ng new test-angular
使用ng-serve进行检查，确实有效。
使用nginx构建要投放的项目：ng build。在项目目录中创建一个dist文件夹。

更改了我的nginx配置：

events { 
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;

    server {
        listen 80 default_server;
        root /home/mellkor/test-angular/dist;
        index index.html index.htm;
        server_name localhost;
        location / {
            try_files $uri $uri/ =404;
        }
    } 
 }

nginx -s reload成功。在点击localhost时，我得到404未找到。

根据一些建议，更改为try_files $uri /index.html会给我403禁止。

另一个问题：由于ng init似乎不再起作用，我如何初始化现有的angular2应用程序并使用angular-cli将其构建为生产？

是的我确实提到了this封闭主题，但到目前为止还没有解决方案。

其他信息：

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: linux x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Answer 1

可能存在一种可能性，这就是为什么你得到错误404/403：

index.html head标记中的基础href错误
ng build命令错误--base-href值
错误的nginx配置（即服务器根或服务器位置/）
Nginx必须提供的文件（即/ dist文件夹）的错误权利

以下是解决方案：

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

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

另外，请检查您是否拥有Nginx必须提供的/ dist文件的正确权限。这是help。

首先，转到您机器上的角度回购（即/ 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

希望它会有所帮助。

使用Nginx提供Angular2 CLI构建的应用程序会抛出404,403

1 个答案: