AngularDart在实现firebase登录时抛出错误

我试图在AngularDart项目中实现firebase google登录，但在实现AngularDart时抛出了一个错误。我已重新检查了

*ngIf

打字错误，但找不到所需的内容

请帮我做这个谢谢

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">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

布局\组件.省道

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

}

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>

谷歌登录
{{fbService.user？.displayName}}
退出

这似乎与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);
}

在Angular 3和更早版本中，指令可以在整个应用程序的

pubspec.yaml

中注册，这不再受支持，所有使用的指令都需要在使用它们的组件注释中注册