Individual declarations in merged declaration 'DepartmentListComponent' must be all exported or all local.ts(2395) Routing components

Question

I have a problem with this code, I do it exactly like the video tutorial (I'm learning), but it doesn't work and calls for some declarations. It is possible that the code written in the guide is in some older methodology? Its hard code without service.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DepartmentListComponent } from './department-list/department-list.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';


const routes: Routes = [
  { path: 'departments', component: DepartmentListComponent },
  { path: 'employees', component: EmployeeListComponent }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents  [DepartmentListComponent, EmployeeListComponent ]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h1> Welocme in routing</h1>

<router-outlet></router-outlet>

I need to see running application with changing urls form http://localhost:4200/employees and http://localhost:4200/departments. I am begginer so please be understanding.

Answer 1

You are exporting DepartmentListComponent in this file which is imported in the same file module locally.