Question

我正在按角度开发应用程序，也许我对多个模块有问题。除了app.module，我还有其他3个模块。我称它们为：DashboardModule，InstitutionalModule和SharedModule。我在机构模块和仪表板模块中导入了共享模块。在SharedModule内部，我有一个TranslateModule，但是当我使用ng build --prod编译项目时，返回错误“找不到管道翻译。

我还有另一个问题，那就是有必要在app.module中导入共享模块吗？

以上模块代码： App.module.ts

//Angular Core
import { BrowserModule }                                   from '@angular/platform-browser';
import { BrowserAnimationsModule }                         from '@angular/platform-browser/animations';
import { NgModule }                                        from '@angular/core';
import { AppRoutingModule }                                from './app.route.module';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader }                from '@ngx-translate/core';
import { TranslateHttpLoader }                             from '@ngx-translate/http-loader';
import { CommonModule }                                    from '@angular/common';

//environment 
import { environment } from '../environments/environment';

//Guard 
import { AuthGuard } from './guard/auth-guard';

//Pages
import { AppComponent }                       from './app.component';

//Bootstrap components
import { TabsModule }         from 'ngx-bootstrap/tabs';
import { BsDropdownModule }   from 'ngx-bootstrap/dropdown';
import { ModalModule }        from 'ngx-bootstrap/modal';
import { TooltipModule }      from 'ngx-bootstrap/tooltip';
import { ProgressbarModule }  from 'ngx-bootstrap/progressbar';
import { AccordionModule }    from 'ngx-bootstrap/accordion';

//Alert Compomnent
import { ToastrModule }      from 'ngx-toastr';

//Websocket
import { StompConfig, StompService } from '@stomp/ng2-stompjs';

//Modules
import { NgxMaskModule }   from 'ngx-mask';

//Interceptor
import { HttpsRequestInterceptor } from './interceptor/interceptor.module';

//Modules
import { InstitutionalModule } from './modules/institutional/institutional.module';
import { DashboardModule } from './modules/dashboard/dashboard.module';

const stompConfig: StompConfig = {
  url: environment.webSocket,

  headers: {
    login: 'guest',
    passcode: 'guest'
  },

  heartbeat_in: 1000,
  heartbeat_out: 1000,

  reconnect_delay: 2000,

  debug: false
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    InstitutionalModule,
    DashboardModule,
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TabsModule.forRoot(),
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right',
      preventDuplicates: true,
    }),
    NgxMaskModule.forRoot(),
    ProgressbarModule.forRoot(),
    AccordionModule.forRoot(),
  ],
  providers: [AuthGuard,
              StompService,
              {
                provide: StompConfig,
                useValue: stompConfig
              },
              {
                provide: HTTP_INTERCEPTORS,
                useClass: HttpsRequestInterceptor,
                multi: true
              }
            ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

共享模块

import { NgModule }                          from '@angular/core';
import { CommonModule }                      from '@angular/common';
import { HttpClient }                        from '@angular/common/http';
import { FormsModule, ReactiveFormsModule }  from '@angular/forms';

//Translate
import { TranslateModule, TranslateLoader }  from '@ngx-translate/core';
import { TranslateHttpLoader }               from '@ngx-translate/http-loader';

//Directive
import { NumberOnlyDirective }     from './directives/number-only.directive';
import { MaskDirective }           from './directives/cpf.directive';
import { KzMaskCurrencyDirective } from './directives/currency.directive';
import { CriptocurrencyDirective } from './directives/criptocurrency.directive';

//Pipes
import { CurrencyValuePipe }  from './pipe/currency.pipe';
import { CpfPipe }            from './pipe/cpf.pipe';
import { CryptocurrencyPipe } from './pipe/cryptocurrency.pipe';

//Dependecies Modules
import { TabsModule }         from 'ngx-bootstrap/tabs';
import { BsDropdownModule }   from 'ngx-bootstrap/dropdown';
import { ModalModule }        from 'ngx-bootstrap/modal';
import { TooltipModule }      from 'ngx-bootstrap/tooltip';
import { ProgressbarModule }  from 'ngx-bootstrap/progressbar';
import { AccordionModule }    from 'ngx-bootstrap/accordion';
import { ClipboardModule }    from 'ngx-clipboard';
import { QRCodeModule }       from 'angularx-qrcode';
import { NgxMaskModule }      from 'ngx-mask';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule
  ],
  declarations: [
    NumberOnlyDirective,
    MaskDirective,
    KzMaskCurrencyDirective,
    CurrencyValuePipe,
    CpfPipe,
    CryptocurrencyPipe,
    CriptocurrencyDirective
  ],
  providers:[
    CurrencyValuePipe,
    CryptocurrencyPipe
  ],
  exports: [
    NumberOnlyDirective,
    MaskDirective,
    KzMaskCurrencyDirective,
    CurrencyValuePipe,
    CpfPipe,
    CryptocurrencyPipe,
    CriptocurrencyDirective,
    TranslateModule,
    FormsModule,
    ReactiveFormsModule,
    TabsModule,
    BsDropdownModule,
    ModalModule,
    TooltipModule,
    ProgressbarModule,
    AccordionModule,
    ClipboardModule,
    QRCodeModule,
    NgxMaskModule
  ]
})
export class SharedModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

仪表板模块

import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';

//Routes
import { dahsboardRoutingModule } from './dashboard.routing.module';

