NullInjectorError: No provider for ViewportScroller

Question

I'm building a simple angular application, using Angular Material to desing the front-end. The app just have 2 components rendered in the same page. When I serve the app, this is returned in the console:

NullInjectorError: "StaticInjectorError(AppModule)[RouterScroller -> ViewportScroller]: StaticInjectorError(Platform: core)[RouterScroller -> ViewportScroller]: NullInjectorError: No provider for 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(module for all angular material components)

                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

I had the same error - updating Angular in a project workes for me (it is a new project with only Angular Material, few simple components and simple routing).

ng update @angular/cli @angular/core 

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

The error ocurred after I did:

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

as a solution for error "export 'ɵɵinject' was not found in '@angular/core' (thrown after adding Angular Material to a brand new project).

It worked until I added routing and got NullInjectorError: No provider for ViewportScroller. But as mentioned in the beginning - updating the whole project to Angular v8 seems the solution.

Answer 2

Make sure all of your packages are the same version. See this issue https://github.com/angular/angular/issues/31425