firebaseログインの実装中にAngularDartがエラーを投げる

Question

私はAngularDartプロジェクトでfirebase google loginを実装しようとしていますが、角度ダートを実装するとエラーが発生します。私は*ngIfのタイプミスを再確認しましたが、必要なものを見つけることができませんでした。

ご協力いただきありがとうございます。 firebaseに関連していないよう

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

。 3角度およびそれ以前のディレクティブで

@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); 
} 

が、これはもうサポートされていません、アプリケーション全体のためにpubspec.yamlに登録することができ、すべての使用ディレクティブは、それらが使用されているコンポーネントの注釈に登録する必要があります。