My angular application is filled with various components, but a recent requirement change forced me to switch from using relative URLs to absolute ones.
Everything was going smoothly until I reached the templateUrl and styleUrls in the components. Despite my best efforts, replacing the relative paths with absolute ones led to an error (as seen below). I scoured through github issues, Stack Overflow, and Stack Exchange for solutions, but nothing seems to work for me.
src/app/views/login/login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { OauthService } from 'src/app/services/oauth/oauth.service';
import { LoggerService } from 'src/app/services/logger/logger.service';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
/*
methods and properties etc etc
.
.
.
*/
Here's the heirarchy of my application for reference:
https://i.sstatic.net/6JxvN.png
The tsconfig.json for this application (includes the baseUrl):
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
Every time I attempt to run the application on my browser using absolute paths for these two properties, I encounter this frustrating error: