Angular 尽管已导出，但仍无法识别导入模块中的组件

Question

我有一个用于路由的模块，因为它需要引用它将路由到的组件，所以我也必须导入它们。

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { RegisterComponent } from "./admin/register/register.component";
import { LoginComponent } from "./admin/login/login.component";
import { ErrorComponent } from "./admin/error/error.component";

const routes: Routes = [
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent },
  { path: "**", component: ErrorComponent }
];

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

组件放在另一个模块中 - AdminModule。所有未来的组件都将放置在那里（或在它们自己的适当模块中）。我想用这样的一个替换三个导入。

// import { RegisterComponent } from "./admin/register/register.component";
// import { LoginComponent } from "./admin/login/login.component";
// import { ErrorComponent } from "./admin/error/error.component";
import { RegisterComponent, LoginComponent, ErrorComponent } from "./admin/admin.module";

这不起作用，消息说模块 Admin 没有名称为 RegisterComponent 等的导出成员。所以我添加了exports 部分到 AdminModule class 的装饰器，像这样。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

@NgModule({
  imports: [CommonModule],
  exports: [RegisterComponent, LoginComponent, ErrorComponent],
  declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }

遗憾的是，错误消息仍然存在，我不确定如何使组件被识别为 AdminModule 的输出者。为什么 exports 部分和 declaration 部分似乎都没有暴露它们，我该怎么做才能让它如此容易识别？

Answer 1

您正在混合使用 Typescript 导出和 Angular 导出。 @NgModule 的导出数组旨在描述模块的 public API。它不会影响 Typescript 解析文件导入的方式。

要使此行按预期工作：

import { 
  RegisterComponent, 
  LoginComponent, 
  ErrorComponent 
} from "./admin/admin.module";

您需要从文件本身导出组件。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";

export { RegisterComponent } from "./register/register.component";
export { LoginComponent } from "./login/login.component";
export { ErrorComponent } from "./error/error.component";

@NgModule({
  imports: [CommonModule],
  exports: [RegisterComponent, LoginComponent, ErrorComponent],
  declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }

在 official docs.

中阅读有关 Typescript import、export 和 modules 的更多信息

Angular 尽管已导出，但仍无法识别导入模块中的组件

Angular won't recognize components in an imported module despite export

javascript

module

typescript

angular-routing

angular