Angular13+Webpack5迁移启动报错：this.input.charCodeAt is not a function

将应用迁移至Angular 13和Webpack 5（包含dev server）后，应用无法正常启动。

核心代码 #

app.main.ts 代码如下：

platformBrowserDynamic().bootstrapModule(AppModule)
.then((success) => console.log(`Application started`))
.catch((err) => console.error(err));

报错详情 #

调用 bootstrapModule(AppModule) 时，浏览器控制台触发以下错误，模块无法启动：

TypeError: this.input.charCodeAt is not a function
    at PlainCharacterCursor.charAt (compiler.mjs?a6f7:13874:1)
    at PlainCharacterCursor.updatePeek (compiler.mjs?a6f7:13893:1)
    at PlainCharacterCursor.init (compiler.mjs?a6f7:13852:1)
    at new _Tokenizer (compiler.mjs?a6f7:13119:1)
    at tokenize (compiler.mjs?a6f7:13066:1)
    at HtmlParser.parse (compiler.mjs?a6f7:14068:1)
    at HtmlParser.parse (compiler.mjs?a6f7:14456:1)
    at parseTemplate (compiler.mjs?a6f7:18533:1)
    at parseJitTemplate (compiler.mjs?a6f7:19697:1)
    at CompilerFacadeImpl.compileComponent (compiler.mjs?a6f7:19466:43)
eval @ app.main.ts?170f:10

排查记录 #

• 已尝试Stack Overflow上的相关解决方案，问题未解决
• 确认模板URL命名正确
• 开发环境Webpack配置未使用raw-loader

手动在 @angular/compiler/fesm2020/compiler.mjs 的_Tokenizer构造函数中添加try/catch后，得到以下输出：

{
  "content": {
    "default": "html content of main component"
  },
  "url": "ng:///MainComponent/template.html"
}

发现问题根源：PlainCharacterCursor中this.input = fileOrCursor.content;，后续调用this.input.charCodeAt(pos)时，input是包含default字段的嵌套对象而非字符串，导致报错。

相关环境信息 #

• 开发启动命令：

  yarn run webpack serve -- --stats-error-details --config {webpack_config} --progress --profile
  

• 附相关配置：package.json依赖列表、Webpack dev server配置、HTML加载规则及TS文件加载规则

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