Почему селекторы этих вложенных модулей не распознаются в Angular - PullRequest
Новая
       5

Почему селекторы этих вложенных модулей не распознаются в Angular

0 голосов
/ 25 августа 2018

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

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Внесите следующие изменения в свои модули, экспортировать должен только компонент, а не модуль

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,
    ],
0 голосов
/ 25 августа 2018

Вы should not экспортируете любые Modules, вы должны экспортировать только те компоненты, которые совместно используются другими компонентами.

Удалите все экспортируемые модули и добавьте только те компоненты, которые вы хотите использовать в другом модуле.

...