Question

请不要标记这个＆＃34;重复...＆＃34;。我已经阅读了描述此错误的其他SO帖子。我尝试过这些解决方案。

如果您查看下面的代码，您会看到我在app.module.ts中导入了BrowserModule并且我在login-modal.component.ts中导入了CommonModule，但是这个错误对我来说仍然存在。我的代码中还有一些其他错误，它不允许这些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 {
}

编辑：取得一些进展

好的建议，我已经取得了一些进展。页面加载没有错误，但现在错误是@ 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">&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错误...

Answer 1

尝试此操作：将CommonModule导入到声明组件的模块中。确保它不仅在进口声明中，而且还包括＆＃34;进口＆＃34;在模块API中（所以imports : [ ... ]等）。

然后，您应该能够从组件中删除导入，并且一切都应该有效。

Module API的imports部分用于导入模块，以便该模块中声明的类可以使用该导入模块的功能。

无论如何，声明组件的模块的顶部，执行此操作：

import { CommonModule } from (etc).

在模块API中（您应该在其中声明＆＃34;声明＆＃34;您的组件）：

imports: [ CommonModule ]

并将其从您导入它的组件中删除（除非您在其他模块中需要它，否则除外）。

Answer 2

就我而言，我试图通过 Angular 引导模式加载组件... 但我忘记将该组件包含在我的模块 declarations:[] 组件列表中！

组件由 bootstrap ng modal 渲染，但 *ngIf 和 *ngFor 失败。将组件添加到模块组件列表后，一切都按预期工作。

角度2控制台错误无法绑定到＆＃39; ngIf＆＃39;因为它不是＆span;

2 个答案: