Modularizing Angular 5 App

Question

I’m trying to split an Angular 5 app into modules. The working code is this (the relevant code):

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FooterComponent } from './path/to/component';

@NgModule({
  declarations: [AppComponent, FooterComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<app-footer></app-footer>

Now I want to use the footer to change it into a module (just the changes):

app.module.ts:

import { FooterModule } from './path/to/module';

@NgModule({
  declarations: [AppComponent, FooterModule],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

footer.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ]
})

export class FooterModule { }

This code doesn't work and I don't know what is wrong. Can you help me with a hint ? Thanks in advance.

When you say that the code doesn't work, what does that mean? Are you getting any errors in the console? — R. Richards, Nov 28 '17 at 23:06

score 2 · Answer 1 · answered Nov 28 '17 at 23:21

One problem might be that you are trying to use the footer component in your app component that is not in the same module anymore. As soon as you outsource stuff into sub-modules, the components declared there are also only accessible in this module scope. If you want to use a component outside of it, you have to export it.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ],
  exports: [FooterComponent]
})

export class FooterModule { }

Yes, this is the answer! Thank you very much! – Danubius Nov 29 '17 at 06:30 — Danubius, Nov 29 '17 at 06:30

score 0 · Answer 2 · answered Dec 04 '17 at 16:54

You should import your module on the app.ts not declare it

app.module.ts:

import { FooterModule } from './path/to/module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,FooterModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

And export FooterComponent on the footer.module footer.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ],
  exports: [FooterComponent]
})

export class FooterModule { }

Hope it helps

Modularizing Angular 5 App

2 Answers2