Angular 10: Module Alias Import Not Resolving in VSCode due to Path Mapping Recognition Issue

Question

Angular 10: Module Alias Import Not Resolving in VSCode due to Path Mapping Recognition Issue

After updating a project from Angular 8.2 to version 10, I followed the instructions on https://update.angular.io/ and everything seemed fine. However, once I implemented Path Mapping, I started encountering this error everywhere:

Cannot find module '@environments/environment' or its corresponding type declarations.ts(2307)

This error specifically affects @environments and @modules which are declared in the paths. The other modules do not show any errors because they are not being used.

Currently, the project builds correctly using ng build without any errors, but when using ng build --prod, Visual Studio Code (v1.46.1) displays import errors. Here is what I have:

src/tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./e2e/tsconfig.json"
    }
  ]
}

src/tsconfig.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./lw/app",
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts"],
  "include": ["src/**/*.d.ts"],
  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
}

src/tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/lw",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
      "@angular/*": ["./node_modules/@angular/*"],
      ...
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  }
}

NOTE: I have tried various baseUrl configurations without success.

Build Result

$ ng build
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
...

VSCode info

Version: 1.46.1 (user setup)
Commit: cd9ea6488829f560dc949a8b2fb789f3cdc05f5d
Date: 2020-06-17T21:13:20.174Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

Angular CLI

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ...
...

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
...
typescript                        3.9.6
webpack                           4.43.0

Here is an image showing the organization of my project:

https://i.sstatic.net/uYqW7.png

In addition, a strange issue arises where certain services, such as CityService, do not show any errors and can be accessed without problems, while other services like ColorService display errors despite having a similar structure.

https://i.sstatic.net/oehnK.png

https://i.sstatic.net/HxoXU.png

angular typescript visual-studio-code

Answer 1

Answer №1

I have successfully resolved the issue by implementing the following changes:

To resolve the issue, copy all the code from either tsconfig.base.json or tsconfig.app.json and paste it into the tsconfig.json file. Then, you can remove the tsconfig.base.json or tsconfig.app.json file.
Update the path in the tsconfig.app.json or tsconfig.base.json file to point to the correct location by modifying the extends property as shown below:
```
 {
 "extends": "../tsconfig.json" 
 ...
 }
```

Here is the code found in the tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "strict": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@app-models": [
        "src/app/model/index"
      ],     
      "@app-core": [
        "src/app/core/index"
      ],
      "@app-shared": [
        "src/app/shared/index"
      ]
    }
  }
}

A) If ng serve is active, restart it by following these steps:

CTRL + C
ng serve

B) If ng serve is not active, perform the following actions:

Command + Shift + P
Search for "TypeScript: Restart TS Server"
Press enter

Answer 2

I have successfully resolved the issue by implementing the following changes:

To resolve the issue, copy all the code from either tsconfig.base.json or tsconfig.app.json and paste it into the tsconfig.json file. Then, you can remove the tsconfig.base.json or tsconfig.app.json file.
Update the path in the tsconfig.app.json or tsconfig.base.json file to point to the correct location by modifying the extends property as shown below:
```
 {
 "extends": "../tsconfig.json" 
 ...
 }
```

Here is the code found in the tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "downlevelIteration": true,
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "strict": false,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "paths": {
      "@app-models": [
        "src/app/model/index"
      ],     
      "@app-core": [
        "src/app/core/index"
      ],
      "@app-shared": [
        "src/app/shared/index"
      ]
    }
  }
}

A) If ng serve is active, restart it by following these steps:

CTRL + C
ng serve

B) If ng serve is not active, perform the following actions:

Command + Shift + P
Search for "TypeScript: Restart TS Server"
Press enter

Answer 3

Answer №2

We encourage you to update the following:

'environments/environment'

with

'src/environments/environment'

Answer 4

We encourage you to update the following:

'environments/environment'

with

'src/environments/environment'

Answer 5

Answer №3

There is a scenario that echoes the current question, although it differs from the original post. I would like to share the question and answer here.

When working with Angular 13, if you decide to rename files that are being imported or if you rename an exported class, there may be instances where the Angular CLI fails to recognize these imports with @features, etc...

After attempting a few solutions without success, I decided to take a different approach. I removed the .angular folder in the root directory, which is a new feature used for caching purposes. Following that, I ran npm start again. Surprisingly, this resolved the issue with the renamed imports.

Answer 6

There is a scenario that echoes the current question, although it differs from the original post. I would like to share the question and answer here.

When working with Angular 13, if you decide to rename files that are being imported or if you rename an exported class, there may be instances where the Angular CLI fails to recognize these imports with @features, etc...

After attempting a few solutions without success, I decided to take a different approach. I removed the .angular folder in the root directory, which is a new feature used for caching purposes. Following that, I ran npm start again. Surprisingly, this resolved the issue with the renamed imports.

Angular 10: Module Alias Import Not Resolving in VSCode due to Path Mapping Recognition Issue

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting Problem: Incompatibility with Angular 1 and Angular 2 Hybrid Application causing Display Issue with Components

Sharing packages within nested scopes

Using Angular with THREE JS integration in Javascript

The React Quill interface is unable to load due to an undefined window

Is Angular CLI incorrectly flagging circular dependencies for nested Material Dialogs?

Implementing TypeScript with styled components using the 'as' prop

Loading Angular 4 Material Tabs when a tab is selected

What is the injection token used for a specialized constructor of a generic component?

The resource in CosmosDB cannot be found

Is it possible for form controls to inherit from another form?

Is ts-node necessary for using TypeScript in Node.js?

Identifying the moment when a user deselects an option in mat-autocomplete

Leverage properties within the storybook component template

Transforming ng-bootstrap carousel to utilize div elements instead of images

Navigating with Tabs in Ionic Angular is a Breeze

Guide on creating rsa key pair on the client side with angular2

Is there a way to retrieve the ReturnType<T> for all methods within a class, even if the ReturnType<T> and its usage appear to be static?

Long wait times for Angular 2 applications to load

"Setting up a schema in TypeORM when connecting to an Oracle database: A step-by-step guide

The object literal is restricted to defining existing properties, and 'id' is not a recognized property in the type 'FindOptionsWhere<Teacher>'