[Ionic4] Have some troubles with Components 'app-logo' is not a known element

Ionic Framework
1

I have a problem integrating a logo component globally. I’ve already tried a lot and looked at other projects. But I can not get it to work :frowning: Could I help me or is that a problem of the beta?

Error:
Uncaught Error: Template parse errors:
‚app-logo’ is not a known element:

  1. If ‘app-logo’ is an Angular component, then verify that it is part of this module.
  2. If ‘app-logo’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v10.7.0 (/usr/local/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

My app structure

App
+—	app.module.ts (imports shared)
+—	Auth
|	+—	auth.module.ts
|	+—	Pages
|		+—	Login (Uses ‚app-logo‘)
|		+—	Register (Uses ‚app-logo‘)
+—	Shared
|	+—	shared.module.ts (export LogoComponent, declares LogoComponent)
|	+—	Components
|	|	+—	Logo
|	|	|	+— logo.component.ts
|	+—	Pages
|	|	+—	Other Pages (Uses ‚app-logo‘)
+—	Other Modules

app.module.ts

[…]

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule, 
        IonicModule.forRoot(), 

        AppRoutingModule,

        SharedModule,
        AuthModule,
        …
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent],
    schemas: []
})
export class AppModule { }

shared.module.ts

[…]

@NgModule({
    imports: [],    
    declarations: [
        LogoComponent
    ],
    exports: [
        LogoComponent
    ],
})
export class SharedModule {}

Logo.component.ts

[…]

@Component({
    selector: ‚app-logo',
    templateUrl: './logo.component.html',
    styleUrls: ['./logo.component.scss']
})
export class LogoComponent implements OnInit {

    constructor() { }

    ngOnInit() {}
}
1 Like
2

Hi @jan-hero
You need to add your module “SharedModule” to the “AuthModule” imports .

1 Like
3

Thanks, but I’ve already tried that. I get the same error

4

Your copied code has a small problem. Check the ' before the app-logo.

@Component({
    selector: 'app-logo',
    templateUrl: './logo.component.html',
    styleUrls: ['./logo.component.scss']
})
export class LogoComponent implements OnInit {

    constructor() { }

    ngOnInit() {}
}
5

I think IonicModule might be missing in your shared.module.ts, add

imports: [
    IonicModule
]
6

Thank you guys, sorry for the late response! Yes the snippet smells, but it’s only a copy paste mistake to this post.
I’ve found a Solution for me: I have created a new module for the components and import this into the page module where I need it.

e.g. Page:

@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild(routes),
        
        ComponentsModule
    ],
    declarations: [InfoPage]
})
export class InfoPageModule { }

@NgModule({
    declarations: [
        LogoComponent
    ],
    exports: [
        LogoComponent
    ],
})
export class ComponentsModule {}
2 Likes
7

Thank you so much for this! Saved me for long!!!

1 Like