Component and router-outlet issue in Angular

Question

<div class="ui grid stackable">
  <div class="five wide column">
    <app-email-index></app-email-index>
  </div>
  <div class="eleven wide column">
    <router-outlet></router-outlet>
  </div>
</div>

I am creating an email client in Angular, there was no Problems reported by VScode but when I run it says error "app-email-index" and "router-outlet" are not known elements. I am sure that "app-email-index" element is declared in the same module of "inbox-home" component that runs it(since they are created in same folder).

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

import { InboxRoutingModule } from './inbox-routing.module';
import { InboxHomeComponent } from './inbox-home/inbox-home.component';
import { EmailCreateComponent } from './email-create/email-create.component';
import { EmailReplyComponent } from './email-reply/email-reply.component';
import { EmailIndexComponent } from './email-index/email-index.component';
import { EmailShowComponent } from './email-show/email-show.component';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { NotFoundComponent } from './not-found/not-found.component';



@NgModule({
  declarations: [ 
    EmailCreateComponent, 
    EmailReplyComponent, 
    EmailIndexComponent, 
    EmailShowComponent,
    InboxHomeComponent, 
    PlaceholderComponent, 
    NotFoundComponent,
  ],
  imports: [
    CommonModule,
    InboxRoutingModule
  ]
})
export class InboxModule { }

Where should I look to fix these issue with "router-outlet" and "app-email-index"? I do not remember if it is allowed to have github link in question post, if it is allowed I would add it. Thank you.

Answer 1

The problem is between AppModule and InboxModule. When you implement a child module you have to define his existence in parent module, which in our case is AppModule.So you have to import InboxModule to your AppModule like this:

app.module.ts

import { InboxModule } from './inbox/inbox.module'; <--
...
  imports: [
    BrowserModule,
    AppRoutingModule,
    AuthModule,
    HttpClientModule,
    InboxModule <--
  ],

Also every module has his privacy. So, if a module, in our case InboxModule wants to share a component, it has to export it first. So in InboxModule you have to export the app-email-index which in our case is EmailIndexComponent by adding the code below:

inbox.module.ts

exports: [ EmailIndexComponent ]

After these two additions your problem will be solved!