CODEWITHSUNDEEP
angular
koque
koque

Reputation: 2256

Lazy loading component not working as expected

I am trying to implement lazy-loading of my product component. The component is lazily loaded as expected but when I include the NavBarComponent template as a child component of the product template, I get the following error:

core.js:1448 ERROR Error: Uncaught (in promise): Error: Template parse 
errors:
'app-navbar' is not a known element:
1. If 'app-navbar' is an Angular component, then verify that it is part of 
this module.
2. If 'app-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("[ERROR 
->]<app-navbar></app-navbar>
<div>
  <div class="container-fluid p-a-2">
"): ng:///ProductModule/ProductComponent.html@0:0
'app-footer' is not a known element:

NavBarComponent is declared in the application's top module, AppModule, as shown below and should be visible to the product component:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import {AppRoutingModule} from './app-routing.module';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [
    NavbarComponent,
  ],
  imports: [
    BrowserModule,    
     InMemoryWebApiModule.forRoot(InMemoryDataService, {delay: 0, 
passThruUnknownUrl: true}),
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

product.component.html: (NavBarComponent template included in product template produces error)

<app-navbar></app-navbar>
  <div class="container-fluid p-a-2">
  </div>
<app-footer></app-footer>

ProductModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {ProductComponent} from './product.component';
import { ProductRoutingModule } from './product-routing.module';
// import {NavbarComponent} from '../navbar/navbar.component';

@NgModule({
  imports: [
    CommonModule,
    ProductRoutingModule
  ],
  declarations: [
    ProductComponent,
    // NavbarComponent
  ]
})
export class ProductModule { }

ProductRoutingModule:

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

import {ProductComponent} from './product.component';

const routes: Routes = [
  {
    path: ':id',
    component: ProductComponent
  }
];

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

AppRoutingModule: (Top application routing module)

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

import {HomeComponent} from './home/home.component';
import {AppliancesComponent} from './appliances/appliances.component';

const appRoutes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {
        path: 'appliances',
        component: AppliancesComponent
        // loadChildren: 'app/appliances/appliances.module#AppliancesModule'
    },
    {
        path: 'product',
        loadChildren: 'app/product/product.module#ProductModule'
    },
];

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

Upvotes: 1

Views: 1755

Answers (1)

David
David

Reputation: 34425

You cannot have globally (i.e. across modules) available pipes/components/directives.

When you have a module A that needs to use components/directives/pipes that are not part of that module, then module A should import the module containing these components/directives/pipes.

It does not matter if these have already been imported at the root level. https://angular.io/guide/ngmodule-faq

If you have a set of modules that you frequently need across several of your feature modules, you can create a shared module that imports AND exports these other modules. Then, in your feature modules, you just need to import that shared module to have other modules available (https://angular.io/guide/ngmodule-faq#can-i-re-export-classes-and-modules)

Upvotes: 1

Related Questions