AngularDart émet une erreur lors de l'implémentation de la connexion firebase

Question

J'essaie d'implémenter google login firebase dans mon projet AngularDart, mais lors de l'implémentation d'une fléchette angulaire, une erreur se produit. J'ai revérifié pour la faute de frappe *ngIf mais incapable de trouver le nécessaire requis.

Veuillez nous aider avec ceci merci.

Error running TemplateGenerator for 
my_app|lib/views/layout_component/layout_component.dart. 
Error: Template parse errors: 
line 32, column 35 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list. 
*ngIf="fbService.user == null" 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
line 32, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template 
<div id="sign-in" *ngIf="fbService.user == null" class="horiz"> 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
line 37, column 36 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list. 
*ngIf="fbService.user != null" 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
line 37, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template 
<div id="sign-out" *ngIf="fbService.user != null" class="horiz"> 
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

app_component.dart

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 
import 'package:your_next_startup/views/layout_component/layout_component.dart'; 
import 'package:your_next_startup/services/firebase_service.dart'; 

@Component(
    selector: 'my-app', 
    styleUrls: const ['app_component.css'], 
    templateUrl: 'app_component.html', 
    directives: const [ 
    materialDirectives, 
    LayoutComponent, 
    ], 
    providers: const [ 
    materialProviders, 
    FirebaseService, 
    ], 
) 
class AppComponent { 
    final FirebaseService fbService; 

    AppComponent(FirebaseService this.fbService); 

} 

layout_component.dart

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 
import 'package:m_app/services/firebase_service.dart'; 

@Component(
    selector: 'app-layout', 
    styleUrls: const [ 
     'layout_component.css', 
    ], 
    templateUrl: 'layout_component.html', 
    directives: const [ 
    materialDirectives, 
    ], 
    providers: const [ 
    FirebaseService, 
    ], 
) 
class LayoutComponent { 
    final FirebaseService fbService; 
    LayoutComponent(FirebaseService this.fbService); 
} 

layout_component.html

<div class="horiz"> 
      <div id="sign-in" *ngIf="fbService.user == null" class="horiz"> 
       <div id="google-icon" class="icon"></div> 
       <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signIn()">Google Sign In</button> 
      </div> 

      <div id="sign-out" *ngIf="fbService.user != null" class="horiz"> 
       <img class="icon" [src]="fbService.user?.photoURL"> 
       <div id="user-name">{{fbService.user?.displayName}}</div> 
       <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signOut()">Sign Out</button> 
      </div> 
     </div> 

Answer 1

Cela ne semble pas être lié à Firebase.

@Component(
    selector: 'app-layout', 
    styleUrls: const [ 
     'layout_component.css', 
    ], 
    templateUrl: 'layout_component.html', 
    directives: const [ 
    materialDirectives, 
    NgIf,    // one of these two 
    COMMON_DIRECTIVES, // this one includes NgIf, NgFor, NgSwitchCase, ... 
    ], 
    providers: const [ 
    FirebaseService, 
    ], 
) 
class LayoutComponent { 
    final FirebaseService fbService; 
    LayoutComponent(FirebaseService this.fbService); 
} 

Dans Angulaire 3 et directives antérieures pourraient être enregistrées dans pubspec.yaml pour l'ensemble de l'application, ce n'est pas plus pris en charge et toutes les directives utilisées doivent être enregistrés dans l'annotation des composants où ils sont utilisés.