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

Question

当我编写 Angular 2 应用程序代码时，我的 tsconfig.json 文件包含以下参数:

"outDir": "dist"

意味着 TypeScript 到 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，但这不是我想要的。 ;-)

Answer 1

由于您希望 JavaScript 输出到 dist 文件夹，假设要分发，那么您可以创建一个脚本，将 html 和 css 复制到 dist 文件夹，如下所示出色地。通常，您可以对这些文件进行某种缩小，从而使这样做更有值(value)。

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