Angular 7 Can't find a way to get tsconfig.json path mapping works

Question

I've started an angular 7 project and I'm trying to configure the "path mapping" on angular.json to change my import way from this:

import { environment } from '../../../environments/environment';

to this:

import { environment } from '@environments/environment';

I've done this config on the root level tsconfig.json file:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environments/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
...

But I also get this error on the cli

ERROR in src/app/errors/not-foud/not-found.component.ts(2,29): error TS2307: Cannot find module '@environments/environment'

Is there something I'm missing?

Thumbsdown

Answer 1

Tested with angular 9 RC:

update both place:

at project base level to make vscode happy:

// tsconfig.json
// .\
{
  ...
   "paths": {
      "@x/*": [
        "x/*"
      ],
      "@web-env/*": [
        "src/environments/*"
      ],
      "@web-app/*": [
        "./projects/web/src/app/*"
      ],
    }
  ...
}

inside child project, update this to make cli happy:

// app.tsconfig.json
// .\projects\web\tsconfig.app.json
{
  ...
  "baseUrl": "./",
  "paths": {
    "@web-env/*": [
      "src/environments/*"
    ],
    "@web-app/*": [
      "src/app/*"
    ],
  }
  ...
}

Digestif

Answer 2

After trying and trying again I find out that the problem was with one of my vscode setting that was called:"Typescript > Preferences: Import Module Specifier" that was set to "relative", instead of "non-relative". Changing this, I was able to solve the problem.

Thumbsdown

Answer 3

In my case it was because the src\tsconfig.app.json also had a paths map defined. The one in my main tsconfig was being ignored by the TypeScript compiler. I removed that and it started working.

Potboy

Answer 4

For me I found that I needed the following:

"baseUrl": ".",
"paths": {
  "@my-company/my-module": ["./dist/@my-company/my-module"],
  "@my-company/my-module/*": ["./dist/@my-company/my-module/*"]
}

So simple, can't believe I spent so long trying to figure it out

Observance