Я пытаюсь использовать Angular 6, Angular CLI и MV Areas. По причинам, связанным с POC, я назвал его Angular. Идея заключалась в том, чтобы иметь угловое приложение для каждой области.Если это плохая идея, пожалуйста, дайте мне знать, потому что, может быть, вся концепция и для меня это боль.Это первый раз, когда я его настраиваю.Ниже приведен мой пример. Area имеет основной контроллер, который выглядит следующим образом:
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 });
}
У меня есть папка приложения в главном каталоге проектаКроме того, файлы, такие как 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.
ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут.Сегмент URL: «ANGULAR / Main» Ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: «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 / operator / 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 / operator / tap.js.TapSubscriber._error (tap.js: 61) в ApplyRedirects.push ... / node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (маршрутизатор.js: 1382) в CatchSubscriber.selector (router.js: 1363) в CatchSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operator / 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.Subcriber.ошибка (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 (Подпискиer.js: 61) в TapSubscriber.push ... / node_modules / rxjs / _esm5 / internal / operator / tap.js.TapSubscriber._error (tap.js: 61) в resolPromise (zone.js: 814) в resolPromise (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) на канале MicroTaskQueue (zone.js: 595)
В любом случае, у меня также есть общий вопрос: хорошо ли иметь концепцию наличия отдельных приложений для Района?Или, может быть, некоторые из вас имеют опыт работы с угловым CLI, MVC5 Areas и Angular6?Как это должно быть сделано.Спасибо за терпение и помощь заранее.Ниже также приведены экраны печати, как я структурировал мой проект
