VSCode is somehow not registering Angular Modules and gives false errors

user_1850272 0
Viewed 1378

I'm working on an Angular app in vsCode and the app works perfectly fine so far without any errors in the console however in vsCode I'm getting red underlines under anything with [(ngModel)] and [formGroup] in my templates and pretty much under all the module names in my module classes. When I hover over the form items in my template it says it can't bind to them because they're not a known property of that element. Some of my components have red underlines as if they're not recognized yet the render in the browser. Each of my modules says they appear in the NgModule.imports of the parent module but itself has errors.

The Extensions I have installed are:

  • Angular Language Service 11.2.9 / enabled
  • ESLint 2.1.19 / enabled
  • HTML CSS Support 1.10.2 / enabled
  • IntelliSense for CSS class names in HTML 1.20.0 / enabled
  • Latest TypeScript and Javascript Grammer 0.0.55 / enabled
  • Nx Console 17.1.0 / enabled
  • TS Server Debug 1.3.0 / enabled
  • TSLint 1.3.3 / enabled
  • TypeScript Hero 3.0.0 / enabled
  • Anuglar 10 Snippers - TypeScript, Html, Angular Material, ngRx, RxJs & Flex Layout 10.0.3 / disabled
  • Angular 8 and TypeScript/Html Vs Code Snippets 1.0.21 / disabled
  • Minify 0.4.3 / disabled
  • Prettier - Code formatter 6.3.1 / disabled

I don't know what else to offer up in terms of figuring out the problem. As I said my app works perfectly fine which shows that the modules are indeed being recognized within Angular itself. I've closed and re-opened vs code, which includes re serving the app which complies without any errors in the terminal, I've been ignoring it and just working but pretty much all my files are turning red in the project folder and it's driving me crazy lol. Does anyone know what this is about?

angular visual-studio-code typescript
1 Answers

I experienced a similar issue a few months ago and fixed it by restructuring the NgModule import order. If one module depends on the other the order that you import them is significant.

I would make sure your FormsModule was prioritized higher like:

   @NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
})

If that doesn't work you could also do a fresh install of your node modules: Below command must be ran in CMD or GitBash. Alternatively, download separately.

rm -rf node_modules && npm cache clean && npm uninstall --save angular-cli && npm uninstall -g angular-cli && npm i --save @angular/cli && npm i -g @angular/cli && npm i
user_145525370
Related