Я только что получил контроль над модулем Angular RouterModule, пожалуйста, потерпите меня.
Я установил компонент приложения с кнопками, которые позволяют пользователю войти и зарегистрироваться. Но Angular возвращает 404 при нажатии на ссылку; Я не могу понять почему, я последовал примеру.
Кто-нибудь знает, где я могу найти проблему?
У меня есть 2 важных модуля:
- пользовательский модуль, который также содержит сервис аутентификации
как логин / регистрация / ... компоненты
- модуль ввода, который содержит фактическое приложение
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { RouterModule, Routes } from '@angular/router';
import { UserModule } from './user/user.module';
import { AuthenticationService } from './user/authentication.service';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { EntryModule } from './entry/entry.module.ts';
const appRoutes: Routes = [
{ path: 'entries', component: EntryListComponent },
{ path: '', redirectTo: 'entries', pathMatch: 'full'}, // empty
{ path: '**', component: PageNotFoundComponent} // catch-all
];
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
UserModule,
AppRoutingModule,
RouterModule.forRoot(appRoutes),
HttpClientModule
],
providers: [
AuthenticationService
],
bootstrap: [AppComponent]
})
export class AppModule { }
// app.component.html (выдержка)
<button *ngIf='!(currentUser | async) else ng-hide'class="ui button" title="Login">
<a class="item" routerLinkActive='active' routerLink="/login">
<i class="large black user icon"></i>
</a>
</button>
<button *ngIf='!(currentUser | async) else ng-hide' class="ui button" title="Register">
<a class="item" routerLinkActive='active' routerLink="/register">
<i class="large black user plus icon"></i>
</a>
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
import { SelectivePreloadStrategy } from './SelectivePreloadStrategy';
import { AuthGuardService } from '../user/auth-guard.service';
const appRoutes: Routes = [
{
path: 'entry',
canActivate: [ AuthGuardService ],
loadChildren: 'app/entry/entry.module#EntryModule' // <<< THIS IS IMPORTANT
},
{ path: '', redirectTo: 'entry', pathMatch: 'full'},
{ path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(appRoutes, { preloadingStrategy: SelectivePreloadStrategy })
],
declarations: [],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
Я не совсем уверен, заключается ли проблема в каком-либо из этих файлов, но репозиторий Github можно найти здесь .
Любая помощь будет принята с благодарностью ...