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

错误,因为无法读取属性'subscribe‘。用于单元测试时在angular 7中激活的路由

在Angular 7中,当激活路由时,如果出现错误"无法读取属性'subscribe'",通常是因为路由配置或组件中的错误导致的。下面是一些可能的原因和解决方法:

  1. 路由配置错误:检查你的路由配置文件(通常是app-routing.module.ts),确保你正确定义了路由路径和组件。确保你使用了正确的语法和参数。
  2. 组件错误:检查你的组件文件,确保你正确导入了所需的依赖项,并正确定义了组件类。确保你没有在组件中错误地使用了'subscribe'属性。
  3. 异步操作错误:如果你在路由激活期间执行了异步操作(例如从服务器获取数据),请确保你正确地使用了Observable和subscribe方法。检查你的代码,确保你正确地订阅了Observable,并在订阅方法中处理数据。
  4. 版本兼容性问题:确保你的Angular版本与你使用的路由库版本兼容。有时,不同版本之间的差异可能导致一些问题。尝试更新你的Angular和路由库版本,或者查看官方文档以获取更多信息。

总结起来,当出现"无法读取属性'subscribe'"错误时,需要检查路由配置、组件代码、异步操作和版本兼容性等方面的问题。根据具体情况进行排查和修复。如果问题仍然存在,可以提供更多的代码和错误信息,以便更好地帮助你解决问题。

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

相关·内容

Angular 从入坑到挖坑 - Router 路由使用入门指北

