0

I have a module that I'm calling home.module which I have routed into my app.module in the root folder. As things keep growing the home.module 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.

So Far here's the layout of the modules.

the home.module

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

}

the keypoints.module

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

import { AssetsModule }     from './assets/point-assets.module';

@NgModule({
    imports:[
        BrowserModule,
        AssetsModule //<-- 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 {

}

the point-assets.module

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 {

}

Everything showed up perfectly when everything was housed in the home.module, but now that I created the kepoints.module and the point-assets.module 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.

So far I've played around with it linking the point-assets.module directly into the home.module 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 comOPment or modLUe somewhere and my eyes aren't catching it.

The components injected into the keypoints.module 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 *ngIf 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.

Optiq
  • 1,982
  • 1
  • 20
  • 49
  • 1
    I think you also need to `export` the components in the declaration of the modules. And if you only`KeyPointsModule` in the app you can also only use the components exported from there and not from components that are imported into `KeyPointsModule`. You either need to import `AssetsModule` also into app or rexport it from `KeyPointsModule` – Matthias247 Jan 05 '17 at 22:26
  • ok yeah this worked. I had to export each component in the `AssetsModule` then in the `KeyPointsModule` just import and export the entire `AssetsModule` passing it along to the `HomeModule` by simply importing the `KeyPointsModule`. THANKS!!! :) – Optiq Jan 06 '17 at 03:10
  • alright I just added the next module to the `KeypointsModule` and it doesn't recognize the new one. Back to square one lol. – Optiq Jan 06 '17 at 03:41

0 Answers0