Angular 10: Cannot find name when trying to import module

Question

I created a new Angular project and a new module inside that project using the CLI. If I try to import the newly created module in app.module.ts the Intellisense doesn't work and it can't find the module to auto-import it. I didn't change anything inside the tsconfig.json files.

Angular CLI: 10.0.4
Node: 12.16.3
Angular: 10.0.5
Typescript: 3.9.7
VS Code: 1.47.3

Any idea what could cause it?

EDIT: A manual import works fine, but I'm asking about the auto-import functionality.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class TestModule { }

have you tried import {TestModule} from './test/test.module'; ? — pbachman
– pbachman, Commented Jul 28, 2020 at 20:24
@pbachman Yes, a manual import is ok and the class is recognized. But auto-import doesn't work. — Chris
– Chris, Commented Jul 28, 2020 at 20:29
have you tried this stackoverflow.com/questions/38210604/… ? — pbachman
– pbachman, Commented Jul 28, 2020 at 20:31
@pbachman It seems like the Auto Import extension is working fine, excepting the fact that it imports the module at the top of the file. marketplace.visualstudio.com/items?itemName=steoates.autoimport — Chris
– Chris, Commented Jul 28, 2020 at 20:39
@pbachman The problem is that VS Code has the auto-import feature built in. I see no reason to use the extension and I would like to find the root cause of the problem, if there is any. Anyway, thanks for the suggestion! — Chris
– Chris, Commented Jul 28, 2020 at 20:43

Driver · Accepted Answer · 2020-08-12 11:37:33Z

4

I found the source of the problem in the tsconfig.json inside the project's root folder.

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

If you just change it to this

{
  "extends": "./tsconfig.base.json"
}

VS Code auto-import starts working

As I understand it the main problem is "files": [], typescript stops seeing all files that are not included in the project.

github.com/microsoft/TypeScript/issues/39632
https://github.com/angular/vscode-ng-language-service/issues/876
People offer the same solution

edited Aug 12, 2020 at 11:37

answered Aug 12, 2020 at 11:30

Driver

1642 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

Update: the fix is not needed anymore for Angular 10.1.3

Haris ramzan · Accepted Answer · 2020-07-28 20:27:30Z

-1

Try exporting child components inside Testmodule like this

 @NgModule({
      declarations: [],
      imports: [CommonModule],
      exports: [components]
    })
export class TestModule { }

answered Jul 28, 2020 at 20:27

Haris ramzan

931 silver badge3 bronze badges

1 Comment

Chris Over a year ago

There is no component in the module, so your answer is not applicable :)

Collectives™ on Stack Overflow

Angular 10: Cannot find name when trying to import module

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related