一、Overview Angular 入坑记录笔记第五篇,因为一直加班缘故拖了有一个多月,主要是介绍 Angular 中如何配置路由,完成重定向以及参数传递。... Angular 项目中,系统路由需要我们将一个 url 地址映射到一个展示组件,因此需要手动去设置 url 与组件之间映射关系 因为我们使用 Angular CLI 创建项目,选择了添加路由模组...,这里我们定义路由信息,定义了一个空路径用来表示系统默认地址,当用户请求,重定向到 /home 路径上,因为只有完整 url 地址匹配空字符串才应该进行重定向操作,所以这里需要指定匹配模式是全部匹配...因此,类似于 404 错误这种通配路由配置,因为可以匹配上每个 url 地址,所以应该在定义放到最后 const routes: Routes = [ { path: 'home', component...,因此,我们定义 router-link ,可以使用 routerLinkActive 属性绑定一个 css 样式类,当该链接对应路由处于激活状态,则自动添加上指定样式类 ?

4.2K50

Angular核心-路由和导航

Angular核心-路由和导航 博客首页:蔚说博客 欢迎关注点赞收藏⭐️留言 作者水平很有限,如果发现错误,求告知,多谢! 有问题可私信交流!!!...:'full'}, //重定向需要指定“路由地址匹配方式”为“完全匹配” 路由词典中可以指定一个匹配任一地址地址:“**”,注意该地址只能用于整个路由词典最后一个,在前边就会使后边地址没有作用。...()函数里边实现读取当前路由地址中参数: ngOnInit(): void { //组件初始化完成,读取路由参数,进而根据此参数做操作 //Observable对象必须订阅使用...视频播放,只能在学校内播放(客户ip地址限制) VIP学员视频播放,只能在13:30-22:00间播放… Angular提供了“路由守卫(Guard)”来访问路由组件前检查功能:如果检查通过(return...(){ return true //允许激活 return false //阻止激活 } } 2.路由词典中使用路由守卫 {path: '', component:....

2.2K20

Angular Title Service 详解

Title Service 简介 Angular Title Service 用于获取和设置当前 HTML 文档标题。...针对这种需求,我们可以通过订阅路由事件,然后页面导航成功后,利用 Title 服务动态设置页面的标题或 Meta 信息。...而实际开发过程中,我们会在定义路由,为需要设置标题路由,定义一个 data 属性,然后设置该属性对应属性值为一个包含 title 属性对象,比如: const routes: Routes =...此外在实际开发中,可能会遇到一些复杂场景,比如子路由、多层嵌套路由等。...Meta 元信息,我们知道 Meta 服务将被注册根级注入器中,当首次获取 Title 服务,将使用 createTitle() 工厂方法创建对应实例。

2K10

进阶 | 重新认识Angular

, 因为它完全依照AST生成,而不是原Dom上改写。...上面也说道,并不是所有的组件都会注入服务,所以有了”注入器冒泡”: 当一个组件申请获得一个依赖Angular先尝试用该组件自己注入器来满足它。...通过路由lazyload以及上面提到模块化,我们可以把每个lazyload模块单独打包成一个分块bundle文件,当进入模块才请求和加载,当我们业务规模很大时候,首屏速度得到大幅度提升。...Rx数据是否流出不取决于是否subscribe,也就是说一个observable未被订阅时候也可以流出数据,之后它被订阅过后,先前数据是无法被数据消费者所查知,所以Rx还引入了一个lazy模式...---- AOT 预编译(AOT)会在构建编译,这样可以早期截获模板错误,提高应用性能。 AOT使得页面渲染更快,无需等待应用首次编译,以及减少体积,提早检测模板错误等等。

2.5K10

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

一部分事件适用于组件/指令,而少数事件只适用于组件。 ngOnChanges:当Angular设置其接收当前和上一个对象值数据绑定属性响应。...成功匹配,它会应用重定向,此时路由器会构建ActivatedRoute对象树,同时包含路由器的当前状态。重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新状态。...保护运行后,它将解析路由数据并通过将所需组件实例化到 中来激活路由器状态。...因为shadow DOM本质上是静态,同时也是开发人员无法访问,所以它是一个很好候选对象。因为它缓存DOM将在浏览器中呈现得更快,并提供更好性能。...这需要等待下载所有必需组件,然后等待编译器花费时间来编译应用程序。使用AOT编译,就能实现优化。 构建检测错误:由于预先编译,可以检测到许多编译错误,能够为应用程序提供更好稳定性。

17.3K80

angular面试题及答案_angular面试

:angular初始化组件及其子组件视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图变更检测之后调用,只适用于组件 ngOnDestroy:...angular每次销毁组件或指令之前调用,通常用于移除事件监听,退订可观察对象。...当observable或promise返回data,我们使用一个临时属性来保存内容。稍后,我们将相同内容绑定到模板。...angular路由器使用base href 作为组件、模板基地址,开发期间,通常会在index.html所在目录中启动服务器,所以这个目录就是根目录,所以可以index.html 顶部添加<base...Angular懒加载 默认情况下,初始化时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载 懒加载 : 通俗 讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载

10.9K120

Angular快速学习笔记(4) -- Observable与RxJS

这个对象定义了一些回调函数来处理可观察对象可能会发来三种通知 通知类型 说明 next 必要。用来处理每个送达值。开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。...除了可以订阅提供 error() 处理器外,RxJS 还提供了 catchError 操作符,它允许你管道中处理已知错误。...HTTP 模块使用可观察对象来处理 AJAX 请求和响应 路由器和表单模块使用可观察对象来监听对用户输入事件响应 事件发送器 EventEmitter Angular 提供了一个 EventEmitter...如果已发出 AJAX 请求结果会因为后续修改而变得无效,那就取消它。...有一些关键不同点: 可观察对象是声明式,在被订阅之前,它不会开始执行,promise是创建就立即执行 可观察对象能提供多个值,promise只提供一个,这让可观察对象可用于随着时间推移获取多个值

5K20

Angular v16 来了!

我们还声明了一个效果,每当我们更改它读取任何信号,回调都会执行——本例中,fullName这意味着它也传递地依赖于firstName和lastName。...改进了独立组件、指令和管道工具 Angular 是数百万开发人员用于许多关键任务应用程序框架,我们认真对待重大变化。...改善开发者体验 除了我们关注大型计划外,我们还致力于带来高度要求功能。 所需输入 自从我们 2016 年引入 Angular 以来,如果您不为特定输入指定值,就不可能出现编译错误。...= '' ; } 将路由器数据作为组件输入传递 路由开发人员体验一直快速发展。...现在您可以将以下数据传递给路由组件输入: 路由数据——解析器和数据属性 路径参数 查询参数 以下是如何从路由解析器访问数据示例: const routes = [ { path : 'about'

2.5K20

AngularDart4.0 英雄之旅-教程-06服务 顶

使用单独服务可使组件保持精简并专注于支持视图,并使用模拟服务对组件进行单元测试变得容易。 因为数据服务总是异步,所以您将使用数据服务基于Future版本来完成页面。...现在Angular知道创建一个新AppComponent要提供一个HeroService实例。 依赖注入页面阅读更多关于依赖注入内容。...您可能会试图构造函数中调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务器构造函数(如数据访问方法)。 构造函数用于简单初始化,如将构造函数参数连接到属性。...英雄服务返回一个Future Future代表未来计算或值。 使用Future,您可以注册回调函数,计算完成(结果准备就绪),或需要报告计算错误时调用。 这是一个简单解释。...AppComponent激活,您使用ngOnInit生命周期挂钩来获取英雄数据。 您将HeroService定义为AppComponent提供者。

2.9K10

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

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务Angular...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 ngOnInit 中调用service获取数据 a....Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K50

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

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据形式 providedIn: 'root', 当你顶层提供该服务Angular...声明了一个私有 heroService 属性, 2. 把它标记为一个 HeroService 注入点 ngOnInit 中调用service获取数据 a....Angular 最佳实践之一就是一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 字符串...return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K00

使用Angular CLI进行单元测试和E2E测试

单元测试. angular cli使用karma进行单元测试. 首先执行ng test --help或者ng test -h查看帮助....首先创建一个angular项目, 带路由: ng new sales --routing 创建好项目后, 直接执行命令测试: ng test ? 然后会弹出一个页面, 就是测试结果数据....这时因为运行测试时候, admin模块是独立运行, 所以该模块并没有引用Router模块, 所以无法识别router-outlet. 那么如何解决这个问题?...把这句话填上, 然后就没有错误了: ? NO_ERRORS_SCHEMA告诉angular忽略那些不识别的元素或者元素属性. ng test常用参数....然后spec里面也设置一个断点: ? 最后点击浏览器刷新按钮即可: ? E2E测试参数. 实际上angular cli是配合着protractor来进行这个测试. 它命令是 ng e2e.

2.7K70

Angular进阶教程2-

: GoodsListService } ] // 其中provide属性可以理解为这个Provider唯一标识,用于定位依赖值,也就是应用中使用服务名 // 而useClass属性则代表使用哪个服务类来创建实例...服务类中注入服务 // 这种注入方式,会告诉Angular根注入器中注册这个服务,这也是使用CLI生成服务默认方式. // 这种方式注册,不需要再@NgModule装饰器中写providers,...而且代码编译打包,可以执行tree shaking优化,会移除所有没在应用中使用过服务。..._http.post(url, body); } 复制代码 错误处理 调用接口时候,当遇到接口请求失败或者报错时候,前端需要做一些错误提示信息展示,具体操作如下: this....SubjectAngular常见作用: 可以Angular通过service来实现不同组件,或者不同模块之间传值 // 定义公共用于数据存储service,文件名是(eg:xampleStore.service.ts

