logo标签列表

如何解决HostResourceResolver中的错误？

angularangular8
21

如何解决这个错误？

在C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts的上下文中， HostResourceResolver发生了错误：无法解析styles.css。

1
路径正确吗？ - A K
11个回答
43

HostResourceResolver 的出现是因为您组件的名称错误。

form.component.html

名字错误，需更正为form-dialog.component.html以解决问题。

而我的templateUrl是form-dialog.component.html。

@Component({
  selector: 'app-form-dialog',
  templateUrl: './form-dialog.component.html',
  styleUrls: ['./form-dialog.component.scss']
})
export class FormDialogComponent implements OnInit {}
3
谢谢@Braian。错误信息有误导性。在我的情况下问题是我忘记在模板文件名中加入“.html”扩展名。 - Fabricio
我在以下两种情况下都收到了此错误：a）路径拼写错误/大小写不同（例如，MyComponent而不是myComponent），以及b）实际文件名拼写错误/大小写不同。 - Farasi78
13
对于任何遇到此问题的人: 可能有很多原因，但通常是因为文件无法被Angular编译器读取或存在语法错误。
对于我来说，我在另一个组件（应用程序组件）的HTML中包含了一个仅由TypeScript编写的组件，但同时使用了空值的templateUrl属性。
这会导致构建过程中断 - 但不会提到任何文件名。 我通过将templateUrl替换为template来解决这个问题。
7
请展示组件代码，特别是@Component部分。通常你会有类似这样的代码：
@Component({
    selector: 'app-add-project',
    templateUrl: './add-project.component.html',
    styleUrls: ['styles.css']
})
export class AddProjectComponent  implements OnInit {
....

看起来 Angular 无法解析 styles.css。你可能需要指定文件的相对路径。

5

请检查您是否在组件的HTML文件中意外尝试加载styles.css。

它应该像这样：

<link rel="stylesheet" type="text/css" href="css/style.css" />

如果您是这样的话，请删除它。这对我来说解决了问题。

2
我曾遇到同样的错误，但尝试了以上方法后仍然无法解决。
原来组件的ts文件能成功传到TeamCity服务账户，但其spec、html或sass文件未能成功传输，导致错误。问题在于这些文件的路径名太长了。
文件路径名的长度有260个字符的限制。
参考：https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file 我缩短了文件路径，现在能够成功构建。
我认为这也是我的问题，我缩短了组件名称和路径，然后它就起作用了。谢谢。 - Evan
2

在我的情况下，错误看起来像这样。

主机资源解析器中的错误：无法解析 C:/Users/ncarmona/git/itds-targeting-ui/src/app/components/create-custom-email-group-dialog/create-custom-email-group-dialog.component.ts上下文中的./create-custom-email-group-dialog.components.css)

@Component({
  selector: 'app-create-custom-email-group-dialog',
  templateUrl: './create-custom-email-group-dialog.component.html',
  styleUrls: ['./create-custom-email-group-dialog.components.css']
})

如您在styleUrls中所看到的，components.css应该是component.css，多余的's'导致了这个问题。
解决方案：
@Component({
  selector: 'app-create-custom-email-group-dialog',
  templateUrl: './create-custom-email-group-dialog.component.html',
  styleUrls: ['./create-custom-email-group-dialog.component.css']
})
1
我遇到了这个问题，因为我没有指定的文件，在将文件从本地推送到远程仓库时发生了这种情况，并且没有跟踪一些文件。所以请确保你的项目中有该文件。
如果您没有给定正确的路径到指定的文件，也会发生这种情况。
您可以使用此代码：<link rel="stylesheet" type="text/css" href="../../style.css" /> 从 C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts) 来访问 src 文件夹中的 style.css。
1
你可能使用了错误的模板URL：<div></div>。例如：templateUrl: './form-dialog.component.html'
对于HTML，请使用：template：<div></div>。
1
主机资源解析器中的错误：无法在C:/Users/shema/myNewApp/src/app/landingscreen/landingscreen.ts的上下文中解析./landingscreen.component.html。同样的错误再次发生。如何解决？ - Shema Jacob
1
在我的情况下，我删除了组件附带的 .html 和 .css 文件，并且在@Component的templateUrl和stylesUrls中进行了引用。
1

你的源代码中可能存在错误。这可能是 .HTML、.css 和 .ts 文件中的关系错误。 请按照以下方式检查它。

@Component({
 selector: 'app-toolbar',
 templateUrl: './toolbar.component.html',
 styleUrls: ['./toolbar.component.css']
})

这应该是根据您的应用程序正确的路径。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接