NullInjectorError: Нет провайдера для ViewportScroller
Я создаю простое угловое приложение, используя Angular Material для разработки внешнего интерфейса. Приложение имеет только 2 компонента, отображаемых на одной странице. Когда я обслуживаю приложение, это возвращается в консоли:
NullInjectorError: "StaticInjectorError (AppModule) [RouterScroller → ViewportScroller]: StaticInjectorError (Платформа: ядро) [RouterScroller → ViewportScroller]: NullInjectorError: Нет поставщика для ViewportScroller!"
AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Material } from './Material';
import { DataFormComponent } from './data-form/data-form.component';
import { TemplateFormComponent } from './template-form/template-form.component';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
DataFormComponent,
TemplateFormComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
Material,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
appComponents.ts
import { Component } from '@angular/core';
Material.ts (модуль для всех угловых компонентов материала)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {MatTabsModule} from '@angular/material/tabs';
import {MatInputModule} from '@angular/material';
import {MatCardModule} from '@angular/material/card';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
imports:
[
BrowserAnimationsModule,
MatTabsModule,
MatCardModule,
MatToolbarModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule
],
exports:
[
BrowserAnimationsModule,
MatTabsModule,
MatCardModule,
MatToolbarModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule
],
})
export class Material { }
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'forms';
}
AppRoutingModule.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CursoModule } from './curso/curso.module';
const routes: Routes = [
{
path: '', pathMatch: 'full', redirectTo: 'curso'
},
{
path: 'curso', loadChildren: './curso/curso.module#CursoModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
cursp-routing.module.ts:
import { CursosComponent } from './cursos.component';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CursoListaComponent } from './curso-lista/curso-lista.component';
const routes = [
{
path: '', component: CursoListaComponent
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CursoRouting { }
Ответы
Ответ 1
У меня была та же ошибка - обновление Angular в проекте работает для меня (это новый проект, содержащий только Angular Material, несколько простых компонентов и простую маршрутизацию).
ng update @angular/cli @angular/core
https://update.angular.io/#7.2:8.0
Ошибка произошла после того, как я сделал:
npm install -S @angular/material @angular/cdk @angular/animations
npm uninstall @angular/core
npm install -S @angular/core
как решение для ошибки "экспорт" jectinject "не найден в" @angular/core " (создается после добавления Angular Material в новый проект).
Это работало, пока я не добавил маршрутизацию и не получил NullInjectorError: Нет провайдера для ViewportScroller. Но, как уже упоминалось в начале, обновление всего проекта до Angular v8 кажется решением.
Ответ 2
Убедитесь, что все ваши пакеты имеют одинаковую версию. Смотрите эту проблему https://github.com/angular/angular/issues/31425
Ответ 3
Вы уже импортировали, как это?
Не забудьте включить компонент также
RouterModule.forRoot([{ path: 'some-view', component: SomeViewComponent}],
{ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled'})
Ответ 4
извините, у меня та же проблема. Я и мой коллега обновили версию с угловой 7 до угловой 8, и у нас возникла та же проблема. Почему ViewportScroller? Я не использую его, и он мне не нужен, но у меня в консоли есть тот же текст: "NullInjectorError:" StaticInjectorError (AppModule) [RouterScroller → ViewportScroller]: StaticInjectorError (Платформа: ядро) [RouterScroller → ViewportScroller]: NullInjectorError: Нет провайдера для ViewportScroller! "