title: Angular 2: Where is the break in chain of modules?
body: <p>I have a module that I'm calling <code>home.module</code> which I have routed into my <code>app.module</code> in the root folder.  As things keep growing the <code>home.module</code> is becoming more massive.  Naturally I went to create more modules to branch into it but for some reason the components aren't being defined.</p>
  
  <p>So Far here's the layout of the modules.</p>
  
  <p>the <code>home.module</code></p>
  
  <pre><code>import { NgModule }                     from '@angular/core';
  import { BrowserModule }                from '@angular/platform-browser';
  
  import { HomeRoutingModule }            from './home-routing.module';
  
  import { HomeComponent }                from './home.component';
  import { HomeIntroComponent }           from './intro/home-intro.component';
  import { ExpandBusinessComponent }      from './expand/exp-business.component';
  import { RecreateBusinessComponent }    from './recreate/rec-business.component';
  import { NewBusinessComponent }         from './newbus/new-business.component';
  import { NewProductComponent }          from './newprod/new-product.component';
  import { TechDifficultyComponent }      from './techdif/tech-difficulty.component';
  
  
  import { KeyPointsModule }              from './keypoints/keypoints.module';
  
  
  
  import { PointFormatsComponent }        from './keypoints/formats/point-formats.component';
  import { FormatsExpandComponent }       from './keypoints/formats/exp/formats-exp.component';
  import { FormatsNewBusComponent }       from './keypoints/formats/new/formats-newb.component';
  import { FormatsRebrandComponent }      from './keypoints/formats/rebr/formats-rebr.component';
  
  import { PointNicheComponent }          from './keypoints/niches/point-niche.component';
  import { PointSimplifyComponent }       from './keypoints/simplifying/point-simplify.component';
  import { PointSizeComponent }           from './keypoints/sizing/point-sizing.component';
  
  import { PointFreshStartComponent }     from './keypoints/freshstart/point-fresh-start.component';
  import { FreshStartNewBusComponent }    from './keypoints/freshstart/new/fresh-newb.component';
  import { FreshStartRebrandComponent }   from './keypoints/freshstart/rebr/fresh-rebr.component';
  
  import { PointInhouseComponent }        from './keypoints/inhouse/point-inhouse.component';
  import { PointRemixComponent }          from './keypoints/remix/point-remix.component';
  import { PointUiUxComponent }           from './keypoints/uiux/point-uiux.component';
  
  @NgModule({
      imports:[
          BrowserModule,
          HomeRoutingModule,
          KeyPointsModule //&lt;-- this is what I'm injecting to inject everything from
                          //    PointFormatsComponent on down.
      ],
      declarations:[
  
          //This will stay here as is.
          HomeComponent,
              HomeIntroComponent, ExpandBusinessComponent, RecreateBusinessComponent,
              NewBusinessComponent, NewProductComponent, TechDifficultyComponent,
  
          //These are what I'm converting into modules to inject
          //into the KeyPointsModule.
          PointFormatsComponent,
              FormatsExpandComponent, FormatsNewBusComponent, FormatsRebrandComponent,
  
          PointFreshStartComponent,
              FreshStartRebrandComponent, FreshStartNewBusComponent,
  
          //These are the groups left to expand upon in the same way
          //as the PointFormats and PointFreshStart components.
          PointNicheComponent,
          PointSimplifyComponent,
          PointSizeComponent,
          PointInhouseComponent,
          PointRemixComponent,
          PointUiUxComponent
      ],
  
      bootstrap: [ HomeComponent ]
  
  })
  
  export class HomeModule {
  
  }
  </code></pre>
  
  <p>the <code>keypoints.module</code></p>
  
  <pre><code>import { NgModule }         from '@angular/core';
  import { BrowserModule }    from '@angular/platform-browser';
  
  import { AssetsModule }     from './assets/point-assets.module';
  
  @NgModule({
      imports:[
          BrowserModule,
          AssetsModule //&lt;-- Module for one of the groups of components
                       //I already eliminated from the home.module
      ]
      //This module is more about being a "wire" for things to pass through
      //rather than something with functionality so I didn't set any
      //declarations or bootstrap components.
  })
  
  export class KeyPointsModule {
  
  }
  </code></pre>
  
  <p>the <code>point-assets.module</code></p>
  
  <pre><code>import { NgModule }                     from '@angular/core';
  import { BrowserModule }                from '@angular/platform-browser';
  
  import { PointAssetsComponent }         from './point-assets.component';
  
  import { AssetExpandComponent }         from './exp/asset-exp.component';
  import { AssetNewBusComponent }         from './new/asset-newb.component';
  import { AssetRebrandComponent }        from './rebr/asset-rebr.component';
  
  @NgModule({
      imports:[ BrowserModule ],
      declarations: [
  
          //These are the components I eliminated from the home.module
          PointAssetsComponent,
          AssetExpandComponent,
          AssetNewBusComponent,
          AssetRebrandComponent
      ],
      bootstrap: [ PointAssetsComponent ]
  })
  
  export class AssetsModule {
  
  }
  </code></pre>
  
  <p>Everything showed up perfectly when everything was housed in the <code>home.module</code>, but now that I created the <code>kepoints.module</code> and the <code>point-assets.module</code> all of a sudden the browser isn't recognizing the selectors on the components, which means it's not being defined in the chain properly.</p>
  
  <p>So far I've played around with it linking the <code>point-assets.module</code> directly into the <code>home.module</code> to see if there was something wrong with it and sure enough I'm getting an error with it recognizing the selectors imported with the module.  I've been double checking back and forth to see if I accidentally imported a <code>comOPment</code> or <code>modLUe</code> somewhere and my eyes aren't catching it.</p>
  
  <p>The components injected into the <code>keypoints.module</code> aren't anything that will be routed to in the browser so I didn't need to create or import any routes.  They just toggle on and off with <code>*ngIf</code> inside of the component views depending on the route they're being viewed in.  Seeing that everything worked perfectly fine before this point and I recognize the error as a modular problem which I've fixed before I didn't see it necessary to add all the other files and post the entire error message, but if they're needed let me know and I'll update the post with that info.</p>