NullInjectorError: 没有 ViewportScroller 的提供者 [英] NullInjectorError: No provider for ViewportScroller
问题描述
我正在构建一个简单的 Angular 应用程序,使用 Angular Material 设计前端.该应用程序只有 2 个组件呈现在同一页面中.当我提供应用程序时,它会在控制台中返回:
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(平台:核心)[RouterScroller -> ViewportScroller]:NullInjectorError: 没有 ViewportScroller 的提供者!"
NullInjectorError: "StaticInjectorError(AppModule)[RouterScroller -> ViewportScroller]: StaticInjectorError(Platform: core)[RouterScroller -> ViewportScroller]: NullInjectorError: No provider for ViewportScroller!"
AppModule.ts
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
appComponents.ts
import { Component } from '@angular/core';
Material.ts(所有角度材料组件的模块)
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:
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:
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 { }
推荐答案
我有同样的错误 - 在项目中更新 Angular 对我有用(这是一个只有 Angular Material 的新项目,很少简单的组件和简单的路由).
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
作为错误的解决方案export 'ɵɵinject' not found in '@angular/core'(在将 Angular Material 添加到全新项目后抛出).
as a solution for error "export 'ɵɵinject' was not found in '@angular/core' (thrown after adding Angular Material to a brand new project).
它一直有效,直到我添加了路由并得到 NullInjectorError: No provider for ViewportScroller.但正如开头提到的 - 将整个项目更新到 Angular v8 似乎是解决方案.
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.
这篇关于NullInjectorError: 没有 ViewportScroller 的提供者的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!