Question

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

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

我创建了两个组件 - 上面两个路径的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);

这是我的主要内容：

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服务器。我在运行到dist文件夹后运行了http-server -o（你需要npm安装http-server -g来使用服务器），但组件根本没有深层链接。

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

在这两种情况下，当我点击网址http://localhost/时，我的index.html会成功加载应用。但是当我点击网址http://localhost/screen1或http://localhost/screen2时，我看到找不到404。

非常感谢您的帮助。

Answer 1

您必须拥有非空的路径路径才能在其下面放置子项。

所以在没有孩子的情况下使用它们，如下所示，

import flle1
class testmove:
    __init__():
        objvar1 = None

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

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

Answer 2

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

在ng build --prod之后，Angular 4深度链接不起作用

2 个答案: