Angular ng eject配置webpack后脚本放head出现app-root错误

你碰到这个问题的核心原因很明确：当Angular的脚本在<head>中加载并执行时，浏览器还没来得及解析<body>里的<app-root>元素——Angular启动时找不到它的宿主节点，就会抛出这个错误。下面给你几个实用的解决办法：

方案1：给脚本添加defer属性（推荐） #

修改webpack.config.js里的HtmlWebpackPlugin配置，除了设置inject: 'head'，还要开启scriptLoading: 'defer'。这个属性会让浏览器在后台下载脚本，但等到整个DOM解析完成后再执行，刚好能让Angular找到<app-root>：

new HtmlWebpackPlugin({
  // 保留你原有的其他配置（比如template、filename等）
  inject: 'head',
  scriptLoading: 'defer' // 新增这个配置项
})

方案2：延迟Angular的启动时机 #

如果不想依赖defer，可以修改main.ts的启动逻辑，让Angular等到DOM完全加载完成后再初始化：

// 替换原来的直接启动代码
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

这样Angular会在<body>里的所有元素都解析完毕后才启动，自然能找到<app-root>。

方案3：折中处理——脚本留body底部，自定义模板调整其他资源 #

如果上面的方案都不符合你的需求，其实可以保留脚本在<body>末尾，但通过自定义HTML模板，把需要放在<head>里的其他资源（比如CSS、第三方脚本）手动配置位置，脚本还是留在body最后，这样既满足部分资源的位置要求，又不会触发元素找不到的错误。

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