Recently, I upgraded from Angular 11 to Angular 13 but encountered issues with absolute paths for templateUrl and styleUrls after transitioning to Angular 12.
While using Angular 11 with the AOT compiler enabled, everything worked seamlessly.
My requirement for absolute paths arises from my desire to avoid lengthy relative paths, especially since many of my components utilize shared .scss and .html files for functionalities like delete/restore confirm dialogs.
Below is an example of how I defined the templateUrl and styleUrls in my components back when it was working on Angular 11:
@Component({
selector: 'something',
templateUrl: '/src/app/directory/directory/example.component.html',
styleUrls: ['/src/app/directory/directory/example.component.scss']
})
When I adjusted the above code to use relative paths as shown below, it did work but resulted in an untidy solution filled with numerous ../../../:
@Component({
selector: 'something',
templateUrl: '../../../../example.component.html',
styleUrls: ['../../../../example.component.scss']
})
The error related to the templateUrl that I'm encountering is:
Error: src/app/directory/directory/something.component.ts:9:18 - error NG2008: Could not find template file '/src/app/directory/directory/example.component.html'.
templateUrl: '/src/app/directory/directory/example.component.html',
And here's the error associated with styleUrls:
Error: Module not found: Error: Can't resolve 'C:/Users/.../frontend/src/app/directory/directory/something/src/app/directory/directory/example.component.scss?ngResource' in 'C:\Users\...\frontend'
Error: The loader "C:/Users/.../frontend/src/app/directory/directory/something/src/app/directory/directory/example.component.scss" didn't return a string.
I attempted to address this issue by adding paths to my tsconfig file, but unfortunately, it had no impact:
"paths": {
"@env": [
"environments/environment"
],
"@shared/*": [
"app/shared/*"
],
"@core/*": [
"app/core/*"
],
"~*": [
"src/*"
]
}
I came across suggestions to utilize raw-loader, although I am uncertain about its functionality and whether it would be suitable in this scenario. My intuition points towards a compiler configuration issue, yet I haven't managed to uncover a resolution.
Here's an excerpt from my angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
... (content continues)
}
Additionally, here are snippets from my tsconfig.json and tsconfig.app.json files respectively:
{
"compileOnSave": false,
"compilerOptions": {
... (content continues)
},
"angularCompilerOptions": {
... (content continues)
}
}
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app"
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}