'ion-app' is not a known element

Ionic Framework Ionic Angular
1

I am using Ionic 5. I am also using VCcode to edit the app. In the app.component.html I get ‘ion-app’ is not a known element. This happens with all the ion elements throughout all my ocmponents. i have added “CUSTOM_ELEMENTS_SCHEMA” to my NGModule in app.module.ts but it is still giving me this error. Everything I look up tells me to do this but it just simply isn’t working. It isn’t that big of a deal but it drives me nuts when I have red in my code.

Please let me know if there is any other info you guys need.
Thanks for the help.

2

Do you have IonicModule in your app.module.ts?

3

Yes.

Here is my app.module.ts

import { NgModule,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';


import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule {}

Somehow I got the App page working now with no errors but now the home page has the errors on every ionic element. ion-header , ion-content, ion-title. Even the div layers are giving me an error. Here is the home.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';


@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
  ],
  declarations: [HomePage],


})
export class HomePageModule {}

I didn’ t change anything accept for addin the CUSTOM_ELEMENTS_SCHEMA as per instruction but that didn’t solve the problem. This happens the moment I have run ionic start and finished the setup. I have even removed the node_modules and did an npm install and it still didn’t solve this prolbem. It just recently started happening when I create apps

Thanks

4

Hey all I think I figured it out. the problem was in VScode the way I was adding the folders to my workspace by using the full path. I was adding hte path through the workspace file as opposed to adding it as a folder from VScode. Don’t know why this is a problem but it fixed my issue.

5

If you have fixed this, then please remove every CUSTOM_ELEMENTS_SCHEMA. Unless you absolutely, positively, understand exactly why you are using it (and probably even then), never touch that. It nerfs the compiler, preventing it from doing its job of helping prevent you from making silly typo bugs.

6

I had the same issues plaguing my project after an upgrade to NG 16.x. The observed errors were actually false positives, and caused by two components I’d forgotten to declare the imports for.

image
image1716×1237 216 KB