CODEWITHSUNDEEP
javascriptangulartypescriptmoduleangular-routing
DonkeyBanana
DonkeyBanana

Reputation: 3556

Angular won't recognize components in an imported module despite export

I have a module for routing and, since it needs to reference the components it will route to, I have to import those as well.

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

import { RegisterComponent } from "./admin/register/register.component";
import { LoginComponent } from "./admin/login/login.component";
import { ErrorComponent } from "./admin/error/error.component";

const routes: Routes = [
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent },
  { path: "**", component: ErrorComponent }
];

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

The components are placed in another module - AdminModule. All future components will be placed there (or in an appropriate module of their own). I wanted to replace the three imports with a single one like this.

// import { RegisterComponent } from "./admin/register/register.component";
// import { LoginComponent } from "./admin/login/login.component";
// import { ErrorComponent } from "./admin/error/error.component";
import { RegisterComponent, LoginComponent, ErrorComponent } from "./admin/admin.module";

This doesn't work and the message says that the module Admin has no exported member with name RegisterComponent etc. So I added exports section to the decorator of the AdminModule class like this.

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

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

Regrettably, the error message remains and I'm not sure how to make the components to be recognized as exportees of AdminModule. How come that neither exports section nor declaration section seems to expose them and what can I do to make it so recognizable?

Upvotes: 2

Views: 3105

Answers (1)

Tomasz Kula
Tomasz Kula

Reputation: 16847

You are mixing Typescript exports with Angular exports. @NgModule's exports array is designed to describe the module's public API. It does not affect how Typescript will resolve your file imports.

For this line to work like expected:

import { 
  RegisterComponent, 
  LoginComponent, 
  ErrorComponent 
} from "./admin/admin.module";

You need to export the components from the file itself. 

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

export { RegisterComponent } from "./register/register.component";
export { LoginComponent } from "./login/login.component";
export { ErrorComponent } from "./error/error.component";

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

Read more about Typescript's import, export and modules in the official docs.

Upvotes: 1

Related Questions