javascript - 即使已導出，Angular 仍無法識別導入模組中的元件

我有一個用於路由的模組，因為它需要參考它將路由到的元件，所以我也必須匯入那些元件。

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 的成員等等。所以我在 AdminModule 類別的裝飾器中加入了 exports 部分，如下所示。

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 區段似乎都沒有暴露它們，我該怎麼做才能讓它們被識別呢？

答案＃1

你正在混合使用 Typescript 的 exports 和 Angular 的 exports。@NgModule 的 exports 陣列是用來描述模組的公共 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 { }

在官方文件中閱讀更多關於 Typescript 的 import、export 和 modules 的內容。