Angular服务providedIn:从库导入的根抛出NullInjectorError

Angular服务的providedIn属性用于指定服务的提供者。当使用providedIn: 'root'时，服务将被注册为根注入器的提供者，可以在整个应用程序中的任何地方使用。当使用providedIn: 'any'时，服务将被注册为每个模块的提供者，可以在该模块及其子模块中使用。

NullInjectorError是Angular框架中的一个错误类型，表示注入器无法解析所请求的依赖项。当使用providedIn: 'root'时，如果在根注入器中找不到该服务的提供者，就会抛出NullInjectorError错误。

解决NullInjectorError错误的方法是确保服务已正确注册为提供者。可以通过在服务的@Injectable装饰器中设置providedIn属性为'root'来注册服务为根注入器的提供者。另外，还可以在模块的providers数组中显式地将服务添加为提供者。

以下是一个示例代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  // 服务的实现代码
}

在上述示例中，MyService被注册为根注入器的提供者，可以在整个应用程序中的任何地方使用。

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

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
对象存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse

请注意，以上链接仅供参考，具体选择产品时需根据实际需求进行评估和决策。

相关·内容

Angular 6+依赖注入使用指南：providedIn与providers对比

即使它被多个模块的providers: []重复申明，它也不会重新创建实例。注入器只会创建一个实例，这是因为它们最终都会注册到根级注入器。...然后，组件需要导入该模块，这将导致所有（可能的大量）的服务导入进该组件，即使我们只想使用其中一个服务。...现在，providedIn: 'root'解决了这个问题，我们不需要在模块中导入这些服务，我们要做的仅仅是使用它们。...最佳实践库当处理开发库、实用程序或任何其他形式的可重用 Angular 逻辑时，providedIn: 'root'是非常好的解决方案。...懒加载模块使用 providedIn: LazyServicesModule，然后由 LazyModule 导入，再由 Angular 路由器惰性加载，以实施严格的模块边界和可维护的架构！

2.7K1 1

Angular Library 快速入门

"**/node_modules/**" ] } } } } 我们来重点关注以下属性： root —— 指向 library 库的根文件夹...在应用中使用 sf-lib 库 import { SfLibModule } from "sf-lib"; 以上代码能正常导入 Library，是因为 Angular CLI 会优先从 tsconfig.json...DataService 需要利用 HttpClient 从网络上获取对应的数据，这时我们就需要在 SfLibModule 模块中导入 HttpClientModule 模块，且在 DataService...HttpClient) {} } 在实际开发中，我们可能需要能够灵活配置 DataService 服务中，请求服务器的地址。...DataService) {} ngOnInit() { this.dataService.getData().subscribe(console.log); } } 接着我们在 AppModule 根模块导入

2.3K1 0

Angular Provider 作用域

providedIn: 'root', }) export class UserService { } 示例中 providedIn 的属性值 root 表示服务的作用域范围是根级作用域（AppModule...当你注册根级别的服务时，Angular 会创建一个单独的共享服务实例。如果在 @Injectable 元数据中注册服务，Angular 会在构建阶段自动剔除无用的服务，进而优化我们的应用程序。...因此当我们在跟模块中配置某个服务后，这个服务将在整个应用程序中可用。需要注意的是在非懒加载的特性模块中，如果我们也注册了同一个服务。在根模块和特性模块中是使用同一个服务实例，即服务是单例的。...此外，当我们导入的两个模块中，共用同一个 Token 来配置 provider，后面导入的模块将会生效。...当在懒加载的模块中使用模块外的服务时，它将使用根注入器创建的服务实例。但如果已经在懒加载模块中注册了 provider，在模块内获取对应的服务时，它将从模块的子注入器中获取对应的服务实例。

1.8K2 0

Angular 服务

