当我尝试使用 esbuild 引导 Angular 应用程序时,TypeScript 文件路径不起作用

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

提问人:Luke Bretscher 提问时间:11/18/2023 最后编辑:Luke Bretscher 更新时间:11/20/2023 访问量:23

问:

我已经设置了一个 Rails 6 应用程序,目标是运行 Angular。TypeScript 编译似乎工作正常,我已经在官方入门应用程序中复制了。但是当我尝试运行它时,文件路径无法正确加载。jsbundling-railsesbuild

这一切都发生在使用 只是我创建的一个目录,因为它应该包含将来应该做一些管理工作的 angular 应用程序。以下是相关文件的相关部分:app/javascriptesbuildangular_admin

应用程序/JavaScript/应用程序.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 { }

因此,它一直工作到,但那里提到的 HTML 和 CSS 文件不会加载。我在浏览器中收到以下错误:app.component.ts

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表示应用的域名)

因此,它只是试图通过普通的旧HTTP请求获取这些文件,但并没有获取它们。不过,我保证它们存在于文件系统中。但是如果我删除它们,我会得到相同的结果。

编辑:我找到了这个页面,解释了如何修复它

Angular TypeScript esbuild

评论

1赞 Andrei 11/18/2023
文件是捆绑的。您根本不需要查询这些文件。
0赞 Luke Bretscher 11/19/2023
是的,这很好,但它没有告诉我如何解决它。
0赞 Tony Ngo 11/19/2023
您应该使用在 app.module 中定义的路由导航到 URL,而不是直接导航到 app.component.html,这不允许您直接访问它
0赞 Andrei 11/19/2023
你不应该打开 site.com/app.cpomponent.html,而应该只打开 site.com 或 site.com/index.html
0赞 Luke Bretscher 11/19/2023
我不是打开 site.com/app.component.html,这就是问题所在。我尝试在编译过程中引用一个文件,但它认为我在编译后正在寻找另一个资源。

答: 暂无答案