Eu estou tendo um problema para usar componentes entre os módulos principal e o de login.
Eu tenho um componente 'Loading' que está declarado no módulo principal e quero usa-lo em meu componente 'TelaLogin' declarado no módulo de login. Porém quando eu tento fazer isso dá erro e diz que o componente Loading não está declarado no módulo. Por que isso ocorre se quando eu faço o contrário, ou seja, quando uso um componente de um módulo comum em um componente do módulo principal isso não ocorre?
Olá, Felipe.
Você pode adicionar o seu código do módulo principal, do componente loading e tela login pra tentar entender um pouco melhor o que está acontecendo e conseguir te ajudar?
---Módulo Principal:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Pipe, PipeTransform } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule, JsonpModule } from '@angular/http'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { BnLoadingComponent } from './componentes/bndes-ux4/bn-loading/bn-loading.component';
import { BnLoginModule } from './componentes/bndes-ux4/bn-login/bn-login.module'; import { BnMenuPrincipalModule } from './componentes/bndes-ux4/bn-menu-principal/bn-menu-principal.module' import { BnTelaLoginComponent } from './componentes/bndes-ux4/bn-login/tela-login/bn-tela-login.component'
import { AuthenticationGuard } from './componentes/bndes-ux4/bn-seguranca/authentication.guard';
@NgModule({ declarations: [ AppComponent, BnLoadingComponent, ], imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // <-- debugging purposes only ), BnLoginModule, BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), ], providers: [ AuthenticationGuard], bootstrap: [AppComponent] }) export class AppModule { }
---Componente Loading:
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-bn-loading', templateUrl: './bn-loading.component.html', styleUrls: ['./bn-loading.component.css'] }) export class BnLoadingComponent implements OnInit {
constructor() { }
ngOnInit() { } }
---Tela Login:
import { Component,Input, ViewEncapsulation } from '@angular/core'; import { NgbActiveModal, NgbModalRef, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { ActivatedRoute, Router } from '@angular/router'; import 'rxjs/add/observable/fromPromise';
import { BnLoginService } from '../login-service/bn-login-service.service';
//Início do componente do modal de login(já aberto) @Component({ selector: 'bn-tela-login', templateUrl: './bn-tela-login.component.html', styleUrls: ['./bn-tela-login.component.scss'], }) export class BnTelaLogin{
solicitarCnpj:boolean; carregando: boolean= false;
log_cnpj: string; log_userName: string; log_senha: string;
constructor(private modalAtivo: NgbActiveModal, private router: Router, private loginSv: BnLoginService){
}
public executaLogin(event){ //event.preventDefault(); this.carregando= true; this.loginSv.login(this.log_cnpj, this.log_userName, this.log_senha, this.modalAtivo).then(() => { this.fecharModal(); }).catch(erro =>{ console.log('Erro ao Logar'); this.carregando= false; }) }
fecharModal(){ this.modalAtivo.close(); } } //Fim do modal de login
//Início do componente do abridor do modal de login(ele é chamado para criar o modal de login) @Component({ template: '', encapsulation: ViewEncapsulation.None, styles:[` .login-modal .modal-dialog { max-width: 400px; }
.login-modal .modal-body{ margin-top: 20px; margin-bottom: 20px; margin-left: 50px; margin-right: 50px; }
.login-modal .modal-content{ align-items: center } `] }) export class BnTelaLoginComponent {
constructor(private modalSv: NgbModal,private route: ActivatedRoute) { this.abrirModal(); }
private abrirModal(){ this.modalSv.open(BnTelaLogin, {backdrop: "static", keyboard: false, size: "sm", windowClass: 'login-modal'})
}
} //Fim do abridor
---Módulo do Componente de Login:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { JsonpModule, HttpModule } from '@angular/http';
import { BnLoginService } from './login-service/bn-login-service.service'; import { BnTelaLogin, BnTelaLoginComponent } from './tela-login/bn-tela-login.component';
@NgModule({ imports: [ CommonModule, NgbModule.forRoot(), FormsModule, ReactiveFormsModule, JsonpModule, HttpModule ], entryComponents:[ BnTelaLogin ], declarations: [ BnTelaLogin, BnTelaLoginComponent, ], providers:[ BnLoginService ], exports:[ BnTelaLoginComponent, BnTelaLogin ] }) export class BnLoginModule { }
O código propriamente dito é muito grande. Tentei isolar apenas a parte que diz respeito ao problema