将TypeScript编译为outDir时外部组件模板或css的路径

2019年7月21日 354次阅读

当我对Angular 2应用程序进行编码时,我的tsconfig.json文件包含以下参数：

"outDir": "dist"

意味着TypeScript-to-JavaScript编译会将生成的文件存储在dist文件夹中.

我的问题是当我尝试使用具有外部模板或CSS文件且使用component-relative paths的组件时,如下所示：

@Component({
  moduleId: module.id,
  selector: 'my-cmp',
  templateUrl: 'my.component.html',
  styleUrls:  ['my.component.css']
})
export class MyComponent { }

浏览器尝试从转换后的JavaScript文件所在的同一文件夹中加载.html和.css文件 – 在dist下.但是这些文件只存在于原始文件夹中(原始TypeScript文件所在的位置).

怎么解决这个？

注意：如果我删除moduleId：module.id并使用绝对路径,例如,代码可以工作. app / my-cmp / my.component.html,但这不是我想要的. 😉

最佳答案 由于您希望JavaScript输出到dist文件夹,假设分发,那么您可以创建一个脚本,将html和css复制到dist文件夹.通常,您可以对那些使这样做更有价值的文件进行某种缩小.

另一种方法是通过根目录相对引用这些路径.因此,例如,如果您有一个文件/someDir/myfile.ts和/someDir/my.component.html,那么您可以通过执行../someDir/my.component.html来引用my.component.html.如果/someDir/myfile.ts转到/dist/myfile.js,这将有效.这样做的缺点是,一旦你的项目增长,它可能会很烦人,所以我不推荐它.

点赞