Question

Angular 6.0.9
Angular-Cli 6.1.2

拾取Angular并开始我的第一个项目。我有一个嵌套模块 dashboard-newsfeed.module.ts ，我想我正在将其导出回父模块 dashboard-module.ts 中，该模块最终通过了回到主要的 app.module.ts 。

以下组件html中出现错误。

dashboard-newsfeed.component.html

<div class="component-wrapper">    
    <div class="content">
        <app-dashboard-newsfeed-content></app-dashboard-newsfeed-content>
    </div>
    <div class="sidebar">
        <app-dashboard-newsfeed-sidebar></app-dashboard-newsfeed-sidebar>
    </div>
</div>

无论出于何种原因，这都会在javascript中返回错误，提示它无法识别选择器或。

这只是在我将 DashboardNewsfeedSidebarModule 包括在以下模块导入和导出中之后才开始发生。我包括此模块是为了纠正先前的错误，其中嵌套在 dashboard-newsfeed 中的模块无法识别路由器的出口。

有人可以解释为什么它无法识别 dashboard-newsfeed.component.html 中的选择器吗？我将如何纠正它？

我已包括其他文件，以防它们与解决问题有关。任何帮助将不胜感激！

dashboard-newsfeed.module.ts

1   import { NgModule } from '@angular/core';
  1 import { CommonModule } from '@angular/common';
  2 import { DashboardNewsfeedContentComponent } from './dashboard-newsfeed-content/dashboard-newsfeed-content.component';
  3 import { DashboardNewsfeedSidebarComponent } from './dashboard-newsfeed-sidebar/dashboard-newsfeed-sidebar.component';
  4 
  5 import { DashboardNewsfeedSidebarModule } from './dashboard-newsfeed-sidebar/dashboard-newsfeed-sidebar.module';
  6 @NgModule({                
  7   imports: [               
  8       CommonModule,
          DashboardNewsfeedSidebarModule
  9   ],
      exports: [
           DashboardNewsfeedSidebarModule
      ],
 10     declarations: [
 11         DashboardNewsfeedContentComponent, 
 12         DashboardNewsfeedSidebarComponent
 13     ]
 14 })
 15 export class DashboardNewsfeedModule { }

dashboard-routing.module.ts

1   import { NgModule } from '@angular/core';
  1 import { RouterModule, Routes} from '@angular/router'; 
  2 import { DashboardComponent } from './/dashboard.component';
  3 import { ModuleWithProviders } from '@angular/core';
  4 
  5 import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
  6 import { DashboardStoreComponent } from './dashboard-store/dashboard-store.component';
  7 import { DashboardNewsfeedComponent } from './dashboard-newsfeed/dashboard-newsfeed.component';
  8 import { DashboardAppointmentsComponent } from './dashboard-appointments/dashboard-appointments.component';
  9 import { DashboardNetworkComponent } from './dashboard-network/dashboard-network.component';
 10 import { DashboardScheduleComponent } from './dashboard-schedule/dashboard-schedule.component';
 11 import { DashboardOptionsComponent } from './dashboard-options/dashboard-options.component';
 12 import { DashboardEmployeesComponent } from './dashboard-employees/dashboard-employees.component';
 13   
 14 export const DashboardRoutes: Routes=[ 
 15     {path: '', component: DashboardComponent,
 16         children: [
 17             {path: '', component: DashboardHomeComponent},
 18             {path: 'newsfeed', component: DashboardNewsfeedComponent},
 19             {path: 'schedule', component: DashboardScheduleComponent},
 20             {path: 'settings', component: DashboardOptionsComponent},
 21             {path: 'employees', component: DashboardEmployeesComponent},
 22             {path: 'store', component: DashboardStoreComponent},
 23             {path: 'network', component: DashboardNetworkComponent}
 24         ]
 25     }
 26 ];
 27 
 28 @NgModule({                
 29     imports: [RouterModule.forChild(DashboardRoutes)],
 30     exports: [RouterModule]
 31 })
 32   
 33 export class DashboardRoutingModule {}

dashboard.module.ts

