Sublime Text中Angular模板文件需手动切换为Angular HTML语法并安装对应语法包,否则*ngIf等指令无高亮;.ts文件还需额外安装Angular TypeScript语法包以支持装饰器高亮。

Angular模板文件不被识别,.html里写*ngIf没高亮
Sublime Text 默认只按 HTML 规则解析 .html 文件,遇到 *ngIf、[(ngModel)] 这类 Angular 指令时,会当成普通属性忽略,语法高亮失效,括号配对、插值表达式 {{ }} 也不识别。
解决方法不是装“Angular 插件”,而是让 Sublime 把当前文件当作「Angular HTML」来处理。手动切换语法模式最直接:
- 打开你的
.html模板文件 - 点击右下角当前语法名称(如
HTML) - 选
Open all with current extension as… → Angular HTML - 如果没看到
Angular HTML,说明还没装对应语法包——继续看下一条
安装 AngularJS 或 Angular 语法包(别装错)
社区有两个主流语法包:AngularJS(面向 Angular 1.x)和 Angular(面向 Angular 2+)。你用的是 Angular 2+(即 @angular/core),必须装后者,否则 *ngFor、routerLink 等新指令仍不识别。
推荐用 Package Control 安装:
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)调出命令面板 - 输入
Package Control: Install Package回车 - 搜索并安装
Angular(作者是mrz00m,GitHub 仓库名sublime-angular) - 安装后重启 Sublime,再打开
.html文件,右下角就能选到Angular HTML了
注意:AngularJS 包不支持 ng-template、hostBindings 等新特性,装错等于白装。
{{ }} 和 [()] 依然不着色?检查作用域嵌套和文件扩展名
即使选了 Angular HTML,部分表达式仍可能灰掉,常见原因有三个:
- 文件扩展名不是
.html:比如你用.component.html或.tpl.html,Sublime 不会自动关联语法。解决:右下角手动选Angular HTML,或在Preferences → Settings – Syntax Specific里加一行"extensions": ["component.html", "tpl.html"] - 插值写在注释或字符串里:
<!-- {{ name }} -->或<div title="{{ name }}">中的{{ }}不会被识别为模板表达式(这是设计行为,不是 bug) - 语法包版本太老:旧版
sublime-angular对ng-container或let-item支持不全。建议去 GitHub 查最新 release,确认是否支持你用的 Angular 版本(如 v16+ 的新语法)
想让 .ts 文件也支持 Angular 装饰器高亮(如 @Component)
默认 TypeScript 语法对 Angular 装饰器只是普通标识符,@Input()、@HostListener 看起来和普通函数没区别。要增强识别,得额外装一个轻量语法扩展:
- 同样通过 Package Control 安装
Angular TypeScript(作者mrz00m,和上面那个配套) - 装完后,打开
.ts文件,右下角选Angular TypeScript即可 - 它不会改 TypeScript 核心规则,只给装饰器、模块导入路径(如
@angular/router)加颜色,不影响编译或跳转
这个步骤常被跳过,但对快速扫读组件定义很有帮助——尤其当你同时打开 .ts 和 .html 两个文件时,两边高亮风格一致才不容易串行。
真正麻烦的不是装包,而是装完忘了手动切语法;更隐蔽的是,团队里有人用 VS Code,有人用 Sublime,各自配的语法包版本不一致,导致同一份模板在不同人机器上高亮效果不同。这点容易被当成“玄学问题”拖很久。

















