导出模块中的ng-bootstrap

时间:2018-01-23 15:41:59

标签: javascript angular typescript ng-bootstrap

所以我有一个使用ng-bootstrap的导航栏模块:

$ (strace env - /bin/bash -c 'echo $PATH') 2>&1 | grep -E 'open|exec'
execve("/usr/bin/env", ["env", "-", "/bin/bash", "-c", "echo $PATH"], [/* 48 vars */]) = 0
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libc.so.6", O_RDONLY|O_CLOEXEC) = 3
open("/usr/lib/locale/locale-archive", O_RDONLY|O_CLOEXEC) = 3
execve("/bin/bash", ["/bin/bash", "-c", "echo $PATH"], [/* 0 vars */]) = 0
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libtinfo.so.5", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libdl.so.2", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libc.so.6", O_RDONLY|O_CLOEXEC) = 3
open("/dev/tty", O_RDWR|O_NONBLOCK)     = 3
open("/etc/nsswitch.conf", O_RDONLY|O_CLOEXEC) = 3
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libnss_compat.so.2", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libnsl.so.1", O_RDONLY|O_CLOEXEC) = 3
open("/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libnss_nis.so.2", O_RDONLY|O_CLOEXEC) = 3
open("/lib/x86_64-linux-gnu/libnss_files.so.2", O_RDONLY|O_CLOEXEC) = 3
open("/etc/passwd", O_RDONLY|O_CLOEXEC) = 3

它放在另一个目录(项目)中,因此结构为:

  • 主目录
    • App1(这里放置了导航栏模块)
    • App2(此处我想导入)

这是App2模块:

import {NgModule, NgZone} from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavigationComponent} from "./components/navigation/navigation.component";
import {NavMenuComponent} from "./components/nav-menu/nav-menu.component";
import {MainMenuComponent} from "./components/main-menu/main-menu.component";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  imports: [
    CommonModule,
    NgbModule
  ],
  declarations: [
    NavigationComponent,
    NavMenuComponent,
    MainMenuComponent
  ],
  exports: [
    NavigationComponent,
    NavMenuComponent,
    MainMenuComponent,
    CommonModule,
    NgbModule
  ],
  providers: [{ provide: NgZone, useFactory: () => new NgZone({}) }]
})
export class MainNavbarModule { }

import {BrowserModule} from '@angular/platform-browser'; import {NgModule, NgZone} from '@angular/core'; import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import {MainNavbarModule} from '@front-core/src/app/shared/main-navbar.module'; import {AppComponent} from './app.component'; import {AppRoutes} from './app.routes'; import {CommonModule} from '@angular/common'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, NgbModule.forRoot(), CommonModule, AppRoutes, MainNavbarModule ], bootstrap: [AppComponent] }) export class AppModule { } 是来自tsconfig.app.json的路径 这是:

@front-core

所以问题是当我将这个组件包含到App2的模板中时,会发生错误:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": ".",
    "module": "es2015",
    "types": [],
    "paths": {
      "@front-core/*": ["../../front-core/*"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

1 个答案:

答案 0 :(得分:0)

任何使用ngbmodule的子模块都应该包含它:

imports: [NgbModule]

你的MAIN app模块需要像这样声明:

imports: [NgbModule.forRoot()]

您不应将其作为导航栏模块中的导出。除了那个导出,看起来你根据我上面说的正确导入它。我会尝试删除该导出。