我有这样的文件结构：
/root
--/app
----app.ts
--/components
----/banner
------banner.ts
------banner.css
--index.html
我在app.ts中导入banner.ts就像这样
import {Banner} from '../components/banner/banner';
在banner.ts中，我想获取banner.css文件，所以我写了这个：
import {Component} from 'angular2/core';
@Component({
selector: 'banner',
templateUrl: '../components/banner/banner.html',
styleUrls: ['../components/banner/banner.css']
})
这样可行，但当我改为此时，它失败了：
styleUrls: ['./banner.css']
我也尝试styleUrls: ['banner.css']，失败
根据我的理解，＆＃39; ./'意味着在同一目录中，但为什么我会收到404错误？
我正在使用最新的Angular2
答案 0 :(得分：1)
是的，Angular2目前只能识别正确的相对文件路径。路径实际上应该从下面开始，如下所示是安全的，我们再次设置指导原则是什么工作，而不是使用测试版，我相信这将在未来发生变化。但就目前而言，对于beta0，以下代码是引用组件补充文件的标准。
<body>
<!-- Email Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" max-width="600"style="border-collapse: collapse; background-color: #F2F2F2; height: 100% !important;width: 100% !important;">
<tbody>
<tr>
<td align="center" valign="top" style="margin: 0;padding: 20px;border-top: 0;height: 100% !important;width: 100% !important;">
<!-- Container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600"style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<!-- Preheader -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: left;">Forum Group Lorem ipsum dolor sit amet</td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: right;"><a href="#" style="color: #606060">view in browser</a></td>
</tr>
</tbody>
</table>
<!-- End Preheader -->
<!-- Preheader Spacer-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
<!-- End Preheader Spacer-->
<!-- Header Image-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td style="text-align:center">
<img src="img/logo-forum-group.png" max-width="286" max-height="115" border="0" alt="The Forum Group Logo">
</td>
</tr>
</tbody>
</table>
<!-- Header Spacer-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
<!-- Header Strip-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #202020;font-family: Helvetica, sans-serf;font-size: 30px;line-height: 125%;text-align: left; text-transform: uppercase;">The Forum Group</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 15px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 9px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;"><a style="background-color:#3D87F5; color:#fff;border-radius:5px; padding:10px;text-decoration: none;" href="#">Read More</a></td>
</tr>
</tbody>
</table>
<!-- Header Spacer blue-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 10px;color: #202020;font-size: 14px;line-height: 100%;"></td>
</tr>
</tbody>
</table>
<!-- Header Spacer white-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
<tbody>
<tr>
<td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
<td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
<!-- End Container -->
</td>
</tr>
</tbody>
</table>
<!-- End Email Wrapper -->
</body>
</html>
结帐其他大型例子，他们都使用这种模式。 A component inside a large Angular2 Sample
答案 1 :(得分：1)
嗨，我很高兴看到这个：
在Visual Studio 2015中
希望有所帮助