CODEWITHSUNDEEP
angulartypescript
Beel
Beel

Reputation: 1030

Angular5 Use Component from Module

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!

Upvotes: 0

Views: 570

Answers (3)

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

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 };

Upvotes: 1

John Velasquez
John Velasquez

Reputation: 3451

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 { }

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

You're importing from the wrong file.

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

Replace module with component in the filename.

Upvotes: 0

Related Questions