我正在构建一个简单的角度应用程序,使用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 { }
小智.. 45
我遇到了同样的错误- 更新项目中的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”(在将Angular Material添加到全新项目中后抛出)中未找到“导出'?inject”。
直到我添加路由并得到NullInjectorError:ViewportScroller的没有提供程序,它才起作用。但是正如开头提到的那样-将整个项目更新为Angular v8似乎是解决方案。
我遇到了同样的错误- 更新项目中的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”(在将Angular Material添加到全新项目中后抛出)中未找到“导出'?inject”。
直到我添加路由并得到NullInjectorError:ViewportScroller的没有提供程序,它才起作用。但是正如开头提到的那样-将整个项目更新为Angular v8似乎是解决方案。