Asp.net mvc NET MVC 5中的Angular 6应用程序，Angular路由不'；行不通

我在现有的.NETMVC5应用程序中嵌入了Angular 6应用程序。我在MVC应用程序（RouteConfig.cs）中添加了一个指向主/索引的回退路由，因此“未知”路由将传递到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；操作系统：赢得10x64

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引导条目是特定于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 {
}

下面是事件处理模块；注意在第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 { }

如前所述，当尝试使用路由时，如果应用程序的主组件/页面中有

标记，则不会加载EventsListComponent（我得到一个空白页面）。如果我对应用程序模块中的AppRoutingModule进行注释，并切换到应用程序主组件中的

标记，则EventsListComponent加载良好（它显示事件列表，每个事件封装在EventThumbnailComponent中）

---

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

重定向到需要路由器导航到的确切路径。因此，它期望在您可能定义的路由路径之前有一个
/

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

还向此路由添加一个
pathMatch:“full”
：

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

这里有一个帮助你的方法

因此，当没有其他路由匹配请求时，您必须捕获所有路由，以便Angular能够处理它

您需要删除默认设置，使其看起来像这样。并且不要为angular创建控制器/视图

运行命令之后

ng构建--prod

使用根目录将dist文件复制到目录ex（myangularapp）中
你的mvc应用程序目录。您需要更改基本标记href
属性如此运行

ng build--prod--base href=/myangularapp/

然后，您可以将web.config文件添加到保存角度文件的目录（myangularapp）。下面是示例


重定向到：'events'
应该是
重定向到：'/events'
谢谢，说得好（已修复）。但是没有解决主要问题？你想再次导航到的url是什么？谢谢，我希望它能这么简单。不幸的是，在修复之后，我仍然经历着同样的行为。而且，当我运行它时，它实际上不会加载/事件；它默认为root，例如，…而不是…如果我输入它，我不会得到错误，而是在空白页上。如果我再次尝试使用…获取EventDetails组件，它只会呈现一个空白页面。如果可能，您可以创建StackBlitz吗？可能存在几个问题。您可能忘了在AppModule中导入AppRoutingModule；如上所述（最后一段），批准模块被导入；我已经切换了评论，以确定路由是什么“破坏”了应用程序。感谢StackBlitz，我尝试了它，一切正常。如果我只是做一个独立的Angular应用程序（不嵌入MVC应用程序），我会期待同样的行为——我之前已经做过，独立的Angular应用程序在我的开发环境中运行良好。它是关于将Angular应用程序添加到.NET MVC应用程序的，MVC应用程序希望在每次回发时处理路由。无论出于何种原因，似乎catch-all路由没有将请求传递给角路由；看来角度路由只是没有发射。我甚至不知道如何诊断它。糟糕的是，我错过了你的一条建议：在默认（空）路径中添加pathMatch:“full”帮助很大。我的路线问题还没有完全解决，但你的回答很有帮助。
// 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
            );

// 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}",// you don't need a view
            );

<?xml version="1.0"?>
<configuration>
  <system.web></system.web>
  <system.webServer>
    <rewrite>
      <rules>
        <!--Redirect selected traffic to index -->
        <rule name="Index Rule" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>