How to solve error in HostResourceResolver?

Question

What would be the steps to resolve this error?

ERROR in HostResourceResolver: could not resolve styles.css in context of C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts)

Nestle

Is the path right? – Citation

Answer 1

HostResourceResolver happens when the name of your component is wrong.

form.component.html

Wrong name, need to correct for form-dialog.component.html to resolve.

and my templateUrl is form-dialog.component.html.

@Component({
  selector: 'app-form-dialog',
  templateUrl: './form-dialog.component.html',
  styleUrls: ['./form-dialog.component.scss']
})
export class FormDialogComponent implements OnInit {}

Pilose

Thanks @Braian. The error message is misleading. The problem on my case is that I forgot to put the .html extension in the template filename. – Trolley

I received this error in both cases: a) the path was misspelled / had different case (e.g. MyComponent instead of myComponent. and b) the actual file name was misspelled / in a different case. – Leclaire

Answer 2

For anyone facing this issue: it could be a number of reasons but usually it is because the file cannot be read by the angular compiler or there is a syntax error.

For me, I was including a typescript only component within the HTML of another component (the app component) but had a templateUrl property mentioned with a blank value.

This breaks the build process - but does not mention any file name. I fixed the issue by replacing templateUrl with template.

Carl

Answer 3

Please show the component code, especially @Component part. Typically you would have something like this:

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

It looks like Angular cannot resolve styles.css. You probably need to specify relative path to the file

Spot

Answer 4

Check if you are accidentally trying to load styles.css in the html file of the component.

That should look like this:

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

If you are, delete it. That fixed the problem for me.

Chkalov

Answer 5

I was having this same error, but after trying the answers above it still didn't work.

Turns out only the component's ts file was making it's way on the TeamCity Service Account, however the spec, html or sass was not, causing the error. The issue was the path name was too long for the spec, html, and sass files.

filepaths have a limit of 260 characters.

as per here: https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file

I shortened the file path and now it's successfully building again.

Evieevil

I think this was the issue for me as well, I shortened the component name and path and it worked. Thanks. – Fleet

Answer 6

In my case this is what the error looked like.

ERROR in HostResourceResolver: could not resolve ./create-custom-email-group-dialog.components.css in context of 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']
})

as you can see in the styleUrls: the components.css should be component.css, the extra 's' caused the issue.

Solution

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

Watts

Answer 7

I had this problem because I didn't have the specified file, it happened when i pushed my files from local to remote repo, and did not track some files. So make sure you have the file in your project.
It can also happen when you do not give the correct path to specified file.
You can use this: <link rel="stylesheet" type="text/css" href="../../style.css" /> from C:/Users/shema/Desktop/angular/RP/ResourcePlanning/src/app/addproject/addproject.component.ts) to reach style.css in src folder.

Googins

Answer 8

You maybe use templateUrl: <div></div> - it's mistake. Ex: templateUrl: './form-dialog.component.html'

For html use: template: <div></div>

Fax

ERROR in HostResourceResolver: could not resolve ./landingscreen.component.html in context of C:/Users/shema/myNewApp/src/app/landingscreen/landingscreen.ts). Same errors occuring again.How to solve this? – Nestle

Answer 9

There should be an error in your source code. That can be relationship error in .HTML, .css and .ts files. Please check it is as follows.

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

This should be correct paths according to your application.

Arrhenius

Answer 10

In my case, I deleted the .html and .css file that came with the component and it was referenced in the @Component templateUrl and stylesUrls

Haire

Answer 11

In my case, I had two component.ts files for the same component in two different locations in the project. Removed the unwanted .ts file and the issue resolved.

Spent several hours to find the issue.

Jolandajolanta