angular - NullInjectorError: no hay proveedor para ViewportScroller

angular-material

Question

Estoy construyendo una aplicación angular simple, usando material angular para diseñar el front-end. La aplicación solo tiene 2 componentes representados en la misma página. Cuando sirvo la aplicación, esto se devuelve en la consola:

NullInjectorError: "StaticInjectorError (AppModule) [RouterScroller -> ViewportScroller]: StaticInjectorError (Platform: core) [RouterScroller -> ViewportScroller]: NullInjectorError: ¡No hay proveedor para 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 (módulo para todos los componentes de material angular)

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

Answer 1

¿Ya has importado así?

Asegúrese de incluir el componente también

 RouterModule.forRoot([{ path: ''some-view'', component: SomeViewComponent}],
{ anchorScrolling: ''enabled'', scrollPositionRestoration: ''enabled''})

Answer 2

Tuve el mismo error: actualizar Angular en un proyecto me funciona (es un proyecto nuevo con solo material angular, pocos componentes simples y enrutamiento simple).

ng update @angular/cli @angular/core

https://update.angular.io/#7.2:8.0

El error ocurrió después de que lo hice:

npm install -S @angular/material @angular/cdk @angular/animations
npm uninstall @angular/core
npm install -S @angular/core

como solución para el error "exportar ''ɵɵinject'' no se encontró en ''@ angular / core'' (lanzado después de agregar material angular a un proyecto nuevo).

Funcionó hasta que agregué enrutamiento y obtuve NullInjectorError: No hay proveedor para ViewportScroller . Pero como se mencionó al principio, actualizar todo el proyecto a Angular v8 parece la solución.