asp.net-mvc - .NET MVC 5 中的 Angular 6 应用程序， Angular 路由不起作用

Question

我在现有的 .NET MVC 5 应用程序中嵌入了 Angular 6 应用程序。我在 MVC 应用程序 (RouteConfig.cs) 中添加了一个指向 Home/Index 的备用路由，因此“未知”路由将传递给 Angular 应用程序的路由器模块 (app.routes.ts)。 Angular 应用程序的路由似乎没有触发，与路径关联的组件未加载。

IDE 是 Visual Studio 2017 Enterprise 15.6.7，MVC 应用程序是标准的 .NET Web 应用程序(不是 .NET Core)，MVC 5.2.3.0； Node.js 8.11.3、npm 6.3.0、Typescript 2.9.2、Angular CLI 6.0.8、Angular 6.0.3； Bootstrap 3.3.7，jquery 3.3.1；操作系统:Win 10 x64。

MVC 应用程序的 RouteConfig.cs 如下；包罗万象的路线在底部。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace Ang2Mvc5_0
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "mvc",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

            // This is a catch-all for when no other routes match the request; let the Angular 2 router take care of it...
            routes.MapRoute(
                name: "default",
                url: "{*url}",
                defaults: new { controller = "Home", action = "Index" } // The view that bootstraps Angular 2 app
            );
        }
    }
}

当我创建 Angular 应用程序(使用 CLI)时，Typescript 的 package.json 条目默认为 2.7.2； package.json 在下面，ngf-bootstrap 条目特定于 PluralSight 教程。

我错过了什么吗？

{
    "name": "temp-app",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^6.0.3",
        "@angular/common": "^6.0.3",
        "@angular/compiler": "^6.0.3",
        "@angular/core": "^6.0.3",
        "@angular/forms": "^6.0.3",
        "@angular/http": "^6.0.3",
        "@angular/platform-browser": "^6.0.3",
        "@angular/platform-browser-dynamic": "^6.0.3",
        "@angular/router": "^6.0.3",
        "core-js": "^2.5.4",
        "ngf-bootstrap": "0.0.5",
        "rxjs": "^6.0.0",
        "toastr": "^2.1.4",
        "zone.js": "^0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.6.8",
        "@angular/cli": "~6.0.8",
        "@angular/compiler-cli": "^6.0.3",
        "@angular/language-service": "^6.0.3",
        "@types/jasmine": "~2.8.6",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.2.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~1.7.1",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.0",
        "karma-jasmine": "~1.1.1",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "^5.4.0",
        "ts-node": "~5.0.1",
        "tslint": "~5.9.1",
        "typescript": "~2.7.2"
    }
}

app.routes.ts 在下面；这真的很简单，到目前为止，我在应用程序开发方面还没有取得太大进展。

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

import { EventsListComponent } from './events/events-list.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'

const routes: Routes = [
    {
        path: 'events',
        component: EventsListComponent
    },
    {
        path: 'events/:id',
        component: EventDetailsComponent
    },
    {
        path: '',
        redirectTo: '/events'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})

export class AppRoutingModule {
}

EventsAppModule 在下面；注意@第 16 行，我已经导入了 AppRoutingModule (app.routes.ts)，我可以评论这一行以禁用路由。

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

import { EventsAppComponent } from './events-app.component';
import { EventsListComponent } from './events/events-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';
import { AppRoutingModule } from './app.routes';

@NgModule({
    imports: [
        BrowserModule
        , AppRoutingModule
    ],
    declarations: [
        EventsAppComponent,
        EventsListComponent,
        EventThumbnailComponent,
        EventDetailsComponent,
        NavBarComponent
    ],
    providers: [
        EventService,
        ToastrService
    ],
    bootstrap: [EventsAppComponent]
})

export class EventsAppModule { }

如前所述，在尝试使用路由时，使用 <router-outlet></router-outlet>在应用程序的主要组件/页面中标记，EventsListComponent 不会加载(我得到一个空白页面)。如果我从应用程序的模块中评论 AppRoutingModule 并切换到 <events-list></events-list>在应用的主要组件中添加标记，EventsListComponent 加载正常(它显示事件列表，每个事件都封装在 EventThumbnailComponent 中)。

此外，它不会加载 http://localhost:39420/events当我运行时；它默认为 root，例如 localhost:39420/...如果我在 url 中键入“/events”，我不会收到错误，只是一个空白页。如果我再次尝试使用 localhost:39420/events/1 获取 EventDetailsComponent，它只会呈现一个空白页面。

Answer 1

redirectTo 需要路由器应该导航到的确切路径。因此它需要在您可能已定义的路由路径之前有一个 /。

在您的路由配置中将 redirectTo: 'events' 替换为 redirectTo: '/events' 并且它应该正确加载 EventsListComponent 组件。

同时添加一个 pathMatch: 'full' 到这个路由:

    {
        path: '',
        redirectTo: '/events',
        pathMatch: 'full'
    }

这是一个 StackBlitz project来帮助你。