Angular 2:模块链的中断在哪里?

时间:2017-01-05 22:12:06

标签: angular typescript angular2-modules

我有一个我正在调用home.module的模块,我已将其路由到根文件夹中的app.module。随着事情不断发展,home.module变得越来越大。当然,我去创建了更多模块来分支,但由于某种原因,组件没有被定义。

这里是模块的布局。

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 {

}

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 {

}

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 {

}

当所有内容都放在home.module中时,所有内容都显示完美,但现在我创建了kepoints.modulepoint-assets.module突然之间浏览器无法识别选择器组件,这意味着它没有在链中正确定义。

到目前为止,我已经玩过它将point-assets.module直接链接到home.module以查看它是否有问题,并且确定我收到错误时会识别选择器随模块导入。我一直在来回检查,看看我是不是意外地在某处导入comOPmentmodLUe而我的眼睛没有抓住它。

注入keypoints.module的组件不是将在浏览器中路由到的任何组件,因此我不需要创建或导入任何路由。他们只是在组件视图中使用*ngIf打开和关闭,具体取决于他们正在查看的路径。在此之前看到一切都完好无损,我认为错误是一个模块化问题我已经修复之前我没有看到有必要添加所有其他文件并发布整个错误消息,但如果需要它们让我知道,我将用该信息更新帖子。

0 个答案:

没有答案