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