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

在子子延迟加载模块中的解析器服务上的Angular 9 NullInjectorError

是一个错误,它表示在Angular 9应用程序中的子子延迟加载模块中找不到解析器服务的实例。

解析器服务在Angular中用于解析模板中的指令、组件和管道,并将它们转换为可执行的代码。当Angular应用程序尝试在子子延迟加载模块中使用解析器服务时,如果没有正确配置或提供解析器服务的实例,就会出现NullInjectorError。

解决这个错误的方法是确保在子子延迟加载模块中正确配置和提供解析器服务的实例。以下是一些可能导致该错误的常见原因和解决方法:

  1. 检查子子延迟加载模块的providers数组:在子子延迟加载模块中,确保已正确配置解析器服务的提供者。可以通过在子子延迟加载模块的providers数组中添加解析器服务的提供者来实现。例如:
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyResolverService } from './my-resolver.service';

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    MyResolverService
  ]
})
export class MyLazyLoadedModule { }
  1. 检查解析器服务的注入方式:确保在子子延迟加载模块中正确注入解析器服务。可以通过在需要使用解析器服务的组件的构造函数中注入解析器服务来实现。例如:
代码语言:txt
复制
import { Component } from '@angular/core';
import { MyResolverService } from './my-resolver.service';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent {
  constructor(private resolver: MyResolverService) { }
}
  1. 检查解析器服务的提供者是否正确导入:确保解析器服务的提供者已正确导入到子子延迟加载模块中。可以通过在子子延迟加载模块中导入解析器服务的提供者来实现。例如:
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyResolverService } from './my-resolver.service';

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    MyResolverService
  ]
})
export class MyLazyLoadedModule { }

如果以上方法都没有解决问题,可能需要进一步检查Angular应用程序的配置和依赖项是否正确,并确保解析器服务的实例在子子延迟加载模块中可用。

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

请注意,以上链接仅供参考,具体的产品和服务选择应根据实际需求和情况进行。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular 2路由工作原理是什么? 路由是能够让用户视图/组件之间导航机制。Angular 2简化了路由,并提供了模块级(延迟加载)下配置和定义灵活性。 ...Angular2,组件中发生任何改变总是从当前组件传播到其所有组件。如果一个组件更改需要反映到其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...什么是延迟加载?如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大性能开销。...延迟加载使我们只加载用户正在交互模块,而其余模块会在运行时按需加载延迟加载通过将代码拆分成多个包并以按需加载方式,来加速应用程序初始加载过程。...启用延迟加载Plunkr示例:  我们不需要在根模块中导入或声明延迟加载模块。 将路由添加到顶层路由(app.routing.ts)并设置loadChildren。

17.3K80

angular面试题及答案_angular面试

None:组件定义样式对所有组件都是可见9....传统web技术,客户端请求一个web页面(HTML/JSP/asp),服务器返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。...angular路由器使用base href 作为组件、模板基地址,开发期间,通常会在index.html所在目录启动服务器,所以这个目录就是根目录,所以可以index.html 顶部添加<base...Angular加载 默认情况下,初始化时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载加载 : 通俗 讲就是进入主模块之后,子模块加载,等真正访问到子模块之后,再去加载...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。

10.9K120

无需框架,就能实现微前端,理解起来通俗易懂

为什么需要微前端 假设你正在一个项目中使用一个特定框架或库(比如React.js),但你需要切换到另一个框架或库,或者添加另一个另一个框架(比如Angular.js)编写模块。...我们可以开发包含认证和路由实现主父应用程序,然后我们可以继续添加多个独立工作应用程序,可以相同或不同页面加载。...单个页面上使用多个框架 项目结构 我们将构建三个模块,即React主应用、React应用和Angular应用。...我们可以用create-react-app来创建Reactmain-app、sub-app,用Angular CLI来Angular创建app。...您可以使用本机web浏览器事件机制进行通信,而且它不需要任何额外库。 归纳 许多情况下,微前端简化了开发,它们基本是前端微服务实现。

2K20

52ABP-PRO 前后端分离架构概述

部署服务时候,不用考虑他们必须在一台服务,只需要在部署时候,指定好对应 IP 或者域名以及端口号。就可以部署成功。...因为当 Angular 项目被部署出来时候,它实际是一个 HTML+JS 和 CSS 网站,它可以在任何操作系统和 Web 服务提供服务。...我们建议将模块化思想贯彻到底,应用程序划分为更小模块,就像我们启动项目中所做那样,而不是将所有功能添加到主模块。尽量使用懒加载形式。 作为基础设施模块,都应该有自己路由。...Angular 模块都是基于其 url 加载模块,我们建议启用路由器延迟加载。...shared/utils/utils.module:所有模块(及其子模块)使用另一个常用模块。我们尝试在这里收集通用代码,即使不同应用程序也可以使用。

