Пожалуйста, не отмечайте это "дубликат...". Я прочитал другие сообщения SO, описывающие эту ошибку. Я пробовал эти решения.
Если вы посмотрите на мой код ниже, вы увидите, что у меня есть BrowserModule, импортированный в app.module.ts, и у меня есть CommonModule, импортированный в мой login-modal.component.ts, но эта ошибка сохраняется для меня. В моем коде есть другая ошибка, которая не позволяет этим SO-решениям работать на меня.
Ошибка консоли находится внизу.
Большое спасибо за то, что поделились своим опытом. Я застрял :-/
// ----------------------------------------------------------------------------
// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from './../environments/firebase.config';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeModule } from './home/home.module';
import { AuthGuard } from './auth.service';
import { routes } from './app.routes';
import { AppComponent } from './app.component';
import { GameComponent } from './game/game.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EmailComponent } from './email/email.component';
import { SignupComponent } from './signup/signup.component';
import { MembersComponent } from './members/members.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
EmailComponent,
SignupComponent,
GameComponent,
MembersComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AngularFireModule.initializeApp(firebaseConfig),
HomeModule,
NgbModule.forRoot(),
routes
],
providers: [AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
// ----------------------------------------------------------------------------
// src/app/login-model.component.ts
import { NgModule, Component, Input, OnInit, HostBinding } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-login-modal',
template: `
<div class="modal-header">
<h4 class="modal-title">Please login...</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-container">
<img src="assets/images/lock.svg" id="lock">
<span class="error" *ngIf="error">{{ error }}</span>
<button class="social-btn" (click)="loginFb()" id="fb">Login with Facebook</button><br>
<button class="social-btn" (click)="loginGoogle()" id="google">Login with Google</button>
<button class="social-btn" routerLink="/login-email" id="email">Email</button>
<a routerLink="/signup" routerLinkActive="active" class="alc">No account? <strong>Create one here</strong></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class LoginModalComponent {
@Input() name;
public error: any;
constructor(public activeModal: NgbActiveModal, private modalService: NgbModal,
public af: AngularFire, private router: Router) {
// this.af.auth.subscribe(auth => {
// if (auth) {
// this.router.navigateByUrl('/members');
// }
// });
}
public open() {
const modalRef = this.modalService.open(this);
modalRef.componentInstance.name = 'World';
}
loginFb() {
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/home']);
}).catch(
(err) => {
this.error = err;
})
}
loginGoogle() {
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/home']);
}).catch(
(err) => {
this.error = err;
});
}
}
@NgModule({
declarations: [LoginModalComponent],
imports: [
CommonModule,
NgbModal,
NgbActiveModal,
AngularFire
]
})
export class LoginModalModule {
}
EDIT: достигнут небольшой прогресс
Хорошо, со всеми вашими советами, я добился некоторого прогресса. Страница загружается без ошибок, но теперь ошибка @NgModule.entryComponent. Я думал, что знаю, как это исправить, но добавление в entryComponents не работает.
Вот новый код...
// ----------------------------------------------------------------------------
// src/app/home/home.component.ts
import { Component, OnInit } from '@angular/core';
import { LoginModalComponent } from './../modal/login-modal.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(public loginModal: LoginModalComponent) { }
public showLoginModal() {
console.log('Inside home.component.showLoginModal()');
this.loginModal.open();
}
ngOnInit() {
}
}
// ----------------------------------------------------------------------------
// src/app/home/home.module.ts
import { NgModule } from '@angular/core';
import { NgbModalModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { LoginModalModule, LoginModalComponent } from './../modal/login-modal.component';
import { HomeComponent } from './home.component';
@NgModule({
imports: [LoginModalModule],
declarations: [HomeComponent],
providers: [NgbActiveModal, LoginModalComponent]
})
export class HomeModule {
}
// ----------------------------------------------------------------------------
// src/app/login-model.component.ts
import { NgModule, Component, Input, OnInit, HostBinding } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngb-login-modal',
template: `
<div class="modal-header">
<h4 class="modal-title">Please login...</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-container">
<img src="assets/images/lock.svg" id="lock">
<span class="error" *ngIf="error">{{ error }}</span>
<button class="social-btn" (click)="loginFb()" id="fb">Login with Facebook</button><br>
<button class="social-btn" (click)="loginGoogle()" id="google">Login with Google</button>
<button class="social-btn" routerLink="/login-email" id="email">Email</button>
<a routerLink="/signup" routerLinkActive="active" class="alc">No account? <strong>Create one here</strong></a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class LoginModalComponent {
@Input() name;
public error: any;
constructor(public modalService: NgbModal, public activeModal: NgbActiveModal,
public af: AngularFire, private router: Router) {
// this.af.auth.subscribe(auth => {
// if (auth) {
// this.router.navigateByUrl('/members');
// }
// });
}
public open() {
const modalRef = this.modalService.open(this.activeModal);
modalRef.componentInstance.name = 'World';
}
loginFb() {
this.af.auth.login({
provider: AuthProviders.Facebook,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/home']);
}).catch(
(err) => {
this.error = err;
})
}
loginGoogle() {
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then(
(success) => {
this.router.navigate(['/home']);
}).catch(
(err) => {
this.error = err;
});
}
}
@NgModule({
declarations: [LoginModalComponent],
imports: [
CommonModule
]
})
export class LoginModalModule {
}
Вот новая ошибка @NgModule.entryComponent в консоли...
