Я встроил приложение Angular 6 в существующее приложение .NET MVC 5. Я добавил запасной маршрут, указывающий на Home / Index в приложении MVC (RouteConfig.cs), чтобы «неизвестные» маршруты передавались в модуль маршрутизатора приложения Angular (app.routes.ts). Маршруты приложения Angular, похоже, не запускаются, компонент, связанный с путем, не загружается.
Средой разработки является Visual Studio 2017 Enterprise 15.6.7, приложение MVC - это стандартное веб-приложение .NET (не .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; загрузчик 3.3.7, jquery 3.3.1; ОС: Win 10 x64.
RouteConfig.cs приложения MVC ниже; универсальный маршрут внизу.
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), запись package.json для Typescript по умолчанию имеет значение 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> в главном компоненте приложения, EventListComponent загружается нормально (он отображает список событий, каждое из которых инкапсулировано в EventThumbnailComponent).
Кроме того, он не загружается http://localhost:39420/events при запуске; по умолчанию это root, например localhost: 39420 / ... если я наберу '/ events' в URL, я не получу сообщение об ошибке, просто пустая страница. Если я пытаюсь получить EventDetailsComponent, снова используя localhost: 39420 / events / 1 ..., он просто отображает пустую страницу.