Ionic4 component not a known element

polonski · January 15, 2019, 5:51am

Hi guys,

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

create an example project ionic start example --type=angular - ok so far
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!

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,

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 · January 15, 2019, 6:43am

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 · January 15, 2019, 12:18pm

you have to import this in app.module.ts

anna_liebt · January 15, 2019, 2:52pm

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 · January 16, 2019, 12:52am

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 · January 16, 2019, 12:52am

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 · January 16, 2019, 4:23pm

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 · January 16, 2019, 10:10pm

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 · June 13, 2019, 5:15pm

@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 · June 14, 2019, 12:05am

yes i fixed it by including it declarations AND schemas

arlevi · August 11, 2019, 4:40pm

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 · June 30, 2020, 2:40am

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

I never thought of that - but for some modules (like https://www.npmjs.com/package/ionic-context-menu) 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 · July 23, 2020, 3:46am

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

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