У меня есть проект на angular 2 со следующей иерархией:
-AngularTest
-app
-projecttree.component.ts
-projectcard.component.ts
-app.component.ts
-app.module.ts
-...
-node_modules
-index.html
-...
В app.module.ts имею следующий код:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {Routes, RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { ProjectTree } from './projecttree.component';
import { ProjectCard } from './projectcard.component';
import {ProjectService} from './services/project.service';
const appRoutes: Routes =[
{ path: '', component: ProjectTree},
{ path: 'project', component: ProjectCard},
{ path: '**', component: ProjectTree}
];
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ],
declarations: [ AppComponent, ProjectTree, ProjectCard ],
providers: [ ProjectService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
В index.html первым пунктом в <head>
стоит :
<base href="/AngularTest/" />
В шаблон главного компонента (app.component.ts) вставил router-outlet
<div>
<h1 id="shapka">Статичная шапка</h1>
<router-outlet></router-outlet>
</div>`
В результате:
localhost/AngularTest/ - работает, выдаёт projecttree компонент
localhost/AngularTest/project - ошибка 404
любой другой путь, отличный от "/AngularTest/" - ошибка 404
Пробовал различные комбинации значений <base>
и Routes
- пока безрезультатно.
UPDATE
Приложение пишу и тестирую в WebStorm, полный url до главного компонента:
http://localhost:63342/AngularTest/