Angular Routerlink не работает - PullRequest
0 голосов
/ 08 мая 2018

Я только что получил контроль над модулем Angular RouterModule, пожалуйста, потерпите меня.

Я установил компонент приложения с кнопками, которые позволяют пользователю войти и зарегистрироваться. Но Angular возвращает 404 при нажатии на ссылку; Я не могу понять почему, я последовал примеру.

Кто-нибудь знает, где я могу найти проблему?

У меня есть 2 важных модуля:

  1. пользовательский модуль, который также содержит сервис аутентификации как логин / регистрация / ... компоненты
  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 можно найти здесь .

Любая помощь будет принята с благодарностью ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...