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.