Angular 15 SSR - component 'f' is not resolved: - templateurl: ../../templates/header/header.component.html

See more:

webpack

Angular15

I am trying to implement Angular Universal to an Angular 15 application that uses window and jquery. I have added the JSDOM package to use window object in server.ts and also added webpack.server.config.ts file for transpiling files like "canvas.node". The build gets generated successfully with "npm run build:ssr" and when I serve the application with "npm run serve:ssr" then It says **Node Express server listening on http://localhost:4000** as expected but when I hit this url in browser then It throws the following error:

Error: Component 'f' is not resolved:
 - templateUrl: ../../templates/header/header.component.html
Did you run and wait for 'resolveComponentResources()'?
    at Function.get (path_to_application/dist/server.js:2:1798018)
    at Fe (path_to_application/dist/server.js:2:1631172)
    at Aa (path_to_application/dist/server.js:2:1678967)
    at path_to_application/dist/server.js:2:1679384
    at path_to_application/dist/server.js:2:1652886
    at Array.forEach (<anonymous>)
    at pi (path_to_application/dist/server.js:2:1652849)
    at path_to_application/dist/server.js:2:1652878
    at Array.forEach (<anonymous>)
    at pi (path_to_application/dist/server.js:2:1652849)

What I have tried:

The header.component.html file does exists at the specified location. However, I have also tried to place the html file at the location same as header.component.ts and also changed from templateUrl: ../../templates/header/header.component.html to templateUrl: ./header.component.html but I am still getting the same error.