如何使用角度模块？ （NullInjectorError：没有路由器提供者）

Question

我是 Angular 模块的新手，我已将我的（工作）应用程序分割成这些单独的模块以供开始：

/app
    /core
    /admin
    /authentication
    /wst

所有文件夹都有它的 *.module.ts 文件，其中一些也有 *.routing.module.ts。起初我很高兴看到我的登录页面是身份验证模块中的一个组件，但我只收到了错误。现在它说：

错误：StaticInjectorError(AppModule)[RouterModule -> Router]：
StaticInjectorError(Platform: core)[RouterModule -> Router]: NullInjectorError: 没有路由器的提供者！

我尝试在所有相关的地方以及其他一些不相关但仍然存在的地方添加路由器模块。为什么我会收到此错误？缺少什么？

/app/app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AuthenticationModule } from './authentication/authentication.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    CoreModule,
    AuthenticationModule
  ],
  providers: [
    AuthenticationModule,
    CoreModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/app/authentication/authentication.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LoginPageComponent } from './components/login-page/login-page.component';
import { CoreModule } from '../core/core.module';

import { BrowserModule } from '@angular/platform-browser';
import { AuthenticationRoutingModule } from './authentication.routing.module';

@NgModule({
  declarations: [
    LoginPageComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AuthenticationRoutingModule
  ],
  exports: [
    LoginPageComponent
  ]
})
export class AuthenticationModule { }

/app/authentication/authentication.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './components/login-page/login-page.component';

const routes: Routes = [
  { path: '', component: LoginPageComponent, pathMatch: 'full' },
  { path: '/login', component: LoginPageComponent, pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [
    RouterModule
  ]
})
export class AuthenticationRoutingModule { }

Answer 1

我的代码有几个问题，包括我得到的解决方案。其中之一是我以某种方式删除了 app.component.html 中的标签。工作模块：

/app/app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { RouterModule } from '@angular/router';
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    CoreModule,
    RouterModule.forRoot([
      { path: '', loadChildren: './admin/admin.module#AdminModule' },
      { path: 'login', loadChildren: './authentication/authentication.module#AuthenticationModule' }
    ]),
    ModalModule.forRoot()
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/app/authentication/authentication.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { LoginPageComponent } from './components/login-page/login-page.component';
import { CoreModule } from '../core/core.module';
import { CommonModule } from '@angular/common';
import { routing } from './authentication.routing';
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    LoginPageComponent
  ],
  imports: [
    FormsModule,
    CommonModule,
    CoreModule,
    ModalModule.forRoot(),
    routing
  ],
  exports: [
    LoginPageComponent
  ]
})
export class AuthenticationModule { }

/app/authentication/authentication.routing.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './components/login-page/login-page.component';

export const routes: Routes = [
  { path: '', component: LoginPageComponent },
  { path: 'login', component: LoginPageComponent, pathMatch: 'full' },
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Answer 2

进行以下更改 -

身份验证路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './components/login-page/login-page.component';

const routes: Routes = [
  { path: '', component: LoginPageComponent, pathMatch: 'full' },
  { path: '/login', component: LoginPageComponent, pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes), //<-- change it to Root if it is parent routing.
  ],
  exports: [
    RouterModule
  ]
})
export class AuthenticationRoutingModule { }

应用模块

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AuthenticationModule } from './authentication/authentication.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    CoreModule,
    AuthenticationModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

您需要在您的app module 中关注import。

RouterModule.forRoot([
{ path: '', loadChildren: 'path/to/authentication.module#AuthenticationModule ' }])

不要忘记将path/to 更改为您的实际路径

Answer 4

您需要从 app.module.ts 中的提供者中删除 AuthenticationModule

只有服务应该保留在 providers 数组中。