合并声明“DepartmentListComponent”中的单个声明必须全部导出或全部为 local.ts(2395) 路由组件

Posted 2023-02-22

【中文标题】合并声明“DepartmentListComponent”中的单个声明必须全部导出或全部为 local.ts(2395) 路由组件

【英文标题】：Individual declarations in merged declaration 'DepartmentListComponent' must be all exported or all local.ts(2395) Routing components

【发布时间】：2020-02-28 09:51:34

【问题描述】：

我对这段代码有疑问，我完全按照视频教程（我正在学习）进行操作，但它不起作用并需要一些声明。指南中编写的代码有可能采用一些较旧的方法吗？没有服务的硬代码。

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>

我需要查看正在运行的应用程序，其 url 形式为 http://localhost:4200/employees 和 http://localhost:4200/departments。 我是初学者，所以请谅解。

【问题讨论】：

你遇到了什么错误

Cannot GET / - 在浏览器中导入声明与“DepartmentListComponent”的本​​地声明冲突。合并声明“DepartmentListComponent”中的各个声明必须全部导出或全部本地。合并声明“EmployeeListComponent”中的各个声明必须全部导出或全部本地。导入声明与“EmployeeListComponent”的本​​地声明冲突。在声明之前使用的块范围变量“DepartmentListComponent”。在声明之前使用的块范围变量“EmployeeListComponent”。 '，' 预期的。 - 这很奇怪；p

合并声明“DepartmentListComponent”中的单个声明必须全部导出或全部本地。合并声明“EmployeeListComponent”中的单个声明必须全部导出或全部本地。

看起来app-routing.module.ts 中的最后一行导致了错误。尝试从app-routing.module.ts 文件中删除routingComponents 导出并在app.module.ts 中显式导入它们

有没有办法从它们数组中导入一个包中的所有组件？

【参考方案1】：

同样的问题，更奇怪的解决方案： 删除导出行（最后一行）。 编译（通常没有错误） 再次添加最后一行。 编译... 完毕。 不要问我为什么。我也是学习打字稿和 Angular 的初学者；-)

【讨论】：

请使可以被视为解决所描述问题的部分更加明显。我相信有一个，但在目前的措辞中，这可能会被误认为是“我也是”。

@Yunnosch 我不认为“将其关闭再打开”无论如何都是一个答案。 VTD。

这不是“好不好回答”的问题。这是关于不因甚至不尝试回答而被标记。 @miken32 我接受这是一个诚实的回答尝试。

@miken32 我在这里做同样的步骤，在Webstorm IDE上搜索同样的错误并且工作正常，绝对是一个正确的答案。

【参考方案2】：

您在此文件中导出DepartmentListComponent，该文件在本地导入到同一文件模块中。

【参考方案3】：

我在使用 Webstorm 时遇到了同样的问题，重新启动 + 缓存清理为我解决了这个问题。

【参考方案4】：

在 intellij IDE 上，我发现删除导出并再次添加它（在实例之前，而不是在类之前）有效。

我有

// 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

【参考方案5】：

我在新创建和导出的界面上遇到了同样的错误。在接口名称中添加“接口”后缀为我解决了这个问题。

变化：

export interface SomeThing 

收件人：

export interface SomeThingInterface 

【参考方案6】：

您不能将import 重新导出为const。所以

export const routingComponents  [DepartmentListComponent, EmployeeListComponent ]

应该是

export const routingComponents = [DepartmentListComponent, EmployeeListComponent]

或

export  DepartmentListComponent, EmployeeListComponent 

【参考方案7】：

当我们import和export在同一个文件中的同一个模块时，会抛出这个错误。

检查所有导入并确保它们不是从同一个文件中导出的。

【参考方案8】：

当我不小心从同一个文件中导出同一个界面两次时，我收到了这个错误消息。