3.6K40

🔥【Angular教程】路由入门

(['/home/list', { id: this.userId, name: this.userName }]); 注:矩阵URL标记法:;id=101;name=bom 懒加载加载目的是将模块挂载延迟到我们使用时候...与懒加载相对加载 angular配置懒加载模块加载延迟到来使用时,但是有一些组件是需要优先加载并在使用时候可以及时运行。...angularRouter模块提供来两种预加载策略: 完全不预加载,这是默认值。惰性加载特性区仍然会按需加载。 预加载所有惰性加载特性区。...: 默认,不进行预加载 这么鸡肋属性必须要支持自定义,我们来看一下: 需要预加载路由配置对象添加data对象并增加preload属性,值设置为true表示开启预加载。...通过cli来生成一个服务用来完成我们加载策略:ng generate service selective-preloading-strategy 将我们创建服务实现接口PreloadingStrategy

4.3K50

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

加载模块中使用providers: [] 应用程序运行初始化后一段时间,懒加载模块中提供服务实例才会在注入器(懒加载模块创建。...@Component和@Directive中使用providers: [] 服务是按组件实例化,并且可以组件及其子树所有组件访问。...从技术讲,'root'代表 AppModule ,但Angular足够聪明,如果该服务只是惰性组件/服务中注入,那么它只会绑定在延迟加载bundle。...简单来讲: 1、如果服务仅被注入到懒加载模块,它将捆绑在懒加载 2、如果服务又被注入到正常模块,它将捆绑在主包 这种行为问题在于,拥有大量模块和数百项服务大型应用程序,它可能变得非常不可预测...附注 - 延迟加载模块多重好处 Angular最大优点之一是我们可以非常容易将应用程序分成完全独立逻辑块,这有以下好处… 1、更小初始化代码,这意味着更快加载和启动时间 2、懒惰加载模块是真正隔离

2.7K11

angular基础面试题_java web面试题

PercentPipe :把数字转换成百分比字符串,根据本地环境规则进行格式化angualr angular路由配置: 路由配置 app.route.ts 路由跳转方式 [routerLink...], 本模块向全局服务贡献那些服务创建器。...,ngDoCheck之后 ngAfterContentChecked:每当 Angular 检查完被投影到组件或指令内容之后调用,ngAfter...之后调用 ngAfterViewInit:当...ng..之后,只调用一次 ngAfterViewChecked:每当 Angular 做完组件视图和视图或包含该指令视图变更检测之后调用, gAfterViewInit...灵活路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 Angular 2应用,我们应该注意哪些安全威胁?

13K50

JavaScript 框架生态系统最新动态!

服务获取数据并在传送到客户端之前渲染组件,这样可以将渲染工作移至服务端,并减少需要传送到客户端代码量。...Angular Angular 最近发布包含了许多重大变化,包括信号(Signals)、可延迟视图(Deferrable views)、NgOptimizedImage、非破坏性水合(Non-destructive...可延迟视图(Deferrable views):可延迟视图使得可以推迟加载特定组件、指令和管道。例如,您可以推迟加载一个依赖项,直到内容进入视口或直到主线程处于空闲状态。...非破坏性水合(Non-destructive hydration):非破坏性水合修复了服务器端渲染 Angular 应用程序 DOM 客户端重新构建时可能出现闪烁问题。...它使用静态加载壳来渲染页面,但为页面内动态内容留下空白,这些内容将异步加载。因此,你可以提供可缓存静态页面的同时,将动态数据融入到页面内容,从而获得多种性能优势。

7210

Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

前言:   一篇文章我们讲了如何在创建Angular项目中快速引入ng-zorro-antd企业台组件库,并且快速构建后台管理页面框架模板。...它允许你做以下这些事情: 创建一个新 Angular 应用程序 运行带有 LiveReload 支持开发服务器,以便在开发过程预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序单元测试...ng g p my-new-pipe: 新建管道 ng g s my-new-service: 新建服务 app/pages目录下创建我们博客项目模块(带路由配置模块):   我们开发一个项目可能会存在多个模块...,我们可以通过延迟加载子路由方式来加载相关模块子路由。...如下所示 前往【my-blog-routing.module.ts】文件配置新创建首页组件路由。 ? 3、前往根模块【my-blog.module.ts】声明首页组件: ?

3.9K20

模块化开发 Angular 应用

想要更好地理解 Angular 应用程序所有的不同构建模块? 在这篇文章,我们将走进模块内容。 angular 应用模块是共享和重用代码好方法。...然后,我们将学习怎么使用我们模块来启用延迟加载,从而使应用更小,使用户体验更好。 我们开始吧! App Module Angular 里面,一切皆可组织成模块。...简单来说,一个模块就是一个类,就像组件和服务一样。 Angular 代码通常以模块形式组织。我们可以将模块视为包含特定用例所需要代码包或捆绑包。...也可以延迟加载模块。这是什么意思呢? Angular 程序下载体积很大。根据你用户场景,这是一个很大问题。特别是移动端,加载一个应用程序可能需要耗费很长时间。...如果我们想在特定路由延迟加载模块,我们可以使用 loadChildren 属性。这里我们指定模块路径和名称,用 # 分隔开。 之后,我们可以我们 AppModule 中导入配置模块

3K10

Angular进阶教程2-

如果你组件\color{#0abb3c}{组件}组件元数据\color{#0abb3c}{元数据}元数据定义了providers,那么angular会根据providers为这个组件创建一个注入器...}) 复制代码 模块中注入服务 根组件\color{#0abb3c}{根组件}根组件中注入服务,在所有的组件\color{#0abb3c}{组件}组件中都能共享\color{#0abb3c...Angular启动程序时会启动一个根模块,并加载它所依赖其他模块,此时会生成一个全局根注入器,由该注入器创建依赖注入对象整个应用程序级别可见,并共享一个实例。...// 这种方式注册,可以对服务进行一些额外配置(服务也需要写@Injectable()装饰器)。 // 未使用路由懒加载情况下,这种注入方式和在服务类中注入方式是一样。...,Angular会对延迟加载模块初始化一个新执行上下文,并创建一个新注入器,该注入器中注入依赖只模块内部可见,这算是一个特殊模块级作用域。

4.1K30

前端人员该怎么面试 经典Angular面试题有哪些

Angular 2不具有双向digest cycle,这是与Angular 1不同Angular2,组件中发生任何改变总是从当前组件传播到其所有组件。...如果一个组件更改需要反映到其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...简而言之,EventEmitter是@ angular/core模块定义类,由组件和指令使用,用来发出自定义事件。 3、如何优化Angular 2应用程序来获得更好性能?...6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑应用程序。 4、什么是Shadow DOM?它如何帮助Angular 2更好地执行?...AngularJS你可以创建自己服务,或使用内建服务

4.1K80

Angular2 VS Angular4 深度对比:特性、性能

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台应用程序,解决了移动应用程序(功能,加载时间等)挑战后,Angular2可以更容易处理桌面组件。...依赖注入模块化开发和元素隔离方面非常有帮助,但它实现一直受到Angular 1.x困扰。Angular2解决了这个问题,另外还添加了一些缺少功能,如注入以及生命周期/范围控制。...注入: 注入继承了其父级注入所有的专业服务,以及层次重写能力。根据需要,在一定范围内,一些类型对象可以被调用和机械重写。...由于代码依赖于ES6模块,因此模块加载程序将通过部分组件引用它们,来加载依赖关系。...设计: 所有这些逻辑都是使用管道架构创建,这使得将自己操作添加到管道或删除默认操作变得非常简单。此外,它异步字符允许开发人员管道,实现对用户进行身份验证或加载控件信息服务器请求。

8.7K20

angular5面试题_大数据面试题

Module 延迟加载(Lazy-loading) 什么是指令(Directive) Promise 和 Observable区别 如果提高Angular性能 Angular 版本如何升级 关于Angular...依赖就是具有一系列功能服务(service), 应用程序各种组件和指令(derictives)可能需要服务功能。...Angular提供了一种平滑机制,通过它我们可以将这些依赖项注入我们组件和指令。因此,我们只是构建依赖关系,这些依赖关系可以应用程序所有组件之间注入。...Module 延迟加载(Lazy-loading) 当一个项目做得很大后,为了提高首屏加载速度,可以通过Lazy-loading,当访问到某些具体url时,才加载那些不常用feature module...确保应用已经移除了不使用第三方库。同上。 项目较大时,考虑延迟载入(Lazy Loading), 保证首页加载速度。

4.3K20

Angular Provider 作用域

因此当我们在跟模块配置某个服务后,这个服务将在整个应用程序可用。需要注意非懒加载特性模块,如果我们也注册了同一个服务模块和特性模块是使用同一个服务实例,即服务是单例。...懒加载模块 估计有的小伙伴已经注意到了,我们介绍前面的内容时,有强调非懒加载特性模块,那么对于懒加载模块会是什么情况呢?...为什么懒加载模块与非懒加载模块会产生不一样结果呢?...这是因为对于懒加载模块来说,它会基于模块内配置 providers 创建一个注入器,以上面的示例来说,就是 UserModule 获取 UserService 服务时,会创建一个新 UserService...当在懒加载模块中使用模块服务时,它将使用根注入器创建服务实例。但如果已经加载模块中注册了 provider,模块内获取对应服务时,它将从模块注入器获取对应服务实例。

1.8K20

8分钟为你详解React、Angular、Vue三大框架

componentDidMount是组件 "挂载 "后调用(组件已经在用户界面创建了,通常是通过将其与DOM节点关联起来)。这通常用于通过API从远程数据源触发数据加载。...例如,Facebook有动态图表,可以渲染到标签,而Netflix和PayPal使用通用加载服务器和客户端上渲染相同HTML。...Angular有不同表达式语法,重点是"[]"用于属性绑定,"() "用于事件绑定 模块化 - 许多核心功能已转移到模块 Angular推荐使用微软TypeScript语言,它引入了以下特性。...支持Angular Universal,可以服务运行Angular应用程序。 版本9 Angular 9已于2020年2月6日发布。第9默认情况下使用Ivy编译器。...从高层次角度看,组件是Vue编译器附加行为自定义元素。Vue,组件本质就是一个带有预设选项Vue实例。下面的代码片段包含了一个Vue组件例子。

22.1K20

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

一、Overview Angular 入坑记录笔记第六篇,介绍 Angular 路由模块关于路由守卫相关知识点,了解常用到路由守卫接口,知道如何通过实现路由守卫接口来实现特定功能需求,以及实现对于特性模块惰性加载...:是否允许通过延迟加载方式加载某个模块 添加了路由守卫之后,通过路由守卫返回值,从而达到我们控制路由目的 true:导航将会继续 false:导航将会中断,用户停留在当前页面或者是跳转到指定页面...当问题解决后,就可以针对 crisis 模块设置惰性加载 配置惰性路由时,我们需要以一种类似于子路由方式进行配置,通过路由 loadChildren 属性来加载对应模块,而不是具体组件,修改后...CrisisModule,然后把 CrisisModule 添加到当前路由配置,而惰性加载和重新配置工作只会发生一次,也就是该路由首次被请求时执行,在后续请求时,该模块和路由都是立即可用 4.3.2...为了杜绝这种授权未通过仍加载模块问题发生,这里需要使用到 CanLoad 守卫 因为这里判断逻辑与认证授权逻辑相同,因此 AuthGuard ,继承 CanLoad 接口即可,修改后 AuthGuard

3.7K30

Angular 路由配置(预加载配置,懒加载配置)

forRoot()//模块定义主要路由信息 forChild()``//应用在特性模块(子模块 (2)懒加载:loadChildren 此处并没有将对应模块加入到AppModule,而是通过...loadChildren属性,告诉Angular路由依据loadChildren属性配置路径去加载对应模块。...loadChildren属性值由三部分组成: 需要导入Module相对路径 #分隔符 导出模块名称 (3)预加载 使用懒加载情况下,路由第一次加载某个模块时,有时反应有延迟。...,这时就需要自定义预加载策略 A.自定义-5秒后加载所有模块 app组建同级新建一个custom-preloading-strategy.ts文件 import { Route } from '@angular...app组建同级新建一个selective-preloading-strategy.ts文件(需要在app-routing.module.tsproviders注入,然后路由中定义data通过附加参数来设置是否预加载

3.1K30

Angular源码分析之$compile

@(Angular) $compile,Angular即“编译”服务,它涉及到Angular应用“编译”和“链接”两个阶段,根据从DOM树遍历Angular根节点(ng-app)和已构造完毕...Angular,依赖注入对象方式依赖与该对象Provider,正如小结标题compileProvider一样,该对象提供了compile服务,可通过injector.invoke(compileProvider...返回nodeLinkFn,根据用户指令定义,如果指令带有隔离作用域,则创建一个隔离作用域,并在当前dom节点绑定ng-isolate-scope类名,同时将隔离作用域缓存到dom节点; 接下来...针对子元素进行DOM操作,效率会远远高于postLink执行,原因在于preLink函数执行时并未构建元素DOM,在当元素是个拥有多个项li时尤为明显。...publicLinkFn,完成根节点与根作用域绑定,并在根节点缓存指令控制器实例,最终执行合成链接函数,完成了Angular最重要编译,链接两个阶段,从而开始了真正意义双向绑定。

1.5K50

Angular10配置webpack打包 「详细教程」

接下来教大家如何使用,具体详情可以去github找文档。虽然官方文档只标注到了可用版本为9,但是Angular10也是可以使用。 1....第四步:编辑你第一个 Angular 组件 组件 是 Angular 应用基本构造块。 它们屏幕显示数据、监听用户输入,并根据这些输入采取行动。...默认是async:只提取异步加载模块出来打包到一个文件。 异步加载模块:通过import('xxx')或require(['xxx'],() =>{})加载模块。...initial:提取同步加载和异步加载模块,如果xxx项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同文件。...同步加载模块:通过 import xxx或require('xxx')加载模块。 all:不管异步加载还是同步加载模块都提取出来,打包到一个文件

4.8K20
领券