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.

Cannot GET / - in browser Import declaration conflicts with local declaration of 'DepartmentListComponent'. Individual declarations in merged declaration 'DepartmentListComponent' must be all exported or all local. Individual declarations in merged declaration 'EmployeeListComponent' must be all exported or all local. Import declaration conflicts with local declaration of 'EmployeeListComponent'. Block-scoped variable 'DepartmentListComponent' used before its declaration. Block-scoped variable 'EmployeeListComponent' used before its declaration. ',' expected. - that is strange ;p — MrToxity, Nov 02 '19 at 11:50
Individual declarations in merged declaration 'DepartmentListComponent' must be all exported or all local. Individual declarations in merged declaration 'EmployeeListComponent' must be all exported or all local. — MrToxity, Nov 02 '19 at 11:54
Looks like the last line in your `app-routing.module.ts` is causing the error. Try to remove the `routingComponents` export from the `app-routing.module.ts` file and import them explicitly in the `app.module.ts` — Massimiliano Sartoretto, Nov 02 '19 at 12:17
There is no way to make from them array to import all of components in one package? — MrToxity, Nov 02 '19 at 12:34
you can use .concat on your declarations array. declarations: [ AppComponent ].concat(routingComponents), — Frank Adrian, Nov 02 '19 at 13:51
in app.module.ts? but he have 9 errors in app-routing.module.ts @up — MrToxity, Nov 03 '19 at 06:33
I believe issue here is with your const routingComponents in app-routing.module.ts because you are defining a const variable but not assigning value to it so try assigning value with = and it should resolve your issue — Nimmi, Jan 30 '20 at 18:47
Maybe you can try checking if there is any constructor(){} missing in the class — Trang Nguyen, Jan 22 '21 at 16:40

score 46 · Answer 1 · answered Jun 22 '20 at 18:25

46

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

answered Jun 22 '20 at 18:25

user6317928

495
4
4

score 26 · Answer 2 · answered Jan 01 '21 at 09:38

26

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.

answered Jan 01 '21 at 09:38

Yuvraj Patil

7,944
5
56
56

score 4 · Answer 3 · answered Jan 06 '20 at 17:19

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 ;-)

answered Jan 06 '20 at 17:19

Rik

51
2

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." – Yunnosch Jan 06 '20 at 17:21
@Yunnosch I don't think "turning it off and on again" is much of an answer anyway. VTD. – miken32 Jan 20 '20 at 17:28
1

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. – Yunnosch Jan 20 '20 at 17:30
2

@miken32 I Make the same steps here, searching for the same error on Webstorm IDE and works, definitely is a right answer. – Bruno Luiz K. Jun 19 '20 at 00:32

score 4 · Answer 4 · answered Nov 14 '20 at 15:18

4

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

answered Nov 14 '20 at 15:18

Francesco Borzi

56,083
47
179
252

score 2 · Answer 5 · answered Feb 01 '21 at 13:21

2

I had this error message when accidentally exporting the same interface twice from the same file.

answered Feb 01 '21 at 13:21

Mark Hagers

92
1
10

score 1 · Answer 6 · answered Dec 03 '20 at 11:18

1

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

answered Dec 03 '20 at 11:18

Martijn Dunnebier

39
4

score 1 · Answer 7 · answered Dec 29 '20 at 09:53

You can't re-export an import as a const. So

export const routingComponents  [DepartmentListComponent, EmployeeListComponent ]

should be

export const routingComponents = [DepartmentListComponent, EmployeeListComponent]

or

export { DepartmentListComponent, EmployeeListComponent }

score 0 · Answer 8 · answered Nov 24 '20 at 16:57

0

On intellij IDEs, I found that removing the export and adding it again (before the instance, not the class) worked.

I had

// x.ts
export class X {}

// y.ts
import {X} from "./x.ts"
export const instance = new X();  // the export to be removed in my case

answered Nov 24 '20 at 16:57

Ahmed I. Elsayed

2,013
2
17
30

score 0 · Answer 9 · answered Dec 19 '22 at 07:36

I was getting this error when I was trying export the module with same name as that of the const variable.

Ex:

export const DepartmentListComponent = [DepartmentListComponent]

When I gave different name, it started working fine, hope it helps someone.

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

9 Answers9