Angular是否允许自定义空元素指令？迁移Angular.js模板兼容问询

1. Angular是否允许自定义空元素指令？ #

绝对允许！Angular完全支持自定义以空元素形式使用的指令——但默认情况下，因为Angular的模板编译器严格遵循HTML规范，未闭合的自定义元素（比如你示例里的<custom-datasource name="myds">）可能会被解析成不完整标签，导致报错。

2. 如何声明并启用空元素指令？ #

第一步：正确声明指令 #

你已经做对了这部分——用元素选择器定义指令，直接匹配目标标签：

@Directive({selector: 'custom-datasource'})
export class DatasourceDirective {}

这个选择器不管元素是空的还是包含子内容，都能正常匹配。

第二步：配置编译器允许空元素 #

这是解决问题的核心，因为Angular默认会拒绝未闭合的自定义元素。有两种配置方式：

方式一：通过angular.json全局配置（推荐）

在你的项目配置文件中，找到projects -> [你的项目名] -> architect -> build -> options，添加或修改以下配置：

{
  "strictTemplates": false,
  "allowEmptyElements": true
}

如果你的项目使用Ivy编译器（Angular 9+默认启用），这个配置会直接生效，让编译器接受未闭合的自定义空元素。

方式二：通过COMPILER_OPTIONS注入配置

如果需要更灵活的控制（比如只在特定模块生效），可以在模块的providers中注入编译器配置：

import { COMPILER_OPTIONS } from '@angular/core';
import { NgModule } from '@angular/core';

@NgModule({
  providers: [
    {
      provide: COMPILER_OPTIONS,
      useValue: { allowEmptyElements: true },
      multi: true
    }
  ]
})
export class AppModule {}

针对你复用Angular.js模板的场景优化 #

你提到要复用大量服务器加载的Angular.js模板，其中包含未闭合的<custom-datasource>这类标签，Angular.js默认兼容但Angular不支持。除了上面的全局配置，还有几个针对性方案：

方案1：全局开启空元素支持（最省心） #

就是上面提到的angular.json配置，一次性解决所有模板里的空元素问题，适合你有大量这类旧模板的场景。

方案2：预处理模板（如果无法修改服务器返回内容） #

如果服务器返回的模板不能修改，可以在动态编译前用正则把未闭合的自定义标签转换成自闭合形式：

function normalizeOldTemplates(template: string): string {
  // 匹配带连字符的自定义元素（Angular.js常用命名方式），且未闭合
  return template.replace(/<([a-z0-9-]+)([^>]*)>(?!<\/\1>)/g, '<$1$2/>');
}

把处理后的模板再传给Angular的动态编译服务即可。

方案3：手动闭合标签（如果能修改模板） #

如果可以调整服务器返回的模板内容，把<custom-datasource name="myds">改成自闭合的<custom-datasource name="myds"/>，Angular默认就能识别，不需要额外配置。

小提示：如果开启了strictTemplates，建议只单独设置allowEmptyElements: true，而不是完全关闭严格模板检查，这样既能兼容空元素，又能保留Angular的类型安全检查。

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