在Angular应用中通过标签嵌入Angular Web Component报JSON解析错误求助

报错根因 #

SyntaxError: Unexpected token < in JSON at position 0 本质是Web Component发起的资源请求实际返回了HTML内容（通常是404页面、宿主应用的路由回退首页，内容以<开头），却被代码强制调用JSON.parse解析导致的报错。你遇到的「动态创建元素正常、直接写标签报错」的差异，是两种渲染模式下Web Component初始化时机、宿主应用拦截逻辑的触发状态不同导致的，可按以下步骤排查解决：

• 配置webpack唯一标识，解决构建冲突
  你之前查到的webpack配置修改方向正确，需要修改Web Component打包时的webpack配置（而非宿主应用配置）避免两个Angular应用的全局构建变量冲突：
  如果你用Angular CLI构建Web Component，搭配@angular-builders/custom-webpack自定义构建配置，新增的custom-webpack.config.js内容如下：

module.exports = {
  output: {
    uniqueName: "offerRequestFormWebComponent", // 全局唯一标识，不要和宿主应用重名
    // Angular 10及以下版本用以下配置
    jsonpFunction: "webpackJsonp_offerForm",
    // Angular 11及以上版本替换为以下配置
    // chunkLoadingGlobal: "webpackJsonp_offerForm"
  }
}

同时在Web Component的angular.json对应构建配置中开启outputHashing: "all"，避免资源文件名和宿主应用冲突。

• 宿主应用添加自定义元素schema
  直接在Angular模板中写<offer-request-form>标签时，Angular默认会将其识别为Angular组件做校验，找不到对应组件时会干扰自定义元素的原生渲染逻辑，需要在使用该标签的Angular模块中引入CUSTOM_ELEMENTS_SCHEMA：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // 原有模块配置保持不变
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourUseModule { }

该配置会让Angular忽略非Angular内置、非项目内声明的自定义标签，保留其原生渲染逻辑。

• 修正Web Component资源加载路径
  如果宿主应用配置了路由回退规则、全局HTTP拦截器，可能会拦截Web Component发起的相对路径资源请求，返回宿主的index.html内容触发报错。可在Web Component的webpack配置中指定静态资源的绝对路径前缀：

// Web Component的custom-webpack.config.js的output节点添加
publicPath: 'https://ordexstorageaccounttst.blob.core.windows.net/offer-form/elements/'

• 调整加载时序
  确保宿主应用在渲染<offer-request-form>标签前，已经完整加载完Web Component的js脚本。如果脚本是异步加载的，需要监听脚本的load事件触发后，再渲染包含自定义标签的模板，避免初始化时序异常。

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