Question

我只是抓住Angular RouterModule，请耐心等待。

我已经设置了一个应用程序组件，其中包含允许用户登录和注册的按钮。但是当单击链接时，Angular会返回404;我无法理解为什么，我已经效仿了这个例子。

任何人都不知道我在哪里可以找到这个问题吗？

我有两个重要的模块：

包含身份验证服务的用户模块作为登录/注册/ ...组件
包含实际应用程序的入口模块

// 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回购here。

非常感谢任何帮助......

Angular Routerlink不起作用

0 个答案: