ng build --prod 后 Angular 4 深度链接不起作用答案

【问题标题】：Angular 4 deep linking does not work after ng build --prodng build --prod 后 Angular 4 深度链接不起作用
【发布时间】：2017-12-28 22:06:07
【问题描述】：

当用户将以下 URL 粘贴到浏览器中时，我想将我的 Angular 应用程序加载到相应的屏幕：

http://localhost/screen1（应该显示 screen1）
http://localhost/screen2（应该显示 screen2）

我为上述两个路径创建了 2 个组件 - Screen1Component 和 Screen2Component。

screen1.component.ts：

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
selector: 'app-screen1',
templateUrl: './screen1.component.html',
styleUrls: ['./screen1.component.css']
})
export class Screen1Component implements OnInit {
    constructor() {
    }

    ngOnInit() {
    }
}

screen2.component.ts：

import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: 'app-screen2',
    templateUrl: './screen2.component.html',
    styleUrls: ['./screen2.component.css']
})
export class Screen2Component implements OnInit {
    constructor() {
    }

    ngOnInit() {
    }
}

为了从我的基本路径加载这些模块，我在 routing.module.ts 中将它们设为基本路径 '' 的子组件，就像这样：

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';

const appRoutes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'screen1',
                component: Screen1Component
            },
            {
                path: 'screen2',
                component: Screen2Component
            }
        ]
    }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是我的 main.ts：

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';

const appRoutes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'screen1',
                component: Screen1Component
            },
            {
                path: 'screen2',
                component: Screen2Component
            }
        ]
    }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我的 app.component.ts 文件：

import {Component} from '@angular/core';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';
}

我的 app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';
import {routing} from './routing.module';

@NgModule({
    declarations: [AppComponent, Screen1Component, Screen2Component],
    imports: [BrowserModule, routing],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html：

<h1>{{title}}</h1>
<router-outlet></router-outlet>

index.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tryout</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <app-root>Loading...</app-root>
    </body>
</html>

当我执行 npm start 时，即 ng serve -o，我能够延迟加载和深度链接到这些组件。使用命令 ng build --prod 进行生产构建后，我知道我们需要直接使用 dist 文件夹中生成的文件并将它们复制到 Web 服务器。我在 cd 到 dist 文件夹后运行了 http-server -o（你需要 npm install http-server -g 才能使用服务器），但组件根本没有深度链接。

我什至将它们复制到我的 Nginx 服务器的根文件夹，即 {nginx-installation-home}/html 文件夹。

在这两种情况下发生的情况是，当我点击 URL：http://localhost/ 时，我的 index.html 会成功加载应用程序。但是当我点击 URL http://localhost/screen1 或 http://localhost/screen2 时，我看到 404 未找到。

非常感谢您的帮助。

【问题讨论】：

尝试使用哈希策略或配置nginx服务器将所有请求重定向到index.html angular.io/guide/deployment#production-servers
我做到了，但不适合我:(
感谢 yurzui 的帮助。早些时候我尝试过这个，但我想当时有什么问题。这对我有用！

标签： angular typescript nginx

【解决方案1】：

你必须有一个非空的路由路径才能在它下面有孩子。

所以在下面不带孩子的情况下使用它们，

const appRoutes: Routes = [
    {path: 'screen1',component: Screen1Component},
    {path: 'screen2',component: Screen2Component}},
    {path: '',redirectTo:'/screen1',pathMatch:'full'}
];

另外，请注意，第一场比赛将根据角度路线配置进行选择。

问题在于路由策略的服务器配置。该应用在 lite-server 中运行，但在其他服务器中不运行。

【讨论】：

我做到了。但这在我的服务器上构建产品后不起作用。我的确切问题是，在 ng 服务器中一切似乎都运行良好，但在 ng build --prod 之后却没有。
正如你所说，我应该重定向到screen1。如果我想在我的基本路由上显示另一个组件，为什么要这样做？
您的基本路线上没有组件。因此它会选择' ' 并将其提供给您，因为没有任何组件与之关联，您会得到一个带有 404 的空白页面
您可以在团队查看器中使用吗？
如何在生产版本中从浏览器中进行组件深度链接/延迟加载？

【解决方案2】：

代码很好，并且可以在 ng serve 或 lite-server 上正常运行。我需要使用此处所示的设置配置我的 Nginx 服务器 - https://angular.io/guide/deployment#production-servers

【讨论】：