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

Угловой 6.0.9
Угловой-Cli 6.1.2

Взял Angular и начал свой первый проект. У меня есть вложенный модуль приборная панель-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, говоря, что он не распознает селекторы <app-dashboard-newsfeed-content> или <app-dashboard-newsfeed-sidebar>.

Это началось только после того, как я включил Панель управленияНовостиСайдбарМодуль в следующие модули импорта и экспорта. Я включил этот модуль, чтобы исправить более раннюю ошибку, когда выход маршрутизатора не распознавался модулем, вложенным в дашборд-новостная лента.

Может кто-нибудь объяснить, почему он не распознает селекторы в dashboard-newsfeed.component.html? Как мне это исправить?

Я включил другие файлы на случай, если они могут иметь отношение к решению проблемы. Любая помощь будет оценена по достоинству!

приборная панель-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 { }

приборная панель-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 { } 
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
83
2

Ответы 2

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

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

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

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,
    ],

Другие вопросы по теме