Ionic4 component not a known element

[polonski]

Hi guys,

I’ve looked around but it seems I have all bases covered. Here’s a repro:

1. create an example project ionic start example --type=angular - ok so far

2. generate a component ‘some-thing’ seems to work ok

> ionic generate
? What would you like to generate? component
? Name/path of component: some-thing
> ng generate component some-thing
CREATE src/app/some-thing/some-thing.component.html (29 bytes)
CREATE src/app/some-thing/some-thing.component.spec.ts (650 bytes)
CREATE src/app/some-thing/some-thing.component.ts (285 bytes)
CREATE src/app/some-thing/some-thing.component.scss (0 bytes)
UPDATE src/app/app.module.ts (871 bytes)
[OK] Generated component!

3. going to ‘app.component.html’ to add the new component <some-thing></some-thing>
   noting that the load is in ‘app.module.ts’

import { SomeThingComponent } from './some-thing/some-thing.component';


@NgModule({
  declarations: [AppComponent, SomeThingComponent],
  entryComponents: [],
  imports: [
    BrowserModule,

4. i run ionic serve compile works ok, but when i browse to the page i get a console error:

compiler.js:2427 Uncaught Error: Template parse errors:
'some-thing' is not a known element:
1. If 'some-thing' is an Angular component, then verify that it is part of this module.
2. If 'some-thing' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
              </ion-label>

              [ERROR ->]<some-thing></some-thing>

            </ion-item>
"): ng:///AppModule/AppComponent.html@17:14
    at syntaxError (compiler.js:2427)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20311)
    at
...

All answers about this seem to point to having to load this component in manually, but it looks like that is already done inside the ‘app.module.ts’

I noticed this in the tabs sample project and thought it was something about lazy loading, but it’s still happening inside a non-tabs projects too.

What am I missing here? gotta be something small

with many thanks

[arnhrwd]

I had this problem when I was importing the page (component) rather than the module, and it wasn’t giving any compilation errors but then module not known at runtime. In your app.module.ts put your module in the imports list.

[indraraj26]

@polonski

CUSTOM_ELEMENTS_SCHEMA

you have to import this in app.module.ts

[anna_liebt]

Hello,
@indraraj26 he creates a ionic project with type angular and then he creates with angular a component. This component is not a webcomponent, so he needs like @arnhrwd wrote to import whatever.component.module and add it to import section like WhateverModule.

@polonski if you use visual code, then there are extensions that will help with imports.

In short, when you wanna use a component in html, then import path points to *module. If this custom component is a webcomponent, then add CUSTOM_ELEMENTS_SCHEMA ( for example a webcomponent created with stencil), otherwise the WatheverModule to import section…

Best regards, anna-liebt

[polonski]

Thanks @anna_liebt , @arnhrwd , @indraraj26

So I’ve added in app.module.ts

the import:

import { SomeThingComponent } from './some-thing/some-thing.component';

the declaration and schema into NgModule

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

and then the <some-thing></some-thing> element in the app.component.html

Good news: No errors yayz
Bad news: <some-thing></some-thing> is rendering as an empty element, the component html (which is a button) is not rendering (!)

What in the…

[polonski]

Alright so I figured it out.

In this case it’s the ionic generate command that is to blame.

when the some-thing.component.ts file is generated, it produces this @Component definition:

@Component({
  selector: 'app-some-thing',
  templateUrl: './some-thing.component.html',
  styleUrls: ['./some-thing.component.scss']
})

which should have a selector value minus the “app-” :

@Component({
  selector: 'some-thing',
  templateUrl: './some-thing.component.html',
  styleUrls: ['./some-thing.component.scss']
})

I would raise a bug, but don’t really know how to…

Hopefully this helps others

[anna_liebt]

Hello,
you have created a angular component, so you do not need CUSTOM_ELEMENTS_SCHEMA.

You have

import { SomeThingComponent } from './some-thing/some-thing.component';

but you must import its module like

import { SomeThingModule } from './some-thing/some-thing.module';

and add this to your import section

imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
SomeThingModule
  ],

In .ts you import component to use it in code.
To use in html you import module and add it to import section.

For Custom Schemas see https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA

If you use visual code, then there are extensions that helps with importing.

Best regards, anna-liebt

[polonski]

Thank you for this @anna_liebt

But in order to make a component work, I must include the

import { SomeThingComponent } from './some-thing/some-thing.component';

also declare it in

declarations:[SomeThingComponent ]

and

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Otherwise things don’t work.

By creating a component, there is no such file as some-thing.module to import as this file does not exist as this is a component, not a module.

You mention visual studio extension to help with this. Can you please link to one?

Many thanks

[lodela]

@polonski, at the end… how you fix it…? please share the love… the CUSTOM_ELEMENTS_SCHEMA does not work for me… because the template of component never loads…

[polonski]

yes i fixed it by including it declarations AND schemas

[arlevi]

@polonski

‘CUSTOM_ELEMENTS_SCHEMA’

In Ionic 3 and 4, what helped me is, to remember that it’s not enough to add

import { ComponentsModule } from '../../components/components.module';

...
@NgModule({
  imports: [
    ...
    ComponentsModule,
    ...
  ],

to your app.module.ts

You also need to add it to every page’s module !

src/app/home/home.module.ts
src/app/about/about.module.ts
src/app/game/game.module.ts

I never liked using the CUSTOM_ELEMENTS_SCHEMA in the NgModule …

[arnotixe]

You also need to add it to every page’s module !

I never thought of that - but for some modules (like ionic-context-menu - npm) I had to add it directly to the module of the ionic page I wanted to use it in. Adding it to app.module imports had no effect (and I’m a noob so I don’t understand why)

[mitchellfw]

I was able to fix this issue by disabling the angular ivy complier, in the

tsconfig.app.json   
"angularCompilerOptions": {
    "enableIvy": false
  },

[FreakyMind]

@lodela

I have found a solution you have to declare the components in module by making a Shared Module.

so first create a Module ( I have named it Shared) and then imports the ionicModule in it and declare the component you have just created.

declarations:[SomeThingComponent ]
imports: [CommonModule, IonicModule, RouterModule],

Its Works Perfectly.

[HassanYousef1985]

Hello,
@anna_liebt
I was searching for a solution for this issue and I found this comment. This comment explains exactly what I want and I tried to add CUSTOM_ELEMENTS_SCHEMA but I still have the problem and I can not find how I can fix this issue. Could you help me ? Thanks

[rapropos]

Never use CUSTOM_ELEMENTS_SCHEMA.

Yes, I realize that’s overly broad advice, but if you are in a position where you are searching Google and forums to fix problems, I can only implore you to heed it.

I have about 80% confidence that your actual problem stems from a combination of unfortunate factors:

• Angular lazy loading is brittle and overly complex
• Ionic generators and documentation lock you into it by default
• You probably forgot to import something somewhere

To test this theory, make a new branch in your version control system, and try taking the lazy loading completely out. Declare all components in your AppModule, and eliminate all other component-specific modules from your code.

If you don’t want to do that, the next best solution would be for you to provide a link to a publicly-accessible repository that others can use to try to replicate your problem. It is going to be fairly difficult to diagnose anything further with just chitchat and isolated snippets.

[adamwarnick]

This saved me–I had converted my component to a page and not done this but something was off. This fixed everything.

[leandroter7]

Hi!

What is the some-thing magic word that you used there?

Br

[rapropos]

@leandroter7

What is the some-thing magic word that you used there?

You know how every time you declare a custom component, inside its @Component declaration, there’s a selector property? That determines how you embed that component into another template. So if you have:

@Component({selector: "abracadabra", ...})
class AbracadabraComponent {...}

…then in some other page, you would include it like:

<abracadabra></abracadabra>

some-thing is being used in that context in the OP.