4.1K30

Angular 1 vs. Angular 2 深度比较

或许我们不必推论出 zones 适用于大多数一般场景,但是可以通过使用 VmTurnZone Angular zone 外运行代码。...web component 行为跟浏览器组件行为类似,比如有 img 标签。 因此,页面初始化并且 Angular 介入之前,Angular 表达式将被传给组件,并直接作用于它。...Angular 2 模板语法会避免绑定到普通属性,除非要读取常量: <web-component-widget [setting]="angularExpresssion...<em>Angular</em> 将会把它解析 ,接着会吧解析后<em>的</em>页面注入到 DOM 中,这样就避免了出现闪烁<em>的</em>效果 目标: 增加测试可行性 相对而言 <em>Angular</em> 2 很难写真正<em>的</em><em>单元测试</em>, <em>因为</em>像 ng-model...<em>Angular</em> 2 最初版本发布临近<em>时</em>这会变得更加清晰,但是现在<em>路由</em>可能是一个主要<em>的</em>可行迁移办法。

2.8K100

Angular2 之 单元测试

it方法中几个函数 写单元测试,it里经常会有几个常见方法,async(),fakeAsync(),tick(),jasmine.done()方法等。...实际上,“stable”意思是当所有待处理异步行为完成状态,“stable”后whenStable承诺被解析。...第二个参数是传递给事件处理器事件对象。 ---- 自己遇到坑儿 下面都是自己实际编写单元测试,真实遇到问题,自己真的是在这上面花费了很多时间啊!!!为什么没有说花冤枉时间呢?...就是因为是自己对单元测试还没哟掌握,所以出了错,不要紧,重要是以后不能再犯!...这个错误,我意识到了,所以我再第二次调用地方添加了一个延时执行函数,这样单元测试是完全正确,但是这并不是一个好解决办法。

