javascript - 尽管导出，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。所有 future 的组件都将放置在那里(或在它们自己的适当模块中)。我想用这样的一个替换三个导入。

// 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 类的装饰器中。

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 的更多信息.