Getting error Can't bind to 'ngIf' since it isn't a known property of 'div'

Question

[This is Angular 5]

I've been hunting for the last day on the resolution for this, but everything I've found has not worked. Here's what I've tried, adding these modules to both the app.module.ts, as well as any child/feature modules

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

Here's my layout:

app.module.ts - contains import for SharedModule and HomeModule, as well as HomeComponent for the app-routing.module.ts
shared.module.ts - contains "homeCard" component/directive
home.module.ts - contains import for shared.module.ts; contains my
home component, even though it's accessed via the app-routing.module

home.component.html

<div *ngIf="!loading">
   <home-card class="card" [homeCard]="card1"></home-card>
</div>

Throwing the error:

Can't bind to 'ngIf' since it isn't a known property of 'div'

As soon as I remove the *ngIf from the div, it works fine. Why doesn't it recognize the *ngIf?

Edit: To the commenter that wanted to see the home.module.ts file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { SharedModule } from '../shared/shared.module';
import { LayoutModule } from '../layout/layout.module';
import { CoreModule } from '../core/core.module';

import { HomeComponent } from './home/home.component';
import { SearchResultsComponent } from './search-results/search-results.component';
import { SearchComponent } from './search/search.component';

import { SearchService } from './search/search.service';
import { CardComponentRetrievalService } from '../shared/services/card-component-retrieval/card-component-retrieval.service';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        CommonModule,
        SharedModule
    ],
    declarations: [
        HomeComponent,
        SearchResultsComponent,
        SearchComponent
    ],
    providers: [
        SearchService,
        CardComponentRetrievalService
    ],
    exports: [
        HomeComponent
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomeModule { }

app.module.ts

// import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, enableProdMode, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA, ViewContainerRef } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { $ } from 'protractor';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastModule, ToastOptions } from 'ng2-toastr/ng2-toastr';
import { CustomToastOptions } from './core/toast/custom-toast-options';

import { AboutUsModule } from './about-us/about-us.module';
import { AgentModule } from './agent/agent.module';
import { ClaimsAdminModule } from './claims-admin/claims-admin.module';
import { ContactUsModule } from './contact-us/contact-us.module';
import { CoreModule } from './core/core.module';
import { AuthModule } from './core/auth/auth.module';
// import { ExampleModule } from './example/example.module';
import { HomeModule } from './home/home.module';
import { InsuredModule } from './insured/insured.module';
import { LayoutModule } from './layout/layout.module';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { AppNavbarComponent } from './layout/navbar/navbar.component';
import { HeaderComponent } from './layout/header/header.component';
import { NavbarFooterComponent } from './layout/navbar-footer/navbar-footer.component';
import { SitemapComponent } from './layout/sitemap/sitemap.component';
import { AppFooterComponent } from './layout/footer/footer.component';
import { EnvironmentOverlayComponent } from './layout/environment-overlay/environment-overlay.component';

import { CustomHttpInterceptor } from './core/interceptors/custom-http-interceptor';
import { AuthGuard } from './core/auth/guards/auth/auth.guard';
import { HasPermissionGuard } from './core/auth/guards/has-permission/has-permission.guard';
import { CustomErrorHandler } from './core/handlers/custom-error-handler/custom-error-handler';

import { NotFoundComponent } from './shared/error-pages/not-found/not-found.component';

import { LoggingService } from './core/services/logging/logging.service';
import { HttpWrapperService } from './core/services/http-wrapper/http-wrapper.service';
import { FeatureFlagService } from './core/services/feature-flag/feature-flag.service';
import { AppDataService } from './core/services/app-data/app-data.service';
import { CardComponentRetrievalService } from './shared/services/card-component-retrieval/card-component-retrieval.service';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        // CommonModule,
        AppRoutingModule,
        HttpClientModule,
        ReactiveFormsModule,
        Ng4LoadingSpinnerModule.forRoot(),
        NgbModule.forRoot(),
        FormsModule,
        ToastModule.forRoot()
    ],
    declarations: [
        NotFoundComponent,
        AppComponent,
        AppNavbarComponent,
        HeaderComponent,
        NavbarFooterComponent,
        SitemapComponent,
        AppFooterComponent,
        EnvironmentOverlayComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: CustomHttpInterceptor,
            multi: true
        },
        HttpClient,
        AuthGuard,
        HasPermissionGuard,
        {
            provide: ErrorHandler,
            useClass: CustomErrorHandler
        },
        {
            provide: ToastOptions,
            useClass: CustomToastOptions
        },
        LoggingService,
        HttpWrapperService,
        FeatureFlagService,
        AppDataService,
        CardComponentRetrievalService
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

home.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';

import { ToastsManager } from 'ng2-toastr';

import { HomeCard } from '../../shared/home-card/home-card.model';
import { LinkButton } from '../../shared/link-button/link-button.model';

