Angular5 Use Component from Module

Question

I am a noob with A5, doing my first 'component refactoring into modules.' I'm trying to use a component that is defined in one module from another module. I get the error, ERROR in src/app/app-routing.module.ts(9,10): error TS2305: Module '"xxx/src/app/admin/admin.module"' has no exported member 'AdminHomeComponent'.

I've looked at the other related questions, and I'm just plain missing something. Hope you can help.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ArchitectureComponent } from './architecture/architecture.component';
import { DesignComponent } from './design/design.component';
import { HistoryComponent } from './history/history.component';
import { AdminHomeComponent } from './admin/admin.module';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'architecture', component: ArchitectureComponent },
  { path: 'design', component: DesignComponent },
  { path: 'history', component: HistoryComponent }
];

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

export class AppRoutingModule { }

src/app/admin/admin.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [
    AdminHomeComponent  // <-- Tried adding this based on comments, no help
  ]
})
export class AdminModule { }

src/app/admin/admin-home/admin-home.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

And in case it helps,

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { TreeModule } from 'angular-tree-component';

import { AppComponent } from './app.component';
...
import { HomeComponent } from './home/home.component';
import { ComponentsModule } from './components/components.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent,
    ...
    HomeComponent,
    AdminModule   // <-- Tried adding this based on comments, but no help
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    TreeModule,
    AppRoutingModule,
    AdminModule,
    ComponentsModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Maybe the answer is simple: just import the component directly from the module?

But shouldn't I be able to use a component that is exported from a module, just by importing that component from the module?

Thx for any advice!

Fateh Mohamed · Accepted Answer · 2018-04-21 18:26:41Z

1

if you import it from a module file you have to export it that way inside your admin.module.ts

  import { AdminHomeComponent } from './admin-home/admin-home.component';
  export {AdminHomeComponent };

answered Apr 21, 2018 at 18:26

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

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

6 Comments

Beel Over a year ago

Thanks, Fateh! This did the trick. But it confuses me. Can you provide a pointer to doc about export? I have not seen that in any examples. THANK YOU!

Fateh Mohamed Over a year ago

inside your admin.module you don't have any exported class with the name AdminHomeComponent , so you have to export it that way then you can import it and use it as a component, but the best way is that you import the shared component from it's ts file "admin-home.component.ts"

Fateh Mohamed Over a year ago

but i suggest that you create a sharedModule and put everything shared like (components, services, pipes, directives ...) and you import it in another module when you need it, check this angular-2-training-book.rangle.io/handout/modules/…

Beel Over a year ago

Thanks, Fateh! I appreciate the examples, but again, they do not include a child component of a module where the module exports the child component. So they do NOT export { XxxComponent }; This was my issue as you pointed out ... how should one use a Component from a shared module? And how should that module export the Component?

Fateh Mohamed Over a year ago

this works only if you import the component from the module file but for sure the best is to import it from it's file :)

|

Lazar Ljubenović · Accepted Answer · 2018-04-21 16:21:26Z

0

You're importing from the wrong file.

import { AdminHomeComponent } from './admin/admin.module';

Replace module with component in the filename.

answered Apr 21, 2018 at 16:21

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

3 Comments

Beel Over a year ago

Thx, Lazar, but there is no admin.component. This is a module.

Lazar Ljubenović Over a year ago

This is EXACTLY the problem you had, but OK.

Beel Over a year ago

Thx, Lazar, but ... I did not (and still do not) understand how to translate what you said into a solution to my question. @Fateh's answer said I should add an export {}. This solved my issue. But I'm still not sure it is the best way to do this. Can you elaborate?

John Velasquez · Accepted Answer · 2018-04-21 18:24:44Z

Well you forgot to declare it in the module

Try this

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [AdminHomeComponent]
})
export class AdminModule { }

And also i found out that in app-routing.module.ts: you have import { AdminHomeComponent } from './admin/admin.module'; remove it.

instead in the src/app/admin/admin.module do it like this

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot([
    { path: 'admin', component: AdminHomeComponent } 
  ])
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [AdminHomeComponent]
})
export class AdminModule { }

Thanks, Amaya, but that did not help. Shouldn't it be sufficient to declare it as an export?
Thx, Amaya, ... does this component as described need to be declared? It does not seem to matter from what I have tried so far.

Collectives™ on Stack Overflow

Angular5 Use Component from Module

3 Answers 3

6 Comments

3 Comments

13 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

13 Comments

Related