CODEWITHSUNDEEP
angularangular4-routermodularization
Danubius
Danubius

Reputation: 69

Modularizing Angular 5 App

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.

Upvotes: 0

Views: 1044

Answers (2)

pedrocleto
pedrocleto

Reputation: 1

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

Upvotes: 0

Benedikt Schmidt
Benedikt Schmidt

Reputation: 2278

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

Upvotes: 2

Related Questions