Angular路由在GitHub Pages运行原理及动态指令相关问题咨询

为什么GitHub Pages上Angular路由可以正常运行 #

首先理清基本前提：GitHub Pages本质是纯静态文件托管服务，仅负责响应GET请求返回对应路径的静态资源，本身不执行任何服务端动态逻辑。
此前“GitHub Pages不支持Angular路由”的说法存在特定前提：

• Angular默认使用PathLocationStrategy（基于HTML5 pushState API的路由模式），路由路径不带#符号，当用户直接访问二级路由路径（例如your-site.com/user/1）时，GitHub Pages会尝试查找对应路径下的静态文件，找不到就会返回404错误。

你部署后路由正常运行，大概率符合以下两种情况之一：

• 你的Angular项目配置了HashLocationStrategy，路由路径携带#符号（例如your-site.com/#/user/1），#后的内容不会发送到GitHub Pages服务器，服务端只会返回根路径的index.html，Angular会在客户端侧解析#后的路由参数完成页面渲染，全程不需要服务端配合。
• 你配置了404回退规则：将打包生成的index.html复制一份命名为404.html放在部署目录中，即使用户直接访问二级路由触发404，GitHub Pages也会返回和首页一致的内容，Angular加载完成后会在客户端完成路由匹配。

另外你提到的“动态特性不支持”是普遍误解：Angular的所有路由、指令逻辑都会在ng build阶段打包成静态JS bundle，所有动态逻辑都在用户的浏览器端执行，GitHub Pages只需要负责返回这些静态文件即可，不需要参与动态逻辑的运行。

为什么Angular的directive（指令）属于动态特性 #

Angular指令的核心作用是在运行时动态修改DOM元素的结构、样式、行为，而非在编译阶段生成固定的静态HTML，所以归类为动态特性，常见的指令分为三类：

• 组件型指令：也就是常用的@Component装饰器修饰的组件，属于带模板的特殊指令，会根据输入参数动态渲染不同的模板内容。
• 属性型指令：例如ngClass、ngStyle，可以根据运行时的变量值动态修改元素的样式、属性。
• 结构型指令：例如*ngIf、*ngFor，可以根据运行时的数据动态增删DOM节点、循环生成列表内容。

所有指令的逻辑都不会在ng build阶段被编译成固定的HTML内容，而是随着JS bundle在浏览器端运行时动态生效，比如*ngFor会根据接口返回的数组长度动态生成对应数量的列表项，这些逻辑都是在用户侧运行的，和托管服务无关。

内容的提问来源于stack exchange，提问作者Harshit Garg