Как использовать угловые модули?(NullInjectorError: Нет провайдера для маршрутизатора)

Question

Я новичок в угловых модулях, и я разделил мое (рабочее) приложение на эти отдельные модули для запуска:

/app
    /core
    /admin
    /authentication
    /wst

У всех папок есть файл * .module.ts, в некоторых из них тоже есть файл * .routing.module.ts. Сначала я был бы рад видеть мою страницу входа, которая является компонентом в модуле аутентификации, но я получил только ошибки. Прямо сейчас написано:

Ошибка: StaticInjectorError (AppModule) [RouterModule -> Router]:
StaticInjectorError (Платформа: ядро) [RouterModule -> Router]: 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 { }

/ приложение / аутентификации / 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 { }

/ приложение / аутентификации / 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

Вам необходимо удалить AuthenticationModule у провайдеров внутри app.module.ts

В массиве провайдеров должны оставаться только сервисы.

Answer 3

Вам необходимо import подписаться на app module.

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

Не забудьте изменить path/to на ваш фактический путь

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