import { AppDataService } from '../../core/services/app-data/app-data.service';
import { CardComponentRetrievalService } from '../../shared/services/card-component-retrieval/card-component-retrieval.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    loading: boolean = true;
    title: string;
    homeFormGroup: FormGroup;

    // TODO: retrieve data fromt he service to display in the card
    webinarCard: HomeCard;
    upcomingEventCard: HomeCard;
    fillerCard: HomeCard;

    constructor(
        private formBuilder: FormBuilder,
        private router: Router,
        public appDataService: AppDataService,
        private toast: ToastsManager,
        private vcr: ViewContainerRef,
        private cardComponentService: CardComponentRetrievalService
    ) {
        this.appDataService.loggingService.log('HomeComponent | ctor...');

        this.title = this.appDataService.applicationName;

        this.toast.setRootViewContainerRef(vcr);
    }

    ngOnInit() {
        this.appDataService.loggingService.log('HomeComponent | ngOnInit...');

        this.homeFormGroup = this.formBuilder.group({
            postError: new FormControl()
        });

        this.loadPage();
    }

    buildLinkButton(buttonText: string, buttonTextColor: string, icon: string, url: string): LinkButton {
        return new LinkButton(buttonText, buttonTextColor, icon, url);
    }

    private loadPage() {
        this.appDataService.loggingService.log('HomeComponent | loadPage...');

        this.appDataService.spinnerService.show();

        this.cardComponentService.getHomePageComponents()
            // tslint:disable-next-line:array-type
            .subscribe((homeCards: HomeCard[]) => {
                this.finalizePageLoad(homeCards);
            }, ((error: HttpErrorResponse) => {
                this.finalizeAndShowError(error);
            }));
    }

    // tslint:disable-next-line:array-type
    private finalizePageLoad(homeCards: HomeCard[]) {
        this.appDataService.loggingService.log('HomeComponent | finalizePageLoad | received ' + (!homeCards ? '0' : homeCards.length.toString()) + ' cards...');

        this.webinarCard = homeCards[0];
        this.upcomingEventCard = homeCards[1];
        this.fillerCard = homeCards[2];

        this.resetLoadVariables();
    }

    // tslint:disable-next-line:cyclomatic-complexity
    private finalizeAndShowError(error: any) {
        this.appDataService.loggingService.error('HomeComponent | finalizeAndShowError | ' + JSON.stringify(error));

        this.resetLoadVariables();

        this.appDataService.routeToErrorPage(error);
    }

    private resetLoadVariables() {
        this.appDataService.spinnerService.hide();
        this.loading = false;
    }

    showToast() {
        this.appDataService.loggingService.log('HomeComponent | showToast...');

        this.toast.success('Yay! We can see toast messages...', 'Hello');
    }

    private setError(formControlName: string, validationErrorType: string, errorString: string) {
        this.homeFormGroup
            .get(formControlName)
            .setErrors({ [validationErrorType]: errorString });
    }
}

app-routing.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// import { LayoutModule } from './layout/layout.module';
// import { SharedModule } from './shared/shared.module';

import { HomeComponent } from './home/home/home.component';
import { LoginComponent } from './core/auth/login/login.component';
import { NotFoundComponent } from './shared/error-pages/not-found/not-found.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: '**', component: NotFoundComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        // SharedModule,
        // LayoutModule
    ],
    declarations: [
        HomeComponent,
        LoginComponent
    ],
    exports: [
        RouterModule
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppRoutingModule { }

If you import SharedModule in HomeModule then make sure you also export CommonModule from SharedModule — yurzui, Feb 16 '18 at 18:21
Some days every answer gets voted down and I start to wonder why I bother wasting so much of my time here. Especially because I have so much else I should be doing! :-) — DeborahK, Feb 16 '18 at 18:29
Why are you importing BrowserModule here? And what is the purpose of using CUSTOM_ELEMENTS_SCHEMA? — yurzui, Feb 16 '18 at 18:34
@DeborahK your answers are always high quality. Sorry to see them downvoted without explanation :-/ — Günter Zöchbauer, Feb 16 '18 at 18:36
@yurzui I'm removing browsermodule from all child modules and just leave it at the root, like the "duplicate question" links suggest, but that still doesn't work. The CUSTOM_ELEMENTS_SCHEMA is to allow for custom attributes on directives/components, for our unit tests I believe... — ganders, Feb 16 '18 at 18:42
That's your problem. You declared HomeComponent in routing module. You have to import CommonModule here. — yurzui, Feb 16 '18 at 19:04
Such problems hard to solve when you use CUSTOM_ELEMENTS_SCHEMA — yurzui, Feb 16 '18 at 19:05
@yurzui DING DING DING! Please add as an answer so I can give you credit. Thanks for the persistence! — ganders, Feb 16 '18 at 19:06
You can add credit to DeborahK and we close this question as duplicate — yurzui, Feb 16 '18 at 19:08
To the people that marked this duplicate, it WASN'T a duplicate. The solutions linked did not fix/address my issue. — ganders, Feb 16 '18 at 19:32

Getting error Can't bind to 'ngIf' since it isn't a known property of 'div'

0 Answers0