//Pages
import { AttendancePageComponent }            from './pages/attendance-page/attendance-page.component';
import { CareDetailPageComponent }            from './pages/care-detail/care-detail-page.component';
import { DepositPageComponent }               from './pages/deposit/deposit-page.component';
import { ExtractPageComponent }               from './pages/extract/extract-page.component';
import { HomePageComponent }                  from './pages/home/home-page.component';
import { NotificationPageComponent }          from './pages/notification-page/notification-page.component';
import { RegistryWithdrawUsersPageComponent } from './pages/registry-withdraw-users-page/registry-withdraw-users-page.component';
import { TradeAdvancedPageComponent }         from './pages/trade/trade-advanced/trade-advanced-page.component';
import { SendCriptoPageComponent }            from './pages/transfer/send/send-cripto-page.component';
import { ReceiveCriptoPageComponent }         from './pages/transfer/receive/receive-cripto-page.component';
import { ProfilePageComponent }               from './pages/user/profile/profile-page.component';
import { WalletPageComponent }                from './pages/wallet/wallet-page.component';
import { WithdrawPageComponent }              from './pages/withdraw/withdraw-page.component';

//Components
import { MarketsDoughnutComponent }           from './components/markets-doughnut/markets-doughnut.component';
import { EthereumChartComponent }             from './components/charts/home/ethereum-chart/ethereum-chart.component';
import { LitecoinChartComponent }             from './components/charts/home/litecoin-chart/litecoin-chart.component';
import { BitcoinChartComponent }              from './components/charts/home/bitcoin-chart/bitcoin-chart.component';
import { BitcoincashChartComponent }          from './components/charts/home/bitcoincash-chart/bitcoincash-chart.component';
import { DashChartComponent }                 from './components/charts/home/dash-chart/dash-chart.component';
import { SellBookComponent }                  from './components/offers-book/sell-book/sell-book.component';
import { BuyBookComponent }                   from './components/offers-book/buy-book/buy-book.component';
import { MenuBarComponent }                   from './components/menu-bar/menu-bar.component';
import { WalletVariationComponent }           from './components/wallet-variable/wallet-variation.component';
import { MywalletHomeComponent }              from './components/mywallet-home/mywallet-home.component';
import { BuyTradeComponent }                  from './components/forms/advanced/buy-trade/buy-trade.component';
import { SellTradeComponent }                 from './components/forms/advanced/sell-trade/sell-trade.component';
import { OrdensAbertasComponent }             from './components/ordens/ordens-abertas/ordens-abertas.component';
import { OrdensExcutadasComponent }           from './components/ordens/ordens-excutadas/ordens-excutadas.component';
import { OrdensHistoricoComponent }           from './components/ordens/ordens-historico/ordens-historico.component';
import { BoletaTradeSimpleComponent }         from './components/forms/home/boleta-trade-sample/boleta-trade-simple.component';
import { ExtratoSaqueComponent }              from './components/extrato/extrato-saque/extrato-saque.component';
import { ExtratoDepositoComponent }           from './components/extrato/extrato-deposito/extrato-deposito.component';
import { ExtratoCriptomoedasComponent }       from './components/extrato/extrato-criptomoedas/extrato-criptomoedas.component';
import { PriceVolumeComponent }               from './components/price-volume/price-volume.component';
import { NotificationComponent }              from './components/notification/notification.component';
import { PriceChartComponent }                from './components/price-chart/price-chart.component';
import { SendDocumentModalComponent }         from '../../shared/components/send-document-modal/send-document-modal.component';
@NgModule({
  imports: [
    CommonModule,
    dahsboardRoutingModule,
    SharedModule
  ],
  declarations: [
    AttendancePageComponent,
    CareDetailPageComponent,
    DepositPageComponent,
    ExtractPageComponent,
    HomePageComponent,
    NotificationPageComponent,
    RegistryWithdrawUsersPageComponent,
    TradeAdvancedPageComponent,
    SendCriptoPageComponent,
    ReceiveCriptoPageComponent,
    ProfilePageComponent,
    WalletPageComponent,
    WithdrawPageComponent,
    MarketsDoughnutComponent,
    EthereumChartComponent,
    LitecoinChartComponent,
    BitcoinChartComponent,
    BitcoincashChartComponent,
    DashChartComponent,
    SellBookComponent,
    BuyBookComponent,
    MenuBarComponent,
    WalletVariationComponent,
    MywalletHomeComponent,
    BuyTradeComponent,
    SellTradeComponent,
    OrdensAbertasComponent,
    OrdensExcutadasComponent,
    OrdensHistoricoComponent,
    BoletaTradeSimpleComponent,
    ExtratoSaqueComponent,
    ExtratoDepositoComponent,
    ExtratoCriptomoedasComponent,
    PriceVolumeComponent,
    NotificationComponent,
    PriceChartComponent,
    SendDocumentModalComponent
  ]
})
export class DashboardModule { }

机构模块

import { NgModule }     from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../shared/shared.module';

//Routes
import { institutionalRoutingModule } from './institutional.routing.module';

//Pages
import { InstitucionalPageComponent } from './pages/institucional-page/institucional-page.component';
import { AboutCoinsPageComponent }    from './pages/about-coins-page/about-coins-page.component';

//Components
import { CoinsListComponent }    from './components/coins-list/coins-list.component';
import { LoginComponent }        from './components/login/login.component';
import { HeaderComponent }       from './components/header/header.component';
import { FooterComponent }       from './components/footer/footer.component';
import { RegistroPageComponent } from './pages/registro-page/registro-page.component';



@NgModule({
  imports: [
    CommonModule,
    institutionalRoutingModule,
    SharedModule
  ],
  declarations: [
    InstitucionalPageComponent,
    AboutCoinsPageComponent,
    RegistroPageComponent,
    CoinsListComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent
  ]
})
export class InstitutionalModule { }

关于角度模块

0 个答案: