无法匹配任何路线 url 路段 Visual Studio 2015

Question

我是运行一个 MVC 项目，我在其中添加了 Angular 8 个组件。现在这里的场景是在 MVC 项目中，我们使用了应用于所有视图的 layout.cshtml 页面。

我在服务视图中添加了

<app-root></app-root>

url 如下所示：

"http://localhost:1535/Org/Services"

当我调用此视图时 url 刷新段：“/Org/Services”

浏览器中只剩下“http://localhost:1535”

我收到控制台错误，内容如下：

无法匹配任何路线 url 段。

下面是app-routing.module.ts代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AppComponent} from './app.component';

const appRoutes: Routes = [
    {
        path: '',
        component: AppComponent,
        children: [
            {
                path: '',
                redirectTo: 'Org',
                pathMatch: 'prefix'
            },
            {
                path: 'Org',
                component: AppComponent
            }
        ]
    }
];

@NgModule({
    //declarations: [AppComponent],
    imports: [RouterModule.forRoot(appRoutes)], 
    
  exports: [RouterModule]
})
export class AppRoutingModule { }

下面是Angular.json代码：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "AngularData": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "http://localhost:7803/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "AngularData:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "AngularData:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "AngularData:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "AngularData:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "AngularData:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "AngularData"
}

下面是 app.component.html 代码：

<div style="text-align:center">
    <h1 style="margin-top:10px;">
        Welcome to Angular<b style="color:crimson">8</b> with ASP.NET MVC
    </h1>
    <!--<img width="200" alt="Angular Logo" src="../assets/angular-asp-core.png">-->
    <div class="card" style="margin-left:50px; margin-right:50px; margin-bottom:50px;">
        <div class="card-header" style="font-weight:bold; font-size:x-large;">
           Latest Posts from RSS Feeds
        </div>
        <div class="card-body">
            <div class="table-responsive" style="max-height:385px;">
                <table class="table mb-0" *ngIf="latestPosts && latestPosts.length>0">
                    <thead>
                        <tr>
                            <th>Sl.No</th>
                            <th>Post Title(With Link)</th>
                            <th>Post Type</th>
                            <th>Published Date</th>
                            <th>Author</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let post of latestPosts">
                            <td>{{ post.$id }}</td>
                            <td style="text-align:left;"><a href="{{post.Link}}" target="_blank">{{post.Title}}</a></td>
                            <td>{{ post.FeedType }}</td>
                            <td>{{ post.PublishDate }}</td>
                            <td>{{ post.Author}} </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<router-outlet></router-outlet>

注意：使用 ng build 和 ng serve 命令我已经验证 angular url 它正在加载 html 页面。

求推荐。

Answer 1

angular 路径设置不正确存在一些问题。

以下是我所做的更改。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AppComponent} from './app.component';

const appRoutes: Routes = [
    {
        path: '',
        component: AppComponent,
        pathMatch:'full'
    }
];

@NgModule({
    //declarations: [AppComponent],
    imports: [RouterModule.forRoot(appRoutes)], 
    
  exports: [RouterModule]
})
export class AppRoutingModule { }

但是现在我的 html 内容重复了，我正在寻找解决方案。

根据 Jignesh Raval 的建议找到了一些解决方案。

在 src/app 文件夹中又添加了一个名为 home 的组件并添加了 home app.module.ts 和 app.routing.module.ts 中的组件下面是：

app.module.ts代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  //providers: [],
  bootstrap: [AppComponent]
 
})
export class AppModule { }

App.Routing.module.ts代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component'

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch:'full'
    },
    { path: ':Organizational/ProfessionalServices', component:HomeComponent},
];
@NgModule({
    imports: [RouterModule.forRoot(appRoutes)], 
    
  exports: [RouterModule]
})
export class AppRoutingModule { }

现在我的代码可以完美运行了。

Answer 2

根据我的理解和检查网上的几个例子，AppComponent 本身不在 Router 中。

您可以在 stackblitz 上查看此示例：https://stackblitz.com/edit/angular-router-example

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";

import { AppRoutingModule } from "./app.routing";

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [AppComponent, HomeComponent, AboutComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

// app.routing.ts

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

import { HomeComponent } from "./home/home.component";
import { AboutComponent } from "./about/about.component";

const routes: Routes = [
  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  },
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: ":org/service",
    component: AboutComponent
  }
];

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

// app.component.html

<nav>
    <a routerLink="/home" routerLinkActive="active">Home</a>
    <a routerLink="/MyOrgName/service" routerLinkActive="active">About</a>
    <a routerLink="/MyOtherOrgName/service" routerLinkActive="active">About</a>
</nav>

<router-outlet></router-outlet>

我刚刚在 app.component.html 和 app.routing.ts 中更改了 routerLink="/MyOrgName/service"，我将 aboutus 组件的路径更改为 path: ":org/service"，它按预期工作。（:org 将是一个动态名称）

stackblitz 上还有其他示例，您可以将您的代码与此类示例进行比较，找出问题所在。

https://stackblitz.com/edit/angular-router-basic-example

希望对理解路由器流程有所帮助。

谢谢， Jignesh raval

无法匹配任何路线 url 路段 Visual Studio 2015

cannot match any routes url Segments Visual Studio 2015

asp.net-mvc-5

angular8