Angular <custom-component> doesnt work on lazy-loaded modules

Question

I have created a custom component which works fine on app.component, but when the <custom-component> is used in lazy loaded module it gives an error:

Error: Template parse errors:
'my-component' is not a known element:
1. If 'my-component' is an Angular component, then verify that it is part of this module.
2. If 'my-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I'm using Angular 4.0.0 / CLI

Code:

app.module.ts

...

import { LoaderComponent } from './shared/components/list-components/loader/loader.component';

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent <- declared here because I need the component in multiple modules
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

loader.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
  @Input() type:any;

  constructor() { }

  ngOnInit() {
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

  { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<router-outlet></router-outlet>
<my-component></my-component> <-- works here

and lazy.component.html

<p>
  this module is lazy loaded
  <my-component ></my-component> <- not working
</p>

Any ideas?

* UPDATE *

I created a SharedModule which declares LoaderComponent. The SharedModule is imported in every module which needs the LoaderComponent. Works!

update the route configuration, which you used for lazy loading it — Aravind
– Aravind, Commented Apr 13, 2017 at 6:56
@Aravind added. I have also tried to use PreloadAllModules, but that didnt help — Hese
– Hese, Commented Apr 13, 2017 at 7:04
@Aravind There are many other routes also, but I removed everything thats not related to this issue — Hese
– Hese, Commented Apr 13, 2017 at 7:10

Dmitrij Kuba · Accepted Answer · 2017-04-13 07:16:21Z

4

You need to create the LoaderModule:

@NgModule({
  imports: [],
  exports: [LoaderComponent],
  declarations: [LoaderComponent],
  providers: [],
})
export class LoaderModule {
}

Then add this module to the app.module

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    LoaderModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

Make sure that you add LoaderModule also to the LazyModule

answered Apr 13, 2017 at 7:16

Dmitrij Kuba

1,03810 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hese Over a year ago

Does that mean I need to create a module for each custom component I want to use?

Dmitrij Kuba Over a year ago

If you want to use this component in different modules you need to create the module for this component

Aravind · Accepted Answer · 2017-04-13 07:14:18Z

1

You are having the LoaderComponent in your AppModule, but your LazyModule contains the lazy.component.html, that is mistake.

Fix by moving the LoaderComponent should be in Declaration of LazyModule.

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent //////////// which module does it belongs to?
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Need more information to elaborate the post to work further.

answered Apr 13, 2017 at 7:14

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

1 Comment

Hese Over a year ago

If I move the LoaderComponent declaration to LazyModule, then it works, but I need to use the component on multiple modules, thats why it is declared in app.module

Collectives™ on Stack Overflow

Angular <custom-component> doesnt work on lazy-loaded modules

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related