热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

NullInjectorError:ViewportScroller没有提供程序

如何解决《NullInjectorError:ViewportScroller没有提供程序》经验,为你挑选了1个好方法。

我正在构建一个简单的角度应用程序,使用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似乎是解决方案。



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”(在将Angular Material添加到全新项目中后抛出)中未找到“导出'?inject”

直到我添加路由并得到NullInjectorError:ViewportScroller的没有提供程序,它才起作用。但是正如开头提到的那样-将整个项目更新为Angular v8似乎是解决方案。


我已经按照此答案中所述的相同过程进行了操作,但是当我执行`ng update @ angular / cli @ angular / core`时,出现错误`Package“ @ angular / compiler-cli”与“ @angular”具有不兼容的对等项依赖/ compiler”(需要“ 8.2.0-next.2”,将安装“ 8.1.2”)程序包“ @ angular / compiler-cli”与“ @ angular / compiler”具有不兼容的对等项依赖关系(需要“ 8.2.0” -next.2”(扩展),将安装“ 8.1.2”)。因此,我必须先运行ng update @ angular / compiler,然后再更新cli和core,一切正常!
推荐阅读
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 必须先赞下国人npm库作品:node-images(https:github.comzhangyuanweinode-images),封装了跨平台的C++逻辑,形成nodejsAP ... [详细]
  • RN即ReactNative基于React框架针对移动端的跨平台框架,在学习RN前建议最好熟悉下html,css,js,当然如果比较急,那就直接上手吧,毕竟用学习前面基础的时间,R ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • Netty源代码分析服务器端启动ServerBootstrap初始化
    本文主要分析了Netty源代码中服务器端启动的过程,包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用,深入理解Netty服务器端的启动过程。同时,还介绍了LoggingHandler的作用和使用方法,帮助读者更好地理解Netty源代码。 ... [详细]
  • 程序员如何选择机械键盘轴体?红轴和茶轴对比
    本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • PRML读书会第十四章 Combining Models(committees,Boosting,AdaBoost,决策树,条件混合模型)...
    主讲人网神(新浪微博:豆角茄子麻酱凉面)网神(66707180)18:57:18大家好,今天我们讲一下第14章combiningmodel ... [详细]
  • ReactJSUIAnt设计空组件原文:https://w ... [详细]
  • 本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ... [详细]
  • 前言:原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函 ... [详细]
author-avatar
龙猫123456
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有