4

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

"outDir": "dist"

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

我的问题是当我尝试使用具有外部模板或 CSS 文件并使用组件相对路径的组件时，如下所示：

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

浏览器尝试从转换后的 JavaScript 文件所在的同一文件夹加载.html和文件 - 在. 但这些文件只存在于原始文件夹（原始 TypeScript 文件所在的位置）中。.cssdist

如何解决这个问题？

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

4

2 回答 2

1

module.id 只是生成的 JavaScript 文件的路径（例如http://localhost:8080/dist/app/my.component.js）。你可以用 module.id.replace('dist', '') 省略 dist 来完成你想要的：

@Component({
  moduleId: module.id.replace('dist', ''),
  selector: 'my-cmp',
  templateUrl: 'my.component.html',
  styleUrls:  ['my.component.css']
})
于 2016-12-23T22:25:15.447 回答
1

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

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

于 2016-06-14T14:08:03.773 回答