注意，这个新的服务导入了 Angular 的 Injectable 符号，并且给这个服务类添加了 @Injectable() 装饰器。...默认情况下，Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式，用根注入器将你的服务注册成为提供商。...root',}) @ Injectable ({ providedIn: 'root', }) 当你在顶层提供该服务时，Angular 就会为 HeroService 创建一个单一的、共享的实例，...这节课，你将使用 RxJS 的 of() 函数来模拟从服务器返回数据。打开 HeroService 文件，并从 RxJS 中导入 Observable 和 of 符号。...你在根注入器中把 HeroService 注册为该服务的提供商，以便在别处可以注入它。你使用 Angular 依赖注入机制把它注入到了组件中。

3.3K7 0

augular 英雄之旅

像一组html的集合，可与用户交互，可复用，创建好的项目的src目录下有个app目录，这是整个程序的根组件 app.component.ts— 组件的类代码，这是用 TypeScript 写的。...核心库中导出 Component符号，它是一个装饰器工厂，为组件提供需要的元数据，cli自动生成三个元数据用于为该被装饰的组件指定 Angular 所需的元数据。...2.CLI自动在app.Module.ts中自动导入HeroesCompent(就是cli刚刚生成的heroes.component.ts中的类) 添加属性在class中增加属性即可 import...创建服务模块 ng generate service hero 自动生成service文件，大概是说将会把服务注入到根组件中 import { Injectable } from '@angular/...core'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } } 从rxjs中获取

1.7K2 0

Angular 从入坑到挖坑 - HTTP 请求概览

对应官方文档地址： Angular HttpClient 配套代码地址：angular-practice/src/http-guide 二、Contents Angular 从入坑到弃坑 - Angular...使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览三、Knowledge Graph ?...在使用之前，首先需要在应用的根模块中，引入 HttpClientModule 模块，并添加到 imports 数组中 import { BrowserModule } from '@angular/platform-browser...constructor(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } } 4.1.2、从服务端获取数据...，在发送请求时会按照我们添加的顺序进行执行，而在接受到请求响应时，则是按照反过来的顺序进行执行获取到导出的拦截器信息，就可以在根模块中去导入需要注册的拦截器 import { BrowserModule

5.2K1 0

Angular进阶教程2-

Angular在启动程序时会启动一个根模块，并加载它所依赖的其他模块，此时会生成一个全局的根注入器，由该注入器创建的依赖注入对象在整个应用程序级别可见，并共享一个实例。...在服务类中注入服务 // 这种注入方式，会告诉Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式. // 这种方式注册,不需要再@NgModule装饰器中写providers,...推荐使用此种方式注册服务. @Injectable({ providedIn: 'root' }) 复制代码在根组件还是在子组件中进行服务注入，该怎么选择呢？...使用HttpClient 一般会在根模块下导入HttpClient import { NgModule } from '@angular/core'; import { BrowserModule }...RxJS的实战介绍什么是RxJS 首先RxJS是一个库，是针对异步数据流\color{#0abb3c}{异步数据流}异步数据流编程工具，当然Angular引入RxJS就是让异步更加简单，更加可控，在开始

4.1K3 0

Angular依赖注入详解

