如何解决 HostResourceResolver 中的错误？答案

【问题标题】：How to solve error in HostResourceResolver?如何解决 HostResourceResolver 中的错误？
【发布时间】：2021-06-15 02:53:59
【问题描述】：

解决此错误的步骤是什么？

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

【问题讨论】：

路径对吗？

标签： angular angular8

【解决方案1】：

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 {}

【讨论】：

谢谢@Braian。错误消息具有误导性。我的问题是我忘记将 .html 扩展名放在模板文件名中。
我在两种情况下都收到了这个错误：a) 路径拼写错误/大小写不同（例如 MyComponent 而不是 myComponent。b）实际文件名拼写错误/大小写不同。跨度>

【解决方案2】：

对于遇到此问题的任何人：可能有多种原因，但通常是因为角度编译器无法读取文件或存在语法错误。

对我来说，我在另一个组件（应用程序组件）的 HTML 中包含了一个纯打字稿组件，但提到了一个带有空白值的 templateUrl 属性。

这会破坏构建过程 - 但没有提及任何文件名。我通过将templateUrl 替换为template 解决了这个问题。

【讨论】：

【解决方案3】：

请显示组件代码，尤其是@Component 部分。通常你会有这样的东西：

@Component({
    selector: 'app-add-project',
    templateUrl: './add-project.component.html',
    styleUrls: ['styles.css']
})
export class AddProjectComponent  implements OnInit {
....

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

【讨论】：

【解决方案4】：

检查你是否不小心尝试在组件的 html 文件中加载 styles.css。

应该是这样的：

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

如果是，请删除它。这解决了我的问题。

【讨论】：

【解决方案5】：

就我而言，这就是错误的样子。

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

@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']
})

【讨论】：

【解决方案6】：

我遇到了这个问题，因为我没有指定的文件，当我将文件从本地推送到远程仓库时发生，并且没有跟踪某些文件。因此，请确保您的项目中有该文件。
当您没有提供指定文件的正确路径时，也会发生这种情况。
你可以使用这个：<link rel="stylesheet" type="text/css" href="../../style.css" /> 从C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts) 到达style.css 在src 文件夹中。

【讨论】：

【解决方案7】：

您可能使用模板Url：<div></div> - 这是错误的。例如：templateUrl: './form-dialog.component.html'

对于 html 使用：模板：<div></div>

【讨论】：

HostResourceResolver 中的错误：无法在 C:/Users/shema/myNewApp/src/app/landingscreen/landingscreen.ts 的上下文中解析 ./landingscreen.component.html。再次出现同样的错误。如何解决？

【解决方案8】：

您的源代码中应该有错误。这可能是.HTML、.css和.ts文件中的关系错误。请检查如下。

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

根据您的应用，这应该是正确的路径。

【讨论】：

【解决方案9】：

我遇到了同样的错误，但是在尝试了上面的答案后仍然没有用。

原来只有组件的 ts 文件在 TeamCity 服务帐户上，但规范、html 或 sass 没有，导致错误。问题是 spec、html 和 sass 文件的路径名太长。

文件路径限制为 260 个字符。

在这里：https://docs.microsoft.com/en-us/windows/win32/fileio/naming-a-file

我缩短了文件路径，现在它再次成功构建。

【讨论】：

【解决方案10】：

就我而言，我删除了组件附带的 .html 和 .css 文件，并在 @Component templateUrl 和 stylesUrls 中引用了它

【讨论】：

【解决方案11】：

在我的例子中，我在项目的两个不同位置有两个相同组件的 component.ts 文件。删除了不需要的 .ts 文件并解决了问题。

花了几个小时才找到问题。

【讨论】：

【解决方案12】：

如果您直接在“addproject.component.ts”中使用 HTML，则需要将 "templateUrl" 更改为 "template"，然后是您的 HTML代码。对于“styleUrls”，类似，如果您在组件的服务文件中提供样式本身，即“addproject.component.ts”，那么您需要替换“styleUrls” 带有 “样式”。它会起作用的。

【讨论】：