Problem with shortened path import

I want to simplify this import: import { environment } from '../../../../environments/environment';

So, by following some guidelines I tried doing this in tsconfig.json:

"baseUrl": "src",
"paths": {
  "@environment/*": ["environments/*"]
}

And in the component: import { environment } from "@environment/environment";

And my folder structure: Folder structure

This, while actually finding the correct import and resolving the file, also does not produce any compiler errors, but produces a runtime error saying: enter image description here

I have also tried omitting the ‘@’ symbol and use an import relative to the src folder specified in the “baseUrl” flag, but the same thing happens - no compiler error, the path is resolved and I can follow it with ctrl+click, but the same runtime error occurs.