Question

我正在构建一个简单的角度应用程序，使用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 { }

Answer 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

作为错误的解决方法“在'@ angular / core'中未找到导出'ɵɵinject'（在将Angular Material添加到全新项目中后抛出）。

直到我添加路由并得到 NullInjectorError：ViewportScroller的提供程序之前，它一直有效。但是正如开头提到的那样-将整个项目更新为Angular v8似乎是解决方案。

Answer 2

对不起，我遇到了同样的问题。我和我的同事将版本从angular 7更新到了angular 8，我们遇到了同样的问题。为什么要使用ViewportScroller？我不使用它，也不需要它，但是在控制台中有相同的文本： “ NullInjectorError：” StaticInjectorError（AppModule）[RouterScroller-> ViewportScroller]： StaticInjectorError（平台：核心）[RouterScroller-> ViewportScroller]： NullInjectorError：没有ViewportScroller提供程序！”

Answer 3

确保所有软件包均为相同版本。看到这个问题https://github.com/angular/angular/issues/31425

Answer 4

如果您认为已在每个ngmodule文件中设置了所有配置，则它不起作用。您对角铁芯，角材料和角cdk的版本有疑问。这样做：

通过删除node_modules /和package-lock.json /和yarn-lock（如果存在）并运行新的npm install解决

Answer 5

我遇到了这个问题，这是因为我在 *cdkVirtualFor 元素上有 cdk-virtual-scroll-viewport。一旦我将它移到孩子 ng-container 中，它就起作用了。

Answer 6

您已经这样导入了吗？

确保还包括该组件

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

NullInjectorError：ViewportScroller没有提供程序

6 个答案: