Stackblitz Angular Router HTML热重新加载不能在路由器的子级上工作

StackBlitz是一个在线的基于浏览器的开发环境，用于快速创建、编辑和共享Angular、React和Vue等前端项目。Angular Router是Angular框架中的一个模块，用于实现单页应用的路由功能。

HTML热重新加载是指在开发过程中，当修改HTML文件后，页面能够自动刷新以展示最新的更改。然而，在Angular Router的子级路由中，HTML热重新加载可能无法正常工作。

这是因为Angular Router的子级路由是通过路由器的懒加载功能实现的。懒加载是一种优化技术，它允许将应用的不同部分按需加载，以减少初始加载时间和资源消耗。当使用懒加载时，子级路由的模块和组件是在需要时动态加载的。

由于HTML热重新加载是基于文件系统的变化来触发的，而懒加载的子级路由是在运行时动态加载的，所以无法直接实现HTML热重新加载在子级路由上的工作。

解决这个问题的一种方法是使用Angular的开发模式中的"ng serve"命令来启动本地开发服务器，它支持HTML热重新加载。通过在命令行中运行以下命令来启动开发服务器：

ng serve

这样，在修改HTML文件后，开发服务器将自动重新加载页面以展示更改。

另一种方法是使用StackBlitz提供的实时预览功能。StackBlitz提供了一个实时预览面板，可以在编辑代码的同时即时查看应用的效果。虽然它不是HTML热重新加载，但可以实时显示更改后的页面效果。

总结起来，HTML热重新加载在Angular Router的子级路由上可能无法正常工作，但可以通过使用"ng serve"命令启动本地开发服务器或利用StackBlitz的实时预览功能来实现类似的效果。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

例如，Facebook有动态图表，可以渲染到标签，而Netflix和PayPal使用通用加载，在服务器和客户端上渲染相同的HTML。...支持Angular Universal，可以在服务器上运行Angular应用程序。版本9 Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。...常用命令从终端上，全局安装Angular CLI： npm install -g @angular/cli 使用 ng new 命令创建一个新的 Angular CLI 工作区: ng new my-project-name...这个模板（根据传递到路由器中的参数变化）将被渲染到DOM的div#app里面的。...8、官方程序库 Vue Router - Vue.js的官方路由器 Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。

22.1K2 0

Keepalived实现对web服务的高可用

然而，在路由器组内部，如果实际拥有这个对外IP的路由器如果工作正常的话，就是master，或者是通过算法选举产生的，MASTER实现针对虚拟路由器IP的各种网络功能，如ARP请求，ICMP，以及数据的转发等...对应到高可用的场景，实际上就是把路由器换成了服务器或者服务器上的应用：通常情况下是将两台linux服务器组成一个热备组（master-backup），同一时间热备组内只有一台主服务器（master）提供服务...：工作在三层时，keepalived会定期向热备组中的服务器发送一个ICMP数据包，来判断某台服务器是否故障，如果没有响应则将这台服务器从热备组移除。...Layer7：工作在七层时，keepalived根据用户设定的策略判断服务器上的程序是否正常运行，比如使用HTTP请求的方式，如果返回错误的状态码则将这台服务器从热备组移除。...4、工作状态 keepalived正常启动的时候，共启动3个进程：一个是父进程，负责监控其子进程；一个是VRRP子进程，另外一个是checkers子进程；两个子进程都被系统watchlog看管，Healthcheck

1.9K1 0

🔥【Angular教程】路由入门

请按照图中结构来创建我们的项目创建项目&一级模块： ng new angular-router-sample ng g c pages/login ng g c pages/home ng g c...在App的html模板中配置配置路由跳转&路由出口（router-outlet）登陆｜ <a [routerLink...ng g c pages/home/children/edit-user 为Home路由器配置增加children属性来配置子组件路由 const routes: Routes = [{ ......与懒加载相对的预加载 angular中配置懒加载后模块的加载被延迟到来使用时，但是有一些组件是需要优先加载并在使用的时候可以及时运行。...angular中的Router模块提供来两种预加载的策略：完全不预加载，这是默认值。惰性加载的特性区仍然会按需加载。预加载所有惰性加载的特性区。

4.4K5 0

Angular的12个经典问题，看看你能答对几个？（文末附带Angular测试）

Angular 2中的路由工作原理是什么？路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由，并提供了在模块级（延迟加载）下配置和定义的灵活性。 ...保护运行后，它将解析路由数据并通过将所需的组件实例化到中来激活路由器状态。...它是如何在Angular 2中工作的？ Angular 2不具有双向digest cycle，这是与Angular 1不同的。...在Angular2中，组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中，我们可以通过使用事件发射器api来发出事件。...此外，还可以相对很好地管理shadow DOM，同时检测Angular 2应用的改变，并且可以有效地管理视图的重新绘制。

17.3K8 0

Angular 5.0.0发布！

Angular Universal是一个帮助开发者执行服务端渲染（SSR）的项目。服务端渲染生成的HTML对不支持JS的蜘蛛和爬虫友好，同时有助于提升用户感知性能。...TypeScript转换现在，Angular编译器底层的工作机制是TypeScript转换，从而让递增式重新构建快了很多。...exportAs 组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称，可以在不破坏原有代码的情况下在Angular语法中使用新名称。...这些事件可在有子组件更新时，在一个特定的路由器出口上展示加载动画，或者测量性能。...以下是一个使用这些事件启动和停止加载动画的示例： class MyComponent { constructor(public router: Router, spinner: Spinner) {

4.4K4 0

Angular快速学习笔记（2） -- 架构

比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。 1.1.1 定义一个模块一个NgModule就是一个使用@NgModule 装饰器的类。...但是，任何模块都能包含任意数量的其它组件，这些组件可以通过路由器加载，也可以通过模板创建。那些属于这个 NgModule 的组件会共享同一个编译上下文环境。 ?...NgModule更像一个逻辑上的概念，是一个软件包的概念。 1.1.4 Angular官方库 Angular 自带了一组 JavaScript 模块，你可以把它们看成库模块。...1.2.3.2 Pipes管道一般的模板引擎都会提供pipes功能，angular也不例外，Angular 的管道可以让你在模板中声明显示值的转换逻辑。...- 当你在组件级注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例，要在组件级注册，就要在 @Component 元数据的 providers 属性中注册服务提供商因此，对于模块机共用的

5.2K2 0

AngularDart4.0 英雄之旅-教程-07路由顶

在进行更改时，请通过重新加载浏览器窗口来保持运行。行动计划计划如下：将AppComponent转换为仅处理导航的应用程序外壳程序。...导入库 Angular路由器是多个服务（ROUTER_PROVIDERS）、指令（ROUTER_DIRECTIVES）和配置类的组合。...: const [ROUTER_DIRECTIVES], 您可以从指令列表中移除HeroesComponent，因为AppComponent不会直接显示英雄; 这是路由器的工作。...在浏览器中，转至应用程序根目录（/）并重新加载。该应用程序显示dashboard ，您可以在dashboard 和heroes之间导航。 ...早些时候，你用元素包围了这些链接： router-link-active 类 Angular路由器将router-link-active类添加到其路由与活动路由相匹配的HTML导航元素。

17.5K3 0

angular面试题及答案_angular面试

:在angular初始化组件及其子组件的视图之后调用，只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用，只适用于组件 ngOnDestroy:...问题就在于请求/响应中消耗了大量时间，或者是重新加载使用了大量时间。而在SPA技术中，即使URL不断变化，我们也只维护一个页面(index.HTML)。 13....angular路由器使用base href 作为组件、模板的基地址，开发期间，通常会在index.html所在目录中启动服务器，所以这个目录就是根目录，所以可以在index.html 的顶部添加<base...Angular的懒加载默认情况下，在初始化的时候所有路由都会加载，导致加载缓慢，启动速度慢，所以可以使用懒加载懒加载：通俗的讲就是进入主模块之后，子模块不加载，等真正访问到子模块之后，再去加载...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

10.9K12 0

Angular核心-路由和导航

（达内教育学习笔记）仅供学习交流 @[TOC]Angular核心-路由和导航) 多页面应用：一个项目有多个完整的HTML文件，使用超链接跳转–摧毁一颗DOM树，同步请求另一颗，得到之后再重建新的DOM...==单页面应用的优势：==整个项目中客户端只需要下载一个HTML页面，创建一个完整的DOM树，页面跳转都是一个DIV替换另一个DIV而已—能够实现过场动画单页面应用不足：不利于SEO优化 Angular...类是RouterModule提供的一个服务类，声明依赖即可使用 //使用router服务要声明,依赖注入,注入“路由器”服务 constructor(private router:Router) {.../路由出口应该放在UserCenter.component.html中路由守卫商业项目中，有些路由地址只能在特定的条件下才能访问，例如：用户中心，只能登陆才能访问，（会话限制） TMOOC...视频播放，只能在学校内播放（客户ip地址限制） VIP学员视频播放，只能在13:30-22:00时间播放… Angular提供了“路由守卫（Guard）”来访问路由组件前的检查功能：如果检查通过（return

2.2K2 0

教程|在 Angular 4 中加载功能模块（下）

幕后过程在继续操作之前，我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上，按下 Fn+F12。在 Mac 上，按下 Command->alt->i。...您会看到 Currency 模块 (module(y.chunk.js)) 已加载。但是，Weather 模块尚未加载。单击 Weather，然后单击 Weather 子菜单下的一个菜单项。...在这种情况下，在贪婪加载主要模块后，路由器开始预加载标有 loadChildren 属性的所有剩余模块。要为预加载重新配置应用程序，可编辑您的 app-routing.module.ts，如下所示。...原始 app-routing.module.ts 的一节 JavaScript import { Routes, RouterModule } from '@angular/router'; 清单 6....更新后的 app-routing.module.ts 的一节 import { Routes, RouterModule, PreloadAllModules } from '@angular/router

2.3K1 0

基于Keepalived实现LVS双主高可用集群

9339 0

AngularDart 4.0 高级-路由概述顶

设置概述添加angular_router 路由器功能位于angular_router库中，该库自带软件包。...在任何使用路由器功能的Dart文件中，导入路由器库： import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令如果您已经熟悉Angular...路由器插座当此应用的浏览器URL成为/#/heroes时，路由器将该URL与名为Heroes的RouteDefinition匹配，并在放置在宿主视图HTML中的RouterOutlet后显示HeroesComponent...一路上，它突出了设计决策并描述了路由的关键特性。本指南将按照一系列里程碑进行，就像您在逐步构建应用程序一样。...危机详情显示在列表下方的同一页面上的子视图中。改变危机的名称。请注意危机列表中的相应名称不会更改。 ?

6.1K2 0

《秋风日常第三期》11个前端开发者必备的网站

这能够使应用程序包大小的显着减小，从而节省浏览器上的加载时间。（虽然在当下，有 webpack uglifyJS 等插件，但是当我在开发非打包的简单应用的时候，这个是一个不错的选择。） ?...Stackblitz使我们能够使用世界上最流行和使用最多的IDE，即web上的Visual Studio代码。...只需单击一下，Stackblitz 即可快速提供Angular，React，Vue，Vanilla，RxJS，TypeScript项目的框架。...当你想从浏览器中尝试一段代码或任何当前JS框架中的功能时，Stackblitz非常有用。假设你正在阅读Angular文章，并且遇到了想要尝试的代码。...您可以最小化您的浏览器并快速搭建一个新的Angular项目。还有其他很棒的在线IDE，但是我相信Stackblitz的转折点是使用每个人都喜欢的 Visual Studio Code感觉和工具。

8912 0

Angularjs中UI Router超级详细的教程{{上}}

这篇文章主要介绍了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友参考下吧首先给大家介绍angular-ui-router的基本用法。.../angular.js"> </script...而ui-view的工作原理就是根据自己的属性值，到这个键值集合中去找匹配的键，找到就把对应的页面显示出来。...在photos.html页面准备加载一个子页面，叫做photos-list.html；与photo-list.html页面相邻的还有一个页面，叫做photo-detail.html；在photo-detail.html...页面上加载一个子页面，叫做photos-detail-comment.html; 这样，页面有了嵌套关系，state也相应的会有嵌套关系。

5.2K5 0

2020vue面试题及答案_人际关系面试题及答案

$router.go(n) 22、Vue的路由实现：hash模式和history模式 hash 模式 (默认) 工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash...使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。...会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA) history 模式工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面...组件之间传值方式不同：Angular 中直接的父子组件，父组件可以直接访问子组件的 public 属性和方法，也可以借助于@Input 和 @Output 进行通讯。...36、keep-alive 的作用是什么? 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。 37、vue-loader 是什么？用途有哪些？

8.7K2 0

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

一、Overview Angular 入坑记录的笔记第六篇，介绍 Angular 路由模块中关于路由守卫的相关知识点，了解常用到的路由守卫接口，知道如何通过实现路由守卫接口来实现特定的功能需求，以及实现对于特性模块的惰性加载...UrlTree：取消当前的导航，并导航到路由守卫返回的这个 UrlTree 上（一个新的路由信息） 4.2.1、CanActivate：认证授权在实现路由守卫之前，可以通过 Angular CLI...crisis-detail 组件，作为 crisis-list 的子组件 ng g component crisis-detail 接下来在 crisis-list 中添加 router-outlet...这里其实相当于将原先两级的路由模式（父：crisis-list，子：crisis-detail）改成了三级（父：crisis-list，子：' '（空路径），孙：crisis-detail） import...CrisisModule，然后把 CrisisModule 添加到当前的路由配置中，而惰性加载和重新配置工作只会发生一次，也就是在该路由首次被请求时执行，在后续请求时，该模块和路由都是立即可用的 4.3.2

3.7K3 0

Angular 主从组件

你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流。本页面中，你将迈出第一步 —— 把英雄详情移入一个独立的、可复用的 HeroDetailComponent。...上查看我们提供源代码。...当用户从列表中选择了某个英雄时，父组件 HeroesComponent 将通过把要显示的新英雄发送给子组件 HeroDetailComponent，来控制子组件。...本页所提及的代码文件如下：如果你想直接在 stackblitz 运行本页中的例子，请单击链接：https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail.../hero-detail/hero-detail.component.html src/app/heroes/heroes.component.html https://github.com/cwiki-us-angular

1.2K4 0

react-03

关于url中的# 1. 理解# '#'代表网页中的一个位置。其右面的字符，就是该位置的标识符改变#不触发网页重载改变#会改变浏览器的访问历史 2....学习资源: 阮一峰教程: http://www.ruanyifeng.com/blog/2011/03/url_hash.html 3. react-router的学习资源 github主页: https...: http://www.ruanyifeng.com/blog/2016/05/react_router.html 4....相关API 1). react-router中的相关组件: Router: 路由器组件, 用来包含各个路由组件 Route: 路由组件, 注册路由 IndexRoute: 默认子路由组件 hashHistory...Router: 路由器组件属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配子组件: Route 3).

2.4K3 0

2021大厂（阿里、百度、字体跳动、腾讯）前端面试题库

4.css与javascript引入设置 5.如何理解CSS盒子模型 6.HTML的块级元素，行内元素，行内块元素有哪些,区别是什么 7.CSS3有哪些新特性 8.实现元素隐藏 9.如何实现元素水平居中...16.webpack中的模块解析规则 17.webpack中的模块解析规则具体实现 18.什么是模块热替换 Git 1.列举工作中常用的几个git命令？...32.Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？...33.Vue2 中注册在 router-link 上事件无效解决方法 34.RouterLink 在 IE 和 Firefox 中不起作用（路由不跳转）的问题 35.axios 的特点有哪些 36.请说下封装...4.使用CDN加载 jQuery库的主要优势是什么？ 5.jQuery中的方法链是什么？使用方法链有什么好处？ 6.如何将一个HTML元素添加到DOM树中的？

1.8K2 0

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

即使它被多个模块的providers: []重复申明，它也不会重新创建实例。注入器只会创建一个实例，这是因为它们最终都会注册到根级注入器。...在懒加载模块中使用providers: [] 在应用程序运行初始化后一段时间，懒加载模块中提供的服务实例才会在子注入器（懒加载模块）上创建。...只有当服务被真正注入其他惰性组件时，它才会打包到服务中新语法能在 @Component和 @Directive中使用吗? 不，它们并不能。...懒加载模块使用 providedIn: LazyServicesModule，然后由 LazyModule 导入，再由 Angular 路由器惰性加载，以实施严格的模块边界和可维护的架构！...然后，LazyModule将以标准方式使用 Angular Router 为某些路由进行懒加载。

2.7K1 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云