TypeScript file paths aren't working when I try to bootstrap Angular app using esbuild

110 Views Asked by At

I have set up jsbundling-rails with esbuild on a Rails 6 app with the goal of running Angular. The TypeScript compilation seems to be working fine, and I've copied in the official starter application. But when I try to run it, the file paths don't load right.

This is all happening in the app/javascript directory that esbuild uses. angular_admin is just a directory I created because it's supposed to hold the angular app that's supposed to do some admin things in the future. Here are relevant portions of the files in question:

app/javascript/application.js

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './angular_admin/app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app/javascript/angular_admin/app/app.module.ts

import { NgModule } from '@angular/core'; // this and other angular imports work

import { AppComponent } from './app.component'; // this seems to work?

// more angular stuff goes here

app/javascript/angular_admin/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // danger, will robinson!
  styleUrls: ['./app.component.css'] // danger!
})
export class AppComponent { }

So it works up until it gets to app.component.ts, but the HTML and CSS files alluded to there don't load. I get these errors in my browser:

GET http://FOO.BAR/app.component.html 404 (Not Found)
Failed to load ./app.component.html
GET http://FOO.BAR/app.component.css 404 (Not Found)

(FOO.BAR represents the domain name of the app)

So it's just trying to get those files by plain old HTTP requests and it isn't getting them. They exist in the filesystem though, I promise. But I get the same result if I delete them.

Edit: I found this page that explains how to fix it

0

There are 0 best solutions below