无法匹配任何路由。URL段：角度/主

Question

我正在尝试使用Angular 6、AngularCLI和MV区域。出于POC的原因，我将其命名为Angular。如果这是一个坏主意，请告诉我，因为也许整个概念是，对我来说，这是一种痛苦。这是我第一次配置它。下面是我的示例，Area有一个主控制器，如下所示：

public class MainController : BaseController
{
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
}

我的路由配置如下所示：

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

        routes.MapRoute(
            name: "mvc",
            url: "{controller}/{action}/",
            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
        );

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

我在主项目目录中有我的应用程序文件夹，以及angular.json和packages.json等文件。我使用角度 CLI 创建了这个

下面是一个角度。josn文件：

   {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "version": 1,
      "newProjectRoot": "eagle-app",
      "projects": {
          "test-app": {
          "root": "test-app/",
          "sourceRoot": "test-app",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
           "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
              "outputPath": "eagle-app/dist/test-app",
               "index": "Areas/ANGULAR/Views/Main/Index.cshtml",
                "main": "eagle-app/test-app/main.ts",
                "polyfills": "eagle-app/test-app/polyfills.ts",
                "tsConfig": "eagle-app/test-app/tsconfig.app.json",
                "assets": [
              "test-app/favicon.ico",
              "test-app/assets"
            ],
        "styles": [
          "eagle-app/test-app/styles.css",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/nova-light/theme.css",
          "node_modules/primeng/resources/primeng.min.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "eagle-app/test-app/environments/environment.ts",
              "with": "eagle-app/test-app/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "test-app:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "test-app:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "test-app:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "eagle-app/test-app/test.ts",
        "polyfills": "eagle-app/test-app/polyfills.ts",
        "tsConfig": "eagle-app/test-app/tsconfig.spec.json",
        "karmaConfig": "eagle-app/test-app/karma.conf.js",
        "styles": [
          "eagle-app/test-app/styles.css",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng/resources/themes/nova-light/theme.css",
          "node_modules/primeng/resources/primeng.min.css"
        ],
        "scripts": [],
        "assets": [
          "test-app/favicon.ico",
          "test-app/assets"
        ]
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "eagle-app/test-app/tsconfig.app.json",
          "eagle-app/test-app/tsconfig.spec.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
},
"test-app-e2e": {
  "root": "test-app-e2e/",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "test-app-e2e/protractor.conf.js",
        "devServerTarget": "test-app:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "test-app:serve:production"
        }
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": "test-app-e2e/tsconfig.e2e.json",
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}
}
}

我的 Index.cshtml 看起来像这样：

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>TestApp</title>
        <base href="/Areas/ANGULAR/Main/">

        <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <test-app>
        </test-app>
    @section scripts {
    @Scripts.Render("~/Content/angular-ui")
    }
    </body>
</html>

如您所见，我有一个路由组件，如下所示:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Sub1Component } from "./submodule1/sub1.component"
import { Sub2Component } from "./submodule2/sub2.component"
import { AppComponent } from "./app.component";


const routes: Routes = [
    { path: 'Sub1', component: Sub1Component },
    { path: 'Sub2', component: Sub2Component },
    {
      path: '',
      redirectTo: '/Sub1',
      pathMatch: 'full'
    }
 ];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

我正在将其注入到我的 app.component 中，这是一个循环，可以为上面定义的子模块创建按钮，并且它的视图位于共享 foler 中。问题是我收到如下错误。而且我似乎无法加载 sub1 的默认路由。

错误错误：未捕获（在promise中）：错误：无法匹配任何路由。URL段：“ANGULAR/Main”错误：无法匹配任何路由。URL段：“ANGULAR/Main”，位于ApplyRedirects.push…/node_modules/@ANGULAR/router/fesm5/router.js.ApplyRedrects。CatchSubscriber上的noMatchError（router.js:1382）。选择器（router.js:1363）位于CatchSubscriber.push…/node_modules/rxjs/_esm5/internal/operations/catchError.js.CatchSubscripter。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（catchError.js:34）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:61）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:61）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。TapSubscriber.push…/node_modules/rxjs/_esm5/internal/operations/tap.js.TapSubscripter出现错误（Subscriber.js:61）_ApplyRedirects.push…/node_modules/@angular/router/fesm5/router.js.ApplyRedirections出现错误（tap.js:61）。CatchSubscriber上的noMatchError（router.js:1382）。选择器（router.js:1363）位于CatchSubscriber.push…/node_modules/rxjs/_esm5/internal/operations/catchError.js.CatchSubscripter。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（catchError.js:34）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:61）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:61）_MapSubscriber.push…/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber出现错误（Subscribe.js:83）。TapSubscriber.push…/node_modules/rxjs/_esm5/internal/operations/tap.js.TapSubscripter出现错误（Subscriber.js:61）_resolvePromise（zone.js:814）的错误（tap.js:61），resolvePro（zone.js:771）的错误。js:873，位于ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDeligate。在Object上调用任务（zone.js:421）。onInvokeTask（core.js:3815），位于ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDeligate。在zone.push…/node_modules/zone.js/dist/zone.js.zone调用任务（zone.js:420）。在drainMicroTaskQueue（zone.js:595）上运行任务（zone.js:188）

无论如何，我还有一个普遍的问题，即为一个区域提供单独的应用程序的概念可以吗？或者，也许你们中的一些人对角度CLI，MVC5 Area和Angular6有任何经验？应该怎么做。提前感谢您的耐心和帮助。下面也是我如何构建项目的打印屏幕

Answer 1

好的，在我团队中一位朋友的帮助下，我们成功解决了这个问题！问题是在我们的MVC应用程序中，我们还有一个angularjs（1.x）应用程序，我们注意到我们有基于哈希的url。这让我们找到了答案，在我们的应用程序模块中，我们应该导入以下内容：

{ provide: LocationStrategy, useClass: HashLocationStrategy }

哪个get是从以下位置导入的：

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

在这看起来像这样:

@NgModule({
declarations: [
    AppComponent

],
imports: [
    BrowserModule
    , BrowserAnimationsModule
    , HttpClientModule
    , FormsModule
    , SharedModule
    , AppRoutingModule
],

providers: { provide: LocationStrategy, useClass: HashLocationStrategy }],
bootstrap: [AppComponent]
})

此外，我们不得不删除html部分，因为我们在html中有一种html。他没有这个：

@{ 
Layout = "~/Views/Shared/_Layout.cshtml";
 }

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TestApp</title>
    <base href="/Areas/ANGULAR/Main/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <test-app>
    </test-app>
@section scripts {
@Scripts.Render("~/Content/angular-ui")
}
</body>

我们应该只有这个:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
  @Styles.Render("~/Content/prime-ng-css")
  <div id="test-app">
     <test-app>
    </test-app>
  </div>

 @section scripts {
   @Scripts.Render("~/Content/mMonitor-ui")
}

这是针对这个特定案例和配置的问题的解决方案