Question

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

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

Answer 2

请显示组件代码，尤其是@Component部分。通常，您会遇到类似这样的情况：

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

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

Answer 3

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

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

这中断了构建过程-但未提及任何文件名。我通过将templateUrl替换为template来解决了这个问题。

Answer 4

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

应该看起来像这样：

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

如果是，请将其删除。那为我解决了这个问题。

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

Answer 6

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

中引用了它

Answer 7

我遇到了这个问题，因为我没有指定的文件，这是在我将文件从本地存储库推送到远程存储库时发生的，并且没有跟踪某些文件。因此，请确保您的项目中有文件。
如果没有为指定文件提供正确的路径，也会发生这种情况。
您可以使用以下方法：<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。

Answer 8

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

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

Answer 9

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

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

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

Answer 10

我也遇到了同样的错误，但是尝试了上面的答案后仍然无法正常工作。

仅检查出组件的ts文件是否可以在TeamCity服务帐户上使用，但是没有使用spec，html或sass引起错误。问题是路径名称对于spec，html和sass文件而言太长。

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

按此处：https://docs.microsoft.com/en-us/windows/win32/fileio/naming-a-file

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

Answer 11

就我而言，我在项目中的两个不同位置有两个component.ts文件，用于同一个组件。删除了不需要的.ts文件，问题得以解决。

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

Answer 12

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

如何解决HostResourceResolver中的错误？

12 个答案: