路径编译打字稿时OUTDIR

当我编写角2级的应用程序，我tsconfig.json文件包含以下参数：路径编译打字稿时OUTDIR

"outDir": "dist"

意味着打字稿到JavaScript的编译将存储在生成的文件dist文件夹。

我的问题是，当我尝试使用它有一个外部的模板或CSS文件和组件，其使用component-relative paths，就像这样：

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

浏览器尝试从相同的加载.html和.css文件转码后的JavaScript文件所在的文件夹 - 在dist之下。但是这些文件只存在于原始文件夹（原始TypeScript文件所在的位置）中。

如何解决这个问题？

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

来源

2016-06-14 AngularChef

既然你想你的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。这样做的缺点是，一旦你的项目增长，它可能会令人讨厌，所以我不会推荐它。

来源

2016-06-14 14:08:03

感谢您的帮助，David。太糟糕了，没有更直接的解决方案。 – AngularChef

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-23 22:25:15

路径编译打字稿时OUTDIR

回答

相关问题