2

I have my root module which looks like this:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { routing, appRoutingProviders } from './app.routing';

import { LoginModule } from './login/login.module';
import { UserModule } from './user/user.module';
import { NavbarModule } from './navbar/navbar.module';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, routing, NavbarModule ],
  declarations: [ AppComponent ],
  providers:    [ appRoutingProviders ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

I am writing a navbar with various components that handle various parts of the navbar (Im just trying to be really granular, sort of like spotify's approach).

So in the end I will have lots of components that all add up to once navbar, so that felt like a pretty natural use of a module? So I created a navbar module:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NavbarComponent }  from './navbar.component';

@NgModule({
  imports:      [ ],
  declarations: [ NavbarComponent ],
  providers:    [  ],
  bootstrap:    [ NavbarComponent ]
})

export class NavbarModule { }

for the sake of the example ill stick to one navbar component which looks like this

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

@Component({
  selector: 'navbar',
  templateUrl: './navbar.template.html'
})

export class NavbarComponent { }

the html template just contains standard bootstrap navbar code...

So as you can see I have imported the NavbarModule into the AppModule, which from my understanding of how modules work, should make the NavbarComponent available to all the components I define in the AppModule?

So when I use in my html template for AppComponent it should render out the NavbarComponent stuff? Instead it just keeps an empty navbar tag?

Any ideas? Also if my understanding of how modules and their imports works is totally off, please could you link some material that could clarify this for me? I have read the angular docs and this is where I got my current understanding from.

Thanks

1 Answer 1

2

I found my problem. In the metadata of my navbar module, I was not exporting the navbar component, therefore it was not available to modules that imported it! Solution below

navbar.module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { NavbarComponent }  from './navbar.component';

@NgModule({
  imports:      [ ],
  declarations: [ NavbarComponent ],
  providers:    [  ],
  exports:      [ NavbarComponent ],
  bootstrap:    [ NavbarComponent ]
})

export class NavbarModule { }
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.