How to use angular modules? (NullInjectorError: No provider for Router)

Question

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

/app
    /core
    /admin
    /authentication
    /wst

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

Error: StaticInjectorError(AppModule)[RouterModule -> Router]:
StaticInjectorError(Platform: core)[RouterModule -> Router]: NullInjectorError: No provider for Router!

我尝试在所有相关的地方和其他一些不相关的地方添加路由器模块，但仍然如此。为什么会出现此错误？缺少什么？

/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

进行以下更改 -

AuthenticationRoutingModule

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 { }

AppModule

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 2

您需要从 app.module.ts

中的提供商中删除 AuthenticationModule

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

Answer 3

您需要import关注您的app module。

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

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

Answer 4

我的代码有几个问题，包括我得到的解决方案。其中之一是我以某种方式删除了 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);

How to use angular modules? (NullInjectorError: No provider for Router)