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.

Solution 1

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

Solution 2

When we import and export same module in same file, this error is thrown.

Checkout the all imports and make sure that those are not exported from same file.

Solution 3

I got the same problem using Webstorm, a restart + cache clean solved the issue for me.

Solution 4

Same problem here with even stranger resolution: Remove the export line (last line). Compile (normally without errors) Add the last line again. Compile... Done. Don't ask me why. I am also a starter learning typescript and Angular along the way ;-)

Solution 5

I had this same error on a newly created and exported interface. Adding the 'Interface' suffix to the interface name solved it for me.

Change:

export interface SomeThing {}

To:

export interface SomeThingInterface {}

View more solutions

Comments

[Yunnosch]

Please make the part which can be considered a solution to the described problem more obvious. I believe there is one, but in the current phrasing this risks to be mistaken for a "Me too."

[miken32]

@Yunnosch I don't think "turning it off and on again" is much of an answer anyway. VTD.

[Yunnosch]

It is not a question of "good answer or not". It is about not being flagged for not even trying to answer. @miken32 And I accept this as an honest attempt to answer.

[Bruno Luiz K.]

@miken32 I Make the same steps here, searching for the same error on Webstorm IDE and works, definitely is a right answer.