Aurelia调用start后setRoot报错：No applicationHost was specified

我来帮你拆解下这个问题的来龙去脉，以及对应的解决办法：

问题根源 #

当你调用aurelia.setRoot()却不传递任何参数时，Aurelia需要自动找到一个挂载应用的宿主元素，但你的项目里缺少了让它识别宿主的标记，所以抛出了No applicationHost was specified错误。

而你显式传递参数的写法.then(a => a.setRoot("app.js", document.body))能正常工作，是因为你直接告诉了Aurelia：把app.js作为根组件，挂载到document.body这个宿主元素上。

官方示例为什么能正常运行？ #

官方快速入门指南里的代码之所以可以直接用setRoot()无参数调用，是因为对应的项目模板中，index.html里已经默认添加了带有aurelia-app属性的DOM元素。比如通常是这样的：

<body aurelia-app>
  <!-- 应用会挂载到这里 -->
</body>

Aurelia启动时会自动扫描页面，找到带有aurelia-app属性的元素，把它作为默认的应用宿主，所以不需要手动传递参数。

两种解决办法 #

方法1：添加aurelia-app标记到DOM #

在你的index.html中，给想要挂载应用的元素加上aurelia-app属性，比如：

<!-- 可以是body -->
<body aurelia-app></body>

<!-- 也可以是自定义容器 -->
<div id="app-container" aurelia-app></div>

这样修改后，你就可以像官方示例那样，直接调用aurelia.start().then(() => aurelia.setRoot())，Aurelia会自动找到这个标记元素作为宿主。

方法2：保持显式传递宿主元素 #

如果你不想修改HTML，就继续使用你已经验证有效的写法，显式指定根组件和宿主元素：

await aurelia
  .start()
  .then(a => a.setRoot("app.js", document.body))
  .catch(ex => {
    document.body.textContent = `Bootstrap error: ${ex}`;
  });

你也可以根据需要，把document.body换成其他特定的DOM元素，比如document.getElementById('your-app-id')。

补充说明 #

不管你用standardConfiguration()还是basicConfiguration()，这个宿主元素的识别逻辑都是一样的——配置项只是控制Aurelia的功能集，和宿主元素的自动检测无关，所以切换配置后还是会出现相同错误，这是正常的。

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