首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

错误:必须从注入上下文调用inject() -将angular 8升级到9

错误: 必须从注入上下文调用inject() - 将Angular 8升级到9

这个错误是由于在Angular应用程序中使用了错误的依赖注入方式导致的。在将Angular 8升级到9时,Angular的依赖注入方式发生了一些变化。

在Angular 9中,如果要在组件或服务中使用依赖注入,应该使用@Injectable()装饰器来定义服务,并使用constructor(private service: ServiceName)的方式来注入服务。

以下是解决这个错误的步骤:

  1. 确保你的Angular版本已经升级到9或更高版本。
  2. 打开引发错误的组件或服务文件。
  3. 确保在该文件的顶部导入Injectable装饰器:
  4. 确保在该文件的顶部导入Injectable装饰器:
  5. 在组件或服务类上使用@Injectable()装饰器:
  6. 在组件或服务类上使用@Injectable()装饰器:
  7. 注意:MyServiceOtherService是示例服务名称,你需要根据实际情况进行替换。
  8. 确保在组件或服务的构造函数中使用正确的依赖注入方式:
  9. 确保在组件或服务的构造函数中使用正确的依赖注入方式:
  10. 注意:ServiceName是你要注入的服务名称,你需要根据实际情况进行替换。
  11. 保存文件并重新编译你的Angular应用程序。