一、依赖注入基础 1.1 依赖注入的概念依赖注入的基本思想是:将组件所依赖的服务提供者注入进来,而不是在组件内部直接创建。...二、Angular中的依赖注入 Angular有自己的依赖注入框架,可以自动解析组件的依赖关系,避免了直接在组件中使用new一个服务的紧耦合方式。...@Injectable的作用有: 声明可注入性启用依赖注入设置服务作用域 AOT编译优化 @Injectable({ providedIn: 'root' // 设置为根作用域 }) export...} return super.get(token, notFoundValue); // 默认行为 } } 3.2 提供商配置 @Injectable支持的提供商配置: providedIn...useValue - 使用静态值作为服务实例 @Injectable({ providedIn: 'root', useClass: BetterLoggerService, // 指定实现类

1983 0

Angular 快速学习笔记(1) -- 官方示例要点

创建服务 ng generate service hero import { Injectable } from '@angular/core'; @Injectable({ providedIn...Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...RxJS 库中的一个关键类 c....Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它 b. ng generate module app-routing...HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制 b.

3.6K5 0

Angular 快速学习笔记(1) -- 官方示例要点

3.6K0 0

Angular Meta Service 详解

Meta Service 简介为了让开发者能够方便地操作页面中的 Meta 信息，Angular 为我们提供 Meta 服务。...该服务支持以下的方法： addTag addTags getTag getTags updateTag removeTag removeTagElement 首先要使用 Meta 服务，我们需要从 @angular.../platform-browser 库导入 Meta 类，然后利用 Angular 依赖注入的机制，通过构造注入的方式注入 Meta 服务： import { Injectable } from '@angular..._dom = getDOM(); // 获取DOM适配器 } } 通过观察 Injectable 装饰器的 Meta 元信息，我们知道 Meta 服务将被注册在根级注入器中，当首次获取 Meta 服务时...Meta(inject(DOCUMENT));// 注意这里是小写的inject的哦 } 接下来我们从最简单的 addTag() 方法开始分析。

1.2K2 0

Angular Title Service 详解

Title Service 提供了以下方法： setTitle() getTitle() 首先要使用 Title 服务，我们需要从 @angular/platform-browser 库导入 Title...类，然后利用 Angular 依赖注入的机制，通过构造注入的方式注入 Title 服务： import { Component, OnInit } from "@angular/core"; import....x 版本，但核心的思想是一致的，大家只需根据当前使用的 Angular 版本进行相应的代码更新。...Title Service 源码简析 Title 类及构造函数 @Injectable({providedIn: 'root', useFactory: createTitle, deps: []})...元信息，我们知道 Meta 服务将被注册在根级注入器中，当首次获取 Title 服务时，将使用 createTitle() 工厂方法创建对应的实例。

2K1 0

使用Angular8和百度地图api开发《旅游清单》

，每个 Angular 应用都有一个根模块，通常命名为 AppModule。...根模块提供了用来启动应用的引导机制。一个应用通常会包含很多功能模块。组件每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...class Storage {} ``` 复制代码路由 Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...，添加旅游清单，清除清单的功能，我们利用@Injectable({ providedIn: 'root' })将服务注入根组件以便共享服务。...其次我们使用自己封装的Storage服务来进行持久化数据存储，storage服务如下： import { Injectable } from '@angular/core'; @Injectable(

6K3 0

Angular核心-创建对象-HttpClient

（达内教育学习笔记）仅供学习交流 Angular核心-创建对象 Angular核心-创建对象创建对象的两种方式Angular核心概念---服务和依赖注入创建服务对象的步骤：使用Angular官方提供的服务对象...---HttpClient Service Angular核心-创建对象创建对象的两种方式 Angular核心概念---服务和依赖注入创建服务对象的步骤：使用Angular官方提供的服务对象--...，注入给服务需要者 Angular核心概念—服务和依赖注入 Service：服务，Angular认为：组件与用户交互的一种对象，其中的内容都应该与用户操作有关系的；而与用户操作无关的内容都应该剥离出去，.../core" //所有的服务对象都是“可被注入的” @Injectable({ providedIn:"root" //指定当前服务对象在根模块中提供-appmodule }) export...官方提供的服务对象—HttpClient Service HttpClient 服务对象用于向指定的URl发起异步请求，使用步骤： 1.在主模块中导入HttpClient服务所在的模块 //app.module.ts

1.2K2 0

Angular 从入坑到挖坑 - 路由守卫连连看

对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-combat 二、Contents Angular 从入坑到弃坑 - Angular 使用入门 Angular...从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP 请求概览 Angular 从入坑到挖坑 - Router 路由使用入门指北...Angular 从入坑到挖坑 - 路由守卫连连看三、Knowledge Graph ?...[RouterModule.forRoot(routes)], exports: [RouterModule], }) export class AppRoutingModule { } 之后，在根组件中...这里的问题与配置通配路由需要放到最后的原因相似，因为脚手架在帮我们将创建的模块导入到 app.module.ts 中时，是添加到整个数组的最后，同时因为我们已经将 crisis 模块的路由配置移动到专门的

3.7K3 0

Angular 6.x 快速入门

Angular CLI 是否安装成功 $ ng --version 创建新的项目 $ ng new project-name 启动本地服务器 $ cd project-name $ ng serve...基础知识导入表单模块 import { FormsModule } from '@angular/forms'; // ......(1) 从 @angular/common/http 模块中导入 HttpClient； (2) 使用构造注入，注入 http 服务； (3) 调用 http 服务的 get() 方法，设置请求地址并发送...基础知识组件中注入服务步骤 (1) 创建服务，如： @Injectable({ providedIn: 'root' }) export class MemberService {} (2) 在应用的地方...，导入已创建的服务，如： import { MemberService } from '..

14.1K2 0

Angular 异常处理

一般情况下，我们希望能自动收集线上环境抛出的异常，并上报到指定的异常收集服务器上，以便于对异常信息进行汇总和分析。...，创建根模块对象。...接着通过调用根级注入器的 get() 方法，获取 ErrorHandler 对象。在获取 ErrorHandler 对象之后，通过调用 ngZone !....，感兴趣的同学可以阅读 Angular 2中的Zone 这篇文章。...Angular 内部的异常处理机制。

1.3K2 0

Angular 接入 NGRX 状态管理

schematics"] } } 创建存储 State 的 Store：选项介绍：选项作用 --root 目标模块为根模块时设置 --module 提供目标模块的路径 --state-path...仅包含导入模块的一行代码： import { createFeatureSelector, createSelector } from '@ngrx/store'; 使用导入的函数创建适用于 User...安装 effects 核心模块： npm install @ngrx/effects --save 创建 User 的副作用：选项介绍：选项作用 --root 目标模块为根模块时设置 --module...'@angular/core'; import { Observable, map, timer } from 'rxjs'; @Injectable({ providedIn: 'root',...PS：以上案例使用 Zorro 组件库，完整代码可访问 github.com/OSpoon/angu…

1711 0

🔥【Angular教程】路由入门

imports: [ BrowserModule, HomeRoutingModule, AppRoutingModule, ] 注：用cli创建的模块会自动配置到根模块...移除根模块中关于Home模块的导入,使得模块完整分离微调home-routing中home组件的path配置为"" const routes: Routes = [{ path: '',...与懒加载相对的预加载 angular中配置懒加载后模块的加载被延迟到来使用时，但是有一些组件是需要优先加载并在使用的时候可以及时运行。...angular中的Router模块提供来两种预加载的策略：完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。预加载所有惰性加载的特性区。...通过cli来生成一个服务用来完成我们的预加载策略：ng generate service selective-preloading-strategy 将我们创建的服务实现接口PreloadingStrategy

4.3K5 0

从 Angular Route 中提前获取数据

通过本文，你将学会使用 resolver，在 Angular App 中应用 resolver，应用到一个公共的预加载导航。...\n\n### 你为什么应该使用 Resolver\n\nResolver 在路由跟组件之间扮演着中间件服务的角色。...一个 resolver 就是一个中间件服务，所以我们将创建一个服务。..._postsService.getPostList();\n }\n}\n\n\n帖子列表数据从 resolver 中返回。...现在，你需要一个路由去配置 resolver，从路由获取数据，然后让数据展示在组件中。为了进行路由跳转，我们需要创建一个组件。\n\nbash\n

6.1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Angular服务providedIn:从库导入的根抛出NullInjectorError

相关·内容

Angular 6+依赖注入使用指南：providedIn与providers对比

Angular Library 快速入门

Angular Provider 作用域

Angular 服务

augular 英雄之旅

Angular 从入坑到挖坑 - HTTP 请求概览

Angular进阶教程2-

Angular依赖注入详解

Angular 快速学习笔记(1) -- 官方示例要点

Angular 快速学习笔记(1) -- 官方示例要点

Angular Meta Service 详解

Angular Title Service 详解

使用Angular8和百度地图api开发《旅游清单》

Angular核心-创建对象-HttpClient

Angular 从入坑到挖坑 - 路由守卫连连看

Angular 6.x 快速入门

Angular 异常处理

Angular 接入 NGRX 状态管理

🔥【Angular教程】路由入门

从 Angular Route 中提前获取数据

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