5.5K20

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

钩子 用途及时机 ngOnChanges() 当 Angular(重新)设置数据绑定输入属性响应。...该方法接受当前和上一属性 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...[请求数据使用] ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应。...自定义页面Layout布局(动态菜单栏配置): 一般情况下我们页面动态菜单都是从后台读取,然后遍历绑定在【app.component.html】页面中,我们这里没有展示没有涉及到后台就是用固定式路由

3.9K20

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

,通过调用注入服务类完成接口数据获取,因为是以一种结构化对象形式获取到接口返回数据,因此这里可以直接通过对象属性获取到指定属性信息 import { Component, OnInit } from...执行服务中方法,有时会存在没有回调函数情况,此时也必须执行 subscribe 方法,否则服务中 HTTP 请求是没有真正发起 服务中 getAntiMotivationalQuotes...处理错误信息回调方法中,方法返回了一个 HttpErrorResponse 对象来描述错误信息 因为这里错误更多是服务与后端进行通信产生错误,因此对于错误信息捕获和处理更应该放到服务中进行,...(error.error)}`); } // 反馈给用户错误信息(用于组件中使用 error 回调错误提示) return throwError('不好事情发生了,毕竟我们都有不顺利时候...4.2.2、请求重试 某些情况下存在因为特殊原因导致短时间请求失败,这时可以 pipe 管道中,当请求失败后,使用 retry 方法进行多次请求重试,进行了多次重试后还是无法进行数据通信后,则进行错误捕获

5.2K10

Angular HttpClient 拦截器

之前 Angular 6 HttpClient 快速入门 文章中,我们已经简单介绍了 Http 拦截器。本文将会进一步分析一下 Http 拦截器。拦截器提供了一种用于拦截、修改请求和响应机制。...下面我们再来定义一个 CacheEntry 接口,该接口包含三个属性: url: string —— 被缓存请求 URL 地址 response: HttpResponse—— 被缓存响应对象 entryTime...: number —— 响应对象被缓存时间,用于判断缓存是否过期 此外,我们还要定义一个常量,用于设定缓存有效期,这里我们假设缓存时间为 30 s,具体如下: import { HttpResponse...Testing 为了方便演示 AuthInterceptor 拦截器单元测试,首先我们先来定义一个 UserService 类: import { Injectable } from "@angular...这里只是简单介绍了如何为 AuthInterceptor 拦截器写单元测试,对于单元测试同学,建议阅读官方或其他学习资料。

2.6K20
领券