在AngularJS中引入Angular 18 Angular Elements遇404及加载失败问题

问题现状 #

在AngularJS 1.8.3项目中引入Angular 18构建的Angular Elements（Web Components）时，出现以下问题：

• 简单Hello World组件能显示内容，但控制台报404错误
• 复杂组件完全无法加载显示

报错信息：

Failed to load resource: the server responded with a status of 404 (Not Found)
Refused to execute script from 'http://localhost:53390/simple-web-component.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

当前引入代码：

<div>
    <script src="web-components.js"></script>
    <web-component-contact-list></web-component-contact-list>
</div>

解决步骤 #

1. 修正组件内部的资源引用路径 #

报错中提到的simple-web-component.js并非你引入的文件名，说明Angular Elements构建时硬编码了错误的脚本路径。需要在Angular 18项目的构建配置中指定正确的相对路径：

• 在angular.json的对应项目build配置中，添加"baseHref": "./"或"deployUrl": "./"
• 或者直接用构建命令指定：

  ng build --project=你的元素项目名 --single-bundle --base-href ./
  

  确保构建后的组件内部引用的所有资源路径都是相对于当前页面的，而非绝对路径或错误文件名。

2. 解决MIME类型错误 #

MIME类型报错是404的衍生问题——服务器找不到脚本文件，返回了HTML格式的404页面，导致MIME类型为text/html。解决404问题后，此错误会自动消失。同时需确保服务器正确配置.js文件的MIME类型：

• IIS：在站点MIME类型中添加.js对应application/javascript
• Apache：在.htaccess中添加AddType application/javascript .js

3. 复杂组件加载失败的额外排查 #

• 确保完整打包所有依赖：构建Angular Elements时必须使用--single-bundle参数，将组件、依赖、样式全部打包到单个js文件中，避免遗漏资源导致加载失败。
• 处理Zone.js冲突：AngularJS和Angular 18的Zone.js版本可能冲突，可在Angular Elements的NgModule中禁用Zone.js：

  @NgModule({
    // ...其他配置
    ngZone: 'noop'
  })
  export class YourElementModule {}
  

• 加载必要的Web Components Polyfill：如果项目需要兼容旧浏览器，需在AngularJS项目中提前引入@webcomponents/webcomponentsjs的polyfill脚本。

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