Угловой 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 { }
Вы 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,
],