角度2のコンソールエラー 'span'の既知のプロパティではないため、 'ngIf'にバインドできません

Question

この "duplicate of ..."にはマークを付けないでください。私はこのエラーを説明する他の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">&times;</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：あなたのアドバイスのすべてで[OK]をほとんど進展

を作られて、私はいくつかの進歩を遂げています。ページはエラーなくロードされますが、エラーは@ NgModule.entryComponentです。私はこれを修正する方法を知っていると思ったが、entryComponentsに追加することはできません。モジュールにインポートCommonModule：ここ

は

Answer 1

はこれを試してみてください...ここで

// ---------------------------------------------------------------------------- 
// 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">&times;</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エラー@新しいです...新しいコードでありますコンポーネントを宣言します。 import文だけでなく、Module APIの "imports"（つまりimports : [ ... ]など）であることを確認してください。

コンポーネントからインポートを削除する必要があります。すべてインポートする必要があります。

モジュールAPIのimportsセクションは、モジュール内の宣言されたクラスがそのインポートされたモジュールの機能を使用できるようにモジュールをインポートすることです。

モジュールのAPIでは ​​

（あなたが持っているべきではあなたの成分 "と宣言"）：

とにかく、コンポーネントを宣言するモジュールの上部には、これを行う

imports: [ CommonModule ] 

そして、それをインポートしているコンポーネントから削除します（他のモジュールで必要な場合を除く）。