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

Question

我是Angle模块的新手，并且将（工作中的）应用程序切成这些单独的模块以进行启动：

/app
    /core
    /admin
    /authentication
    /wst

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

错误：StaticInjectorError（AppModule）[RouterModule->路由器]：
StaticInjectorError（平台：核心）[RouterModule->路由器]：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.module.ts内的提供程序中删除AuthenticationModule

仅服务应保留在提供者数组下。

Answer 2

您需要在app module import以下内容。

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

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

Answer 3

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

进行以下更改-

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