Angular 7. How can I import this shared module?

Question

I have a module called RequestModule. I'm trying to use one of it's components RequestComponent and its Services inside of another component called HomeComponent

I thought I could just use the Request component in my home.component.html by using the selector like so

Home.Component.Html ... <request></request> ... but I was wrong. I'm getting this error.

: 'request' is not a known element: 1. If 'request' is an Angular component, then verify that it is part of this module.

How can I use this module in my home component?

Here is my RequestModule

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatCardModule, MatSidenavModule, MatGridListModule, MatIconModule, MatInputModule, MatTooltipModule, MatSelectModule, MatListModule, MatButtonModule, MatTabsModule, MatSnackBar, MatSnackBarModule } from '@angular/material';
import { RequestComponent } from './request.component';
import { RequestDetailsComponent } from './request-details.component';
import { RequestRoutingModule } from './request.routing';
import { DynamicFormComponent } from '../questionnaire/dynamic-form.component';
import { DynamicFormGroupComponent } from '../questionnaire/dynamic-form-group.component';
import { DynamicFormQuestionComponent } from '../questionnaire/dynamic-form-question.component';
import { CheckoutComponent } from './checkout.component';
import { SharedModule } from '../shared/shared.module';
import { ProductDetailsComponent } from './product-details.component';
import { CarouselComponent } from '../components/carousel/carousel.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { OwlDateTimeModule } from 'ng-pick-datetime';
import { OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { RequestService } from './request.service';

@NgModule({
  imports: [
    SharedModule,
    RequestRoutingModule,
    ReactiveFormsModule,
    MatCardModule,
    MatSidenavModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatTooltipModule,
    MatSelectModule,
    MatListModule,
    NgbModule,
    MatButtonModule,
    MatTabsModule,
    MatSnackBarModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule
  ],
  declarations: [
    RequestComponent,
    RequestDetailsComponent,
    DynamicFormComponent,
    DynamicFormGroupComponent,
    DynamicFormQuestionComponent,
    CheckoutComponent,
    ProductDetailsComponent,
    CarouselComponent
  ],
  providers: [
      {provide: OWL_DATE_TIME_LOCALE, useValue: 'en-US'},
      RequestService
  ]
})
export class RequestModule { }

The HomeComopnent is Declared in the template-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
...
import { HomeComponent } from '../components/home/home.component';
...

const routes: Routes = [
  { path: '', component: TemplateComponent, children: [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent},
     ...
    { path: 'request', canActivate: [AuthGuard], loadChildren: 'app/request/request.module#RequestModule' }
  ] }
];

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

This Module looks like it's already including the path to the RequestModule.

The Template-routing.module is used in my template.module.ts

import { NgModule } from '@angular/core';
import { TemplateComponent } from './template.component';
import { TemplateRoutingModule } from './template-routing.module';
import { RegionService } from '../region/region.service';
import { TeamModule } from '../team/team.module';
import { WorkModule } from '../work/work.module';
import { GraphicsModule } from '../graphics/graphics.module';
import { DashboardModule } from '../dashboard/dashboard.module';
import { SharedModule } from '../shared/shared.module';
import { LoginModule } from '../login/login.module';
import { MatInputModule, MatToolbarModule, MatIconModule, MatTooltipModule, MatButtonModule, MatSidenavModule } from '@angular/material';
import { HomeComponent } from '../components/home/home.component';
import { TemplateMenuComponent } from './template-menu/template-menu.component';
import { TemplateMenuItemComponent } from './template-menu-item/template-menu-item.component';

@NgModule({
  imports: [
    SharedModule,
    TemplateRoutingModule,
    TeamModule,
    WorkModule,
    GraphicsModule,
    DashboardModule,
    LoginModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatTooltipModule,
    MatButtonModule
  ],
  declarations: [ TemplateComponent, HomeComponent, TemplateMenuComponent, TemplateMenuItemComponent ],
  providers: [ RegionService ]
})
export class TemplateModule {}

This TemplateModule Trickles up to my AppRoutingModule which finally trickles up to the AppModule where everything is bootstrapped.

How can I use the Request Component inside of my HomeComopnent?

I've checked out this https://angular.io/guide/sharing-ngmodules

It looks like I did something wrong and I can't tell what it is.

If more info is needed please let me know so I can edit this question.

Answer 1

Your shared RequestModule module needs to export all the services and components which it want to make available to any other module that imports it.

So your RequestModule would need to look like:

@NgModule({
  imports: [
     // Stuff here
  ],
  declarations: [
    RequestComponent,
    // Other components, etc
  ],
  exports: [
    RequestComponent //<-- Component now available to modules which import this one
  ]
  providers: [
     // Stuff here
  ]
})
export class RequestModule { }

From the Angular docs on exports

exports: The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API. https://angular.io/api/core/NgModule

Edit: Based on your comment, you're lazy loading the module in the routing. This isn't the same as adding it as an import reference to the module. A lazy loaded module works in semi-isolated state (it gets its own Dependency Injection container for example).

If you need a component to be used in the way you are, your TemplateModule (which has the HomeComponent) needs to import the RequestModule.

It may be worth reviewing why this component is needed in the HomeComponent. Maybe it should be a shared module?