Ember 3.8嵌套组件调用问题：尖括号语法编译错误求助

我看到你把旧的Handlebars组件调用语法改成尖括号语法后，遇到了Cannot find component expandable-items-icon-plus-button的编译错误，这大概率是组件命名转换或者文件结构的问题，下面一步步帮你排查解决：

问题根源 #

旧的组件调用{{#expandable-items/icon-plus-button}}是Ember的**嵌套组件（目录结构下的组件）**写法，对应app/components/expandable-items/icon-plus-button.js（及模板文件）的位置。而你转换成尖括号语法时，直接把expandable-items/icon-plus-button拼成了ExpandableItemsIconPlusButton，这不符合Ember对嵌套组件的尖括号语法规则，导致编译器找不到正确的组件文件。

具体解决步骤 #

1. 修正尖括号组件的引用语法 #

对于嵌套在目录里的组件，Ember的尖括号语法需要用::来分隔命名空间（目录名）和组件名，而不是直接拼接成大驼峰。所以你的新写法应该改成：

<ExpandableItems::IconPlusButton 
  @expanded={{this.expanded}} 
  @expandedImage={{fa-icon "angle-double-left"}} 
  @expandedText={{t "sideBarNav.collapseMenu"}} 
  @toggleExpanded={{action "toggleExpanded"}} 
/>

2. 确认组件文件的位置和命名 #

确保你的组件文件完全匹配以下结构：

• JavaScript文件：app/components/expandable-items/icon-plus-button.js
• 模板文件（如果是模板组件）：app/components/expandable-items/icon-plus-button.hbs

文件名必须是icon-plus-button（小写连字符），目录名是expandable-items，这样Ember才能正确映射到<ExpandableItems::IconPlusButton>这个组件名。

3. 检查组件的导出方式 #

如果是Glimmer组件（Ember 3.13+推荐），你的icon-plus-button.js应该这样导出：

import Component from '@glimmer/component';

export default class ExpandableItemsIconPlusButtonComponent extends Component {
  // 组件逻辑
}

如果是传统Ember组件，导出方式如下：

import Component from '@ember/component';

export default Component.extend({
  // 组件逻辑
});

4. 清理Ember缓存（必要时） #

有时候缓存会导致组件映射异常，运行以下命令清理缓存并重启服务：

# 清理Ember缓存
ember clear

# 或者彻底清理依赖和构建文件
rm -rf node_modules dist package-lock.json
npm install
ember serve

5. 确认Ember版本对尖括号语法的支持 #

如果你使用的是Ember 3.4到3.12之间的版本，需要在ember-cli-build.js中手动开启尖括号语法支持：

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-source': {
      features: {
        'template-only-glimmer-components': true,
        'template-glimmer': true
      }
    }
  });
  return app.toTree();
};

总结 #

最可能的问题就是你错误地将嵌套组件的斜线语法转换成了连续驼峰名，没有使用::分隔命名空间。按照上面的步骤修改后，应该就能解决编译错误了。

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