Question

Angular很新，所以这可能是一个设置问题。但是当我尝试将其导入另一个模块时，我有一个未定义的模块，我认为它与订单有关，因为当我切换它时，其他模块无法导入。

我的树看起来像这样

|-- src/
|   |-- app/
|   |   |-- components/
|   |   |   |-- login/
|   |   |   |   |-- login.compact.component.html
|   |   |   |   |-- login.component.html
|   |   |   |   |-- login.component.ts
|   |   |   |   |-- login.service.ts
|   |   |   |   |-- login.module.ts
|   |   |   |-- ...
|   |   |   |-- components.module.ts
|   |   |-- shared/
|   |   |   |-- header/
|   |   |   |-- footer/
|   |   |   |-- navigation/
|   |   |   |-- shared.module.ts
|   |   |-- app.component.html
|   |   |-- app.component.ts
|   |   |-- app.module.ts
|   |   |-- app.routes.ts

我试图在我的导航栏中添加一个紧凑版本的登录

navigation.component.html

<nav>
   ....
   <mylogin></mylogin>
</nav>

但是，当我将LoginModule添加到imports的{{1}}时，我得到了这个错误SharedModule

在Unexpected value 'undefined' imported by the module 'LoginModule'我有

app.module.ts

这是构建应用程序的不好方法吗？或者尝试将登录导入共享模块以在导航中使用是错误的？

Answer 1

首先，我不知道您如何将LoginModule导入SharedModule，因为您还没有提供SharedModule。

其次，如果您希望将一个模块导入另一个模块。您需要将exports: []添加到要导入其他模块的所有declarations。这是一个例子：

模块A

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CapitalizePipe,
    SentenceCasePipe,
    FirstNamePipe,
  ],
  exports: [
    CapitalizePipe,
    SentenceCasePipe,
    FirstNamePipe,
  ]
})
export class PipesModule {
}

导入模块A的模块B

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    PipesModule,
    NgbModule,
    RouterModule,
    AppRoutingModule
  ],
  declarations: [],
  providers: []
})
export class HomeModule {
}

如您所见，通过添加PipesModule中的所有declarations，模块A中的exports: []被导入模块B.这使他们能够按需加载到不同的模块。

FYI

向AppModule添加内容将导致在应用程序加载时将所有这些内容加载到浏览器DOM中。这意味着如果您添加仅在一个组件中使用的module;这可能会导致应用程序的加载时间延长到所有模块的需要。

所以我的建议是通过增量模块加载来尽可能多地嵌套样式，使您的应用加载更快更顺畅。一个例子是：

AppModule
AppComponent
   | PublicModule
   | PublicComponent
         | LoginModule
         | LoginComponnet
                | HomeModule
                | HomeComponent

导入的模块未定义Angular4

1 个答案: