Aurelia：FrameworkConfiguration懒加载JS+HTML特性异常问题

先明确你的场景：使用Aurelia 1.1.5 + jspm + TypeScript，同步加载含JS+HTML的自定义元素特性完全正常，但通过FrameworkConfiguration延迟加载时，HTML模板无法渲染，且无控制台报错，纯JS自定义元素懒加载正常。

这大概率不是预期行为，更可能是延迟加载时模板注册的时机问题，或者FrameworkConfiguration的特性加载逻辑在懒加载场景下的小疏漏，下面给你几个排查和解决方向：

1. 检查特性模块的结构与注册方式 #

确保你的js+html-custom-element特性模块（通常是index.ts或index.js）里，正确注册了自定义元素并关联模板：

// js+html-custom-element/index.ts
import { FrameworkConfiguration } from 'aurelia-framework';
import { MyCustomElement } from './my-custom-element';

export function configure(config: FrameworkConfiguration) {
  config.globalResources('./my-custom-element');
}

这里要注意：如果你的自定义元素是通过约定式（即JS和HTML同名同目录）关联模板，延迟加载时Aurelia可能需要显式触发模板的解析，或者确保模块加载时模板已经被正确识别。

2. 手动触发模板编译（临时 workaround） #

如果是模板未被自动解析，可以在延迟加载后手动获取元素并让Aurelia重新编译：

// 延迟加载特性的代码
async function loadFeature() {
  const config = new FrameworkConfiguration(aurelia);
  await config.feature('js+html-custom-element').apply();
  
  // 假设你的自定义元素已经插入到DOM中，手动编译
  const element = document.querySelector('my-custom-element');
  if (element) {
    aurelia.container.get(Element).enhance({ element });
  }
}

这个方法可以验证是否是模板未被自动绑定的问题。

3. 显式关联模板避免约定式遗漏 #

在Aurelia 1.x的懒加载场景下，约定式模板关联可能存在识别延迟，你可以通过两种方式显式绑定：

• 在特性的configure函数里，把模板路径也加入全局资源注册：

  // 在特性的configure函数里
  config.globalResources(
    './my-custom-element',
    './my-custom-element.html' // 显式注册模板
  );
  

• 或者在自定义元素类上用@view装饰器直接指定模板路径：

  import { view } from 'aurelia-framework';
  
  @view('./my-custom-element.html')
  export class MyCustomElement {
    // ...元素逻辑
  }
  

这样能确保Aurelia在加载JS文件时直接关联模板，避免延迟加载时的注册遗漏。

4. 尝试升级Aurelia版本 #

Aurelia 1.1.5是比较早期的版本（2017年发布），后续的1.x补丁版本修复了不少懒加载相关的细节问题。你可以尝试升级到1.x的最新稳定版（比如1.3.1），看看问题是否自动消失。

总结 #

这更像是Aurelia 1.1.5在延迟加载含模板的特性时的一个版本兼容问题，而非预期行为。优先尝试显式绑定模板的方式，不行再用手动编译作为临时方案，最后考虑升级版本来彻底解决。

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