Question

我正尝试使用Angular 6，angular CLI和MV Areas。出于POC的原因，我将其命名为Angular。这个想法是每个Area都有一个angular应用。如果这是一个坏主意，请让我知道，因为整个概念可能就是这样。对我而言，这很痛苦。这是我第一次配置它。下面是我的示例区域，其中有一个主控制器，如下所示：

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

我的Route配置看起来像这样：

    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 });
    }

我的应用程序文件夹位于主项目目录中，还有aslo文件（例如angular.json和packages.json）。我已经使用角度CLI创建了这个

下面是一个angular.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中，这是一个为上面定义的子模块创建按钮的循环，其视图位于共享文件夹中。问题是我遇到如下错误。而且我似乎没有要加载sub1的默认路由。

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“ ANGULAR / Main” 错误：无法匹配任何路线。网址段：“ ANGULAR / Main” 在ApplyRedirects.push ... / node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError（router.js：1382）在CatchSubscriber.selector（router.js：1363）在CatchSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operators / catchError.js.CatchSubscriber.error（catchError.js：34）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在TapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operators / tap.js.TapSubscriber._error（tap.js：61）在ApplyRedirects.push ... / node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError（router.js：1382）在CatchSubscriber.selector（router.js：1363）在CatchSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operators / catchError.js.CatchSubscriber.error（catchError.js：34）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber._error（Subscriber.js：83）在MapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / Subscriber.js.Subscriber.error（Subscriber.js：61）在TapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operators / tap.js.TapSubscriber._error（tap.js：61）在resolvePromise（zone.js：814）在resolvePromise（zone.js：771）在zone.js：873 在ZoneDelegate.push ... / node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：421）在Object.onInvokeTask（core.js：3815）在ZoneDelegate.push ... / node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：420）在Zone.push ... / node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：188）在排水微任务队列（zone.js：595）

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

Answer 1

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

{ provide: LocationStrategy, useClass: HashLocationStrategy }

从以下位置导入的

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")
}

这是针对我们所拥有的这种特定情况和配置的问题的解决方案

无法匹配任何路线。 URL段：ANGULAR / MAIN

1 个答案: