代码之家 › 专栏 › 技术社区 › Perrier

如何使用角模(NullInjectorError:没有路由器的提供程序)

angular-module angular-router typescript angular

Perrier · 技术社区 · 6 年前

我是angular模块的新手,我已经将我的(工作)应用程序分为以下几个单独的模块:

/app
    /core
    /admin
    /authentication
    /wst

错误:StaticInjectorError(AppModule)[RouterModule->路由器]:
StaticInjectorError(平台:核心)[路由模块->路由器]: NullInjectorError:没有路由器的提供程序!

/应用程序/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 { }

4 回复 | 直到 6 年前

Sajeetharan 6 年前

你需要移除 AuthenticationModule 来自app.module.ts内的提供商

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

Yousef khan 6 年前

你需要 import 跟着你的 app module

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

别忘了换衣服 path/to

Perrier 6 年前

我的代码有几个问题,包括我得到的解决方案。其中一个原因是我删除了app.component.html中的标签。工作模块:

/应用程序/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 { }

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);

-1

Sunil Singh 6 年前

进行以下更改-

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