使用esbuild启动Angular时TypeScript文件路径加载失败

问题现象 #

在Rails 6应用中使用jsbundling-rails搭配esbuild运行Angular应用时，TypeScript编译正常，但Angular组件通过templateUrl和styleUrls引用的HTML、CSS文件，在浏览器运行时返回404错误。浏览器会尝试从应用根域名（如http://FOO.BAR/app.component.html）请求这些文件，而这些文件实际存在于项目文件系统中，但并未被esbuild打包到产物里。

解决方案 #

方案1：内联模板与样式（快速解决） #

直接将模板和样式内容内联到组件代码中，无需依赖外部文件引用：

// app/javascript/angular_admin/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Angular Admin Panel</h1>`,
  styles: [`h1 { font-family: Arial, sans-serif; color: #3498db; }`]
})
export class AppComponent { }

方案2：配置esbuild加载器处理外部HTML/CSS文件（适合复杂场景） #

通过配置esbuild的加载器，将HTML和CSS文件转换为字符串嵌入到打包后的JS文件中，让Angular能正确识别引用：

1. 修改esbuild配置文件（如esbuild.config.js），添加对应加载器规则：

const path = require('path');

module.exports = {
  entry: './app/javascript/application.js',
  output: {
    path: path.resolve(__dirname, 'app/assets/builds'),
    filename: 'application.js',
  },
  resolve: {
    extensions: ['.ts', '.js', '.html', '.css'],
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'css-loader' },
    ],
  },
};

2. 修改组件文件，导入外部HTML和CSS并赋值到组件配置中：

// app/javascript/angular_admin/app/app.component.ts
import { Component } from '@angular/core';
import templateContent from './app.component.html';
import styleContent from './app.component.css';

@Component({
  selector: 'app-root',
  template: templateContent,
  styles: [styleContent]
})
export class AppComponent { }

3. 安装所需的loader依赖：

npm install --save-dev raw-loader css-loader ts-loader

原因说明 #

默认情况下Angular CLI会自动处理templateUrl/styleUrls的资源打包，但直接使用esbuild时，它不会解析这些Angular特有的资源引用语法，而是保留原相对路径，导致浏览器在运行时尝试从根域名请求未被打包的原始文件，最终出现404错误。通过内联或配置加载器，让esbuild将HTML/CSS转换为字符串嵌入JS包中，就能让Angular正确加载这些资源。

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