1 import { NgModule } from '@angular/core';
  1 import { CommonModule } from '@angular/common';
  2 import { DashboardRoutingModule } from './/dashboard-routing.module';
  3 import { DashboardNewsfeedModule } from './dashboard-newsfeed/dashboard-newsfeed.module';                                                                                                     
  4 
  5 import { DashboardScheduleComponent } from './dashboard-schedule/dashboard-schedule.component';
  6 import { DashboardOptionsComponent } from './dashboard-options/dashboard-options.component';
  7 import { DashboardEmployeesComponent } from './dashboard-employees/dashboard-employees.component';
  8 import { DashboardStoreComponent } from './dashboard-store/dashboard-store.component';
  9 import { DashboardNewsfeedComponent } from './dashboard-newsfeed/dashboard-newsfeed.component';
 10 import { DashboardNetworkComponent } from './dashboard-network/dashboard-network.component';
 11 import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';                                                                                                           
 12 
 13 import { DashboardComponent } from './/dashboard.component';
 14 import { DashboardHomeContentComponent } from './dashboard-home/dashboard-home-content/dashboard-home-content.component';
 15 import { DashboardStoreContentComponent } from './dashboard-store/dashboard-store-content/dashboard-store-content.component';
 16 import { DashboardHomeSidebarComponent } from './dashboard-home/dashboard-home-sidebar/dashboard-home-sidebar.component';
 17 import { DashboardStoreSidebarComponent } from './dashboard-store/dashboard-store-sidebar/dashboard-store-sidebar.component';                                                                 
 18   
 19   
 20 @NgModule({
 21   imports: [
 22       CommonModule,
 23       DashboardRoutingModule,
 24       DashboardNewsfeedModule,
 25   ],
 26   exports: [
 27       DashboardRoutingModule,
 28       DashboardNewsfeedModule,
 29   ],
 30     declarations: [        
 31         DashboardComponent,
 32 
 33         DashboardScheduleComponent,     
 34         DashboardOptionsComponent,      
 35         DashboardStoreComponent,        
 36         DashboardNewsfeedComponent,     
 37         DashboardNetworkComponent,      
 38         DashboardHomeComponent,
 39         DashboardEmployeesComponent,    
 40         DashboardHomeContentComponent,  
 41         DashboardHomeSidebarComponent,  
 42         DashboardStoreContentComponent, 
 43         DashboardStoreSidebarComponent,                                                                                                                                                       
 44     ],
 45     bootstrap:[DashboardComponent]
 46 })
 47 export class DashboardModule { }

app-routing.module.ts

1   import { NgModule, ModuleWithProviders } from '@angular/core';
  1 import { RouterModule, Routes} from '@angular/router'; 
  2 
  3 export const routes: Routes=[
  4     {path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule'}
  5 ];
  6 @NgModule({                
  7     imports: [RouterModule.forRoot(routes)], 
  8     exports: [RouterModule]
  9 })
 10 
 11 export class AppRoutingModule {}

app.module.ts

1   import { BrowserModule } from '@angular/platform-browser';
  1 import { NgModule } from '@angular/core';
  2 import { DashboardRoutingModule} from './dashboard/dashboard-routing.module';
  3 import { HomeComponent } from './sidebar/sidebar-dash/home/home.component';
  4 import { DashboardModule } from './dashboard/dashboard.module'; 
  5   
  6 import { AppComponent } from './app.component';
  7   
  8 import { AppRoutingModule } from './/app-routing.module'; 
  9 import { StoreComponent } from './store/store.component'; 
 10 import { ProfileComponent } from './profile/profile.component';
 11       
 12       
 13 @NgModule({
 14   declarations: [
 15     AppComponent,
 16     StoreComponent,
 17     ProfileComponent,
 18   ],
 19   imports: [
 20     BrowserModule,
 21     AppRoutingModule,
 22     DashboardModule,
 23   ],
 24   providers: [],
 25   bootstrap: [AppComponent]
 26 })  
 27 export class AppModule { }

Answer 1

您 should not 导出任何 Modules ，您应该只导出在其他组件之间共享的组件。

删除导出下的所有模块，并仅添加要与其他模块共享的必要组件。

Answer 2

在模块中进行以下更改，仅需要导出组件而不是模块

dashboard-newsfeed.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardNewsfeedContentComponent } from './dashboard-newsfeed-content/dashboard-newsfeed-content.component';
import { DashboardNewsfeedSidebarComponent } from './dashboard-newsfeed-sidebar/dashboard-newsfeed-sidebar.component';
  import { DashboardNewsfeedSidebarModule } from './dashboard-newsfeed-sidebar/dashboard-newsfeed-sidebar.module';

const COMPONENTS = [
    DashboardNewsfeedContentComponent, 
    DashboardNewsfeedSidebarComponent   
];

   @NgModule({                
     imports: [               
        CommonModule,
        DashboardNewsfeedSidebarModule
     ],
      declarations: [
         ...COMPONENTS
      ],
      exports: [
        ...COMPONENTS
      ]
  })
  export class DashboardNewsfeedModule { }

并从dashboard.module.ts

中删除以下代码

exports: [
        DashboardRoutingModule,
        DashboardNewsfeedModule,
    ],

为什么在Angular中无法识别这些嵌套模块的选择器

2 个答案: