CODEWITHSUNDEEP
angular
Stephane
Stephane

Reputation: 12740

Template parse errors: is not a known element

I have a midi component defined as:

@Component({
  selector: 'midi-midi-lib',
  templateUrl: './midi-lib.component.html'
})

export class MidiLibComponent implements OnInit {
}

I also have a home component defined as:

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

whose template contains the markup:

<midi-midi-lib></midi-midi-lib>

The midilib component is included in its own module:

@NgModule({
  declarations: [
    MidiLibComponent,
  ],
  imports: [
  ],
  exports: [
    MidiLibComponent,
  ]
})
export class MidiLibModule { }

with the application module containing it:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MidiLibModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note that the above code is trimmed from many other components and modules.

The source tree is like:

src
├── app
├── lib

with the Midi component being under the lib directory.

If I then call the route defined as:

{
  path: 'home',
  loadChildren: './views/home/home.module#HomeModule',
  data: {
    preload: true,
    delay: false
  }
},

with the https://dev.thalasoft.com:4200/home url then the page shows the error:

Error: Uncaught (in promise): Error: Template parse errors:\n'midi-midi-lib' is not a known element

If I type in a terminal the ng build --prod command then I get the same error:

ERROR in : 'midi-midi-lib' is not a known element:
1. If 'midi-midi-lib' is an Angular component, then verify that it is part of this module.
2. If 'midi-midi-lib' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <mat-card-content>
    <p>
      [ERROR ->]<midi-midi-lib></midi-midi-lib>
    </p>
  </mat-card-content>
")

Whereas if I call the route defined as:

{
  path: 'midi',
  component: MidiLibComponent
},

in the app-routing.module file with the https://dev.thalasoft.com:4200/midi url then the component is found and its content is displayed just fine.

I'm under Angular 8.1.3

Upvotes: 0

Views: 1329

Answers (1)

alexortizl
alexortizl

Reputation: 2680

Because you are lazy loading HomeComponent, MidiLibModule should be imported in HomeModule instead of AppModule. Also in Angular 8 it is recommended to use dynamic import in your routing module like:

{
  path: 'home',
  loadChildren: () => import('./views/home/home.module').then(mod => mod.HomeModule),
  data: {
    preload: true,
    delay: false
  }
},

Upvotes: 1

Related Questions