这样,你应该能够解决这个错误并成功将Angular 8升级到9。如果你仍然遇到问题,可以检查其他相关的依赖注入代码或查阅Angular官方文档以获取更多帮助。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。产品介绍链接
  • 腾讯云云数据库MySQL版:高性能、可扩展的关系型数据库服务。产品介绍链接
  • 腾讯云对象存储(COS):安全、稳定、高扩展性的云端存储服务。产品介绍链接
  • 腾讯云人工智能(AI):提供丰富的人工智能服务和解决方案,包括图像识别、语音识别、自然语言处理等。产品介绍链接
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • AngularJS源码分析之依赖注入$injector

    而对于instanceInjector而言,主要用于执行providerInjector获取的provider对象的$get方法,生产服务对象(依赖),并将服务对象传递给相应的函数,完成IoC。...$provide对象上,而我们通过angular.module('app',[]).provider(...)方式调用的provider函数,会在module加载期间调用(该调用抽象成一个数组,即[provider...首先确定AngularJS上下文的范围,并且获取依赖模块(在此处为空); 继续注册服务(依赖),serviceProvider缓存至providerCache中; 声明控制器; 在此获取$injector...对于$scope和$location服务而言,在AngularJS初始化时已经注入Angular中,因此可以获取相应的provider对象,执行相关的方法返回$scope和$location对象,而locationService...最后所有的依赖组装成数组[$scope,locationService,$location]作为参数传递给匿名函数执行。 至此,依赖注入完成。

    1.2K50

    Angular与MVVM框架

    作者更希望大家关注于实现一个成功的,具有好的设计以及遵循“分离关注点”原则的应用程序,而不是去争论MV*,所以他angular称为MVW框架,是什么并不重要,只要适合你的应用就行。...这使得Javascript的执行被分成原始部分和拥有AngularJS执行上下文的部分。...通过调用上一步所说的链接函数来模板与作用域链接起来。这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用域的的监听。这样最后就形成了作用域的DOM的动态绑定。...内部(即Angular Context之内)都已经做了$apply操作,只有在Angular Context之外的情况需要手动触发$digest,如: 使用setTimout修改scope(这种情况我们除了手动调用...angular适合构建CRUD应用,因为它具有构建一个CRUD应用时可能用到的所有技术:数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入

    3.9K90

    Angular与MVVM框架

    作者更希望大家关注于实现一个成功的,具有好的设计以及遵循“分离关注点”原则的应用程序,而不是去争论MV*,所以他angular称为MVW框架,是什么并不重要,只要适合你的应用就行。...这使得Javascript的执行被分成原始部分和拥有AngularJS执行上下文的部分。...通过调用上一步所说的链接函数来模板与作用域链接起来。这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用域的的监听。这样最后就形成了作用域的DOM的动态绑定。...内部(即Angular Context之内)都已经做了$apply操作,只有在Angular Context之外的情况需要手动触发$digest,如: 使用setTimout修改scope(这种情况我们除了手动调用...angular适合构建CRUD应用,因为它具有构建一个CRUD应用时可能用到的所有技术:数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入

    2.6K20

    Angular专题】——(2)【译】Angular中的ForwardRef

    Make sure they all have valid type or annotations 错误信息显示,AppComponent的构造函数在被调用时,同一个文件中声明的NameService...从上面的示例中不难看出,如果Javascript解释器对class声明也进行提升处理,就容易在类继承时出现基类未定义的错误。 三. class在使用前必须声明吗?...我们理解了class为什么不适合被提升执行顺序,这对于之前的Angular的示例来说有什么指导意义呢?我们只能通过NameService移动到代码顶部的方式来解除之前的报错吗?...我们使用@Inject注解和forwardRef函数来替代之前方式,也就是声明一个NameService类型的参数nameService,如下所示: import { Component, Inject...但有时候循环引用可能无法避免,当类A引用类B,同时B又引用A时,就会陷入困境:它们中的某一个必须先定义。 forwardRef( )建立一个间接引用,供Angular随后解析。

    3.2K20

    达观数据对AngularJS技术的思考与实践

    一、Angular MVC模型: MVC作为web应用程序的一种优秀的设计模式,由model,veiw,controller三部分组成,它隔离了应用逻辑用户界面层和支持的关注点分离,所以常受欢迎。...进一步系统的划分它的作用和功能: 1.提供了观察者可以监听数据模型的变化 2.可以数据模型的变化通知给整个 App 3.可以进行嵌套,隔离业务功能和数据 4.给表达式提供上下文执行环境 $scope类似于...但是需要注意,这种双向绑定仅限于angular上下文,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。例如: ?...AngularJs允许自定义filter:在你的模块中注册一个新的过滤器(可注入的)工厂函数。这个工厂函数必须放回一个新的过滤器函数,这个过滤函数的第一个参数接受的是输入。...2)$inject标记:要允许压缩类库重命名函数参数,同时注入器又能正确处理依赖的话,函数需要使用$inject属性。这个属性是一个包含依赖的名称的数组。

    5.4K150

    如何在Vue3中使用上下文模式,在React中使用依赖注入模式🚀🚀🚀

    今天的话题是两种常见的设计模式:上下文模式和依赖注入模式。这两种不同的设计模式,通常用于软件系统中实现组件之间的数据共享和依赖管理。...作为耳熟能详的常见功能,这里就不详细展开定义了,我们单纯的使用角度去解读他们的区别。...他们通常在跨组件通信中被提到,比如,React、Svelte、SolidJS都用了Context上下文模式,Vue、Angular中使用了依赖注入模式。...为了可以需要的数据注入到组件中,我们需要在此基础上提供一个高阶组件数据注入到其中:import React from "react";const dependencies = {}export function...mapper方法export default inject(Ohther, ['name'], name => ({ name })依赖注入其实是个很热门的话题,常常还会提到控制反转,不过这不是今天的话题

    37500

    AngularDart4.0 指南- 依赖注入

    你很少自己创建一个Angular注入器。 Angular在执行应用程序时为您创建注入器,引导过程中创建的根注入器开始。 在注入器可以创建该服务之前,您必须向providers注册注入器。...元数据注解必须是对编译时常量变量的引用,或对Injectable()等常量构造函数的调用。 如果忘记括号,分析器将会抱怨:“注解创建必须有参数”。...注入器依靠提供者创建注入注入组件,指令,管道和其他服务的服务实例。 您必须使用注入器注册服务provider,否则将不知道如何创建服务。 接下来的几节解释你可以注册一个提供者的许多方法。...注解帮助配置对象注入到任何需要它的构造函数中: AppComponent(@Inject(appConfigToken) Map config) : title = config['title'];...他们通过调用injector.get()来检索。 如果get()方法无法解析请求的服务,则会引发错误。 您可以使用第二个参数调用get(),如果未找到该服务,则返回该值。

    5.7K20

    JavaScript 中的依赖注入

    A 类和 B 的实现完全分离开来了,他们无需再关心依赖的实例化,因为我们依赖的注入提到的最外侧。...在 JavaScript 的各大框架中,依赖注入的设计模式也发挥着非常重要的作用,在 Angular、Vue.js、Next.js 等框架中都用到了依赖注入的设计模式。...JavaScript 框架中的依赖注入 AngularAngular 中大量应用了依赖注入的设计思想。...Angular 使用依赖注入来管理应用的各个部分之间的依赖关系,以及如何这些依赖关系注入到应用中,例如你可以使用依赖注入注入服务、组件、指令、管道等。...在 Koa 中,Controller 用来处理用户请求和响应,它负责接收用户的请求,然后调用相应的服务或业务逻辑进行处理,最后处理结果返回给用户。

    1.8K31

    高级 Vue 组件模式 (2)

    这里简单介绍下 provide/inject 的功能,它允许某个父组件向子组件注入一个依赖项(这里的父子关系可以跨域多个层级,也就是祖先与后代),如果我们在其他 mvvm 框架对比来看的话,你可以发现其他框架也具有相同的特性...,比如: angularjs: directive 中的 require 属性来声明注入逻辑 Angular: 依赖注入中组件级别的注入器 React: context 上下文对象 想进一步了解的话,可以参考官方文档...对于其他三个组件,其内部实现逻辑十分简单,相信读者通过参考在线代码实例马上就能看懂,这里只提一下关于 inject 声明注入依赖的逻辑,如下: inject: { toggleComp: "toggleComp...成果 通过复合组件的方式,我们 toggle 组件划分为了三个更小的、职责更加单一的子组件。...同时由于 toggle-on 和 toggle-off 都使用 slot 来动态地注入组件调用者在其内部包含的自定义渲染逻辑,其灵活性得到了进一步的提升,只要这三个组件是作为 toggle 组件的子组件来调用

    74620

    AngularDart 4.0 高级-安全

    Angular的跨站脚本安全模型 要系统地阻止XSS错误Angular默认所有值视为不可信。...当一个值通过属性,属性,样式,类绑定或插值模板插入到DOM中时,Angular会清理并转义不受信任的值。...消毒取决于上下文:CSS中的无害值在URL中可能是危险的。 Angular定义了以下安全上下文值解释为HTML时使用HTML,例如绑定到innerHtml时。...模板代码注入Angular应用程序与将可执行代码注入应用程序相同:它使攻击者可以完全控制应用程序。 为防止出现这种情况,请使用自动转义值的模板语言来防止服务器上的XSS漏洞。...不要使用模板语言在服务器端生成Angular模板; 这样做带来了引入模板注入漏洞的高风险。 信任安全值 有时应用程序真的需要包含可执行代码,某个URL显示,或构建潜在的危险URL。

    3.6K20

    Angular 2 + 折腾记 :(3)初步了解服务及使用

    // vehicle-fault.service.ts // 服务类必须引入这个 import { Injectable } from '@angular/core'; // 自己封装的鉴权 import.../environments/environment'; // 不可忘记括号,任何装饰器都一样,防止莫名的错误 @Injectable() export class VehicleFaultService...大致有那么两种; 模块内注入,整个模块内的components皆可以使用 import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用...BrowserModule,其他一些模块需要用到一些内置指令(*ngIf,*ngFor这些的)必须引入这个 -- 内置 import { CommonModule } from '@angular...,还需要引入Inject,core里面 -- 在components // 然后放在construcor里面,写法如下 // constructor(@Inject('vfault') private

    1.6K20

    AngularJS in Action读书笔记3——走近Services

    什么是models和services hello,service   什么是services,技术层面来说,angularjs中的service就是抽取的一些公用的功能函数封装起来可以在整个应用中调用...service的生命周期 首先在angular.module定义service; 在compilation阶段,service在完成实例创建,并注册到工厂类上; 当需要调用这个service时,$inject...如果缓存上有,那么$inject就会从缓存上取出这个service的实例完成注入;否则,$inject服务就会请求工厂类为其重新创建一个service并返回这个service的实例以供调用。   ...前面的代码中,我们定义了一个名为LoadingService的service,我们可以具有上下文的this对象赋值给了service变量。   ...这里的then接收三个参数——成功回调、错误回调以及状态变化回调。

    95290

    Angular开发实践(六):服务端渲染

    示例解析 下面基于我在GitHub上的示例项目 angular-universal-starter 来进行讲解。...安装工具 在开始之前,下列包是必须安装的(示例项目均已配置好,只需 npm install 即可): @angular/platform-server - Universal 的服务端元件。...此时,我们可以通过依赖注入(@Inject(PLATFORM_ID) 及 @Inject(APP_ID))取得关于当前平台和 appId 的运行时信息: constructor(@Inject(PLATFORM_ID...如果你使用不同于Node的服务端技术,你需要在该服务端的模板引擎中调用这个函数。 第一个参数是你以前写过的 AppServerModule。...它是在这个服务器上运行时才需要的一些可选的 Angular 依赖注入提供商。当你的应用需要那些只有当运行在服务器实例中才需要的信息时,就要提供 extraProviders 参数。

    4.8K100

    webpack+es6+angular1.x项目构建

    eslint ESLint是一个QA工具,用来避免低级错误和统一代码的风格。尤其是多人开发的情境下,规范代码,统一风格是非常重要的。即便每个人负责自己的模块,在实际执行的时候也难免有交集。...这个目录,还可以细分,比如angular的provider,service,value等等再进行划分。...}); } } export default loginCtrl; 这个类主要完成的业务就是发送一个登陆http请求,这里的http是二次封装的一个服务,与注入原生依赖无异,有两种注入方式...,一种是上边的在class中调用静态方法。...即static inject=[‘http′];另一种是loginCtrl.inject = [‘http’]; 另一种是loginCtrl.inject = [‘http’];(class不存在变量提升

    88230

    Angular 16 正式版发布

    在之前的Angularv15中,Angular团队通过独立API开发者预览版升级至稳定版,在Angular的简易性和开发者体验方面达到了一个重要的里程碑。...我们介绍一种新的RxJS操作符takeUntilDestroyed,简单使用示例如下: data$=http.get('…').pipe(takeUntilDestroyed()); 默认情况下,此操作符注入当前的清理上下文...接下来,在我们这一特性开发者预览提升到正式版之前,我们解决对 i18n 的支持问题。...3.4 自动完成模板中的导入 你使用模板中的组件或管道 CLI 或语言服务中获得错误的次数是多少次,而实际上没有导入相应的实现?我猜应该是很多次。语言服务现在允许自动导入组件和管道。...DestroyRef 可以被注入注入上下文中的任何位置,包括组件之外 —— 在这种情况下,当相应的注入器被销毁时,ngDestroy 钩子就会被执行: import { Injectable, DestroyRef

    2.5K10
    领券