以chrome扩展名运行时，Angular 2绑定不起作用

Question

我正在使用Angular构建chrome扩展。 我有一个简单的登录表格：

<div class="form-group">

<div *ngIf="error" class="alert alert-danger">Invalid Credentials</div>

<label>Username</label>
<input [(ngModel)]="username" class="form-control" />

<label>Password</label>
<input [(ngModel)]="password" class="form-control"  />

<button (click)="login(username, password)" class="btn btn-lg">Login</button>
</div>

当我在浏览器中运行应用程序时，它可以正常工作-使用正确的值调用控制器上的login方法。

但是，当我在chrome扩展程序中运行该应用程序（将dist文件夹作为解压缩的扩展程序加载）时，绑定似乎不起作用。 username和password字段未定义，但登录方法被调用。

我很乐意提供尽可能多的信息，但是当作为chrome扩展程序运行时，我需要做些特殊的事情来使应用正确绑定吗？

这是组件：

@Component({
  selector: 'login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

  username: string;
  password: string;
  error: boolean;

  constructor(private loginService: LoginService,
    private storageService: StorageService,
    private router: Router) {

  }

login(username: string, password: string) {
this.loginService.login(username, password)
  .subscribe(result => {
    if (result) {
      this.error = false;
      this.router.navigateByUrl('customers');
    }
    else {
      this.error = true;
    }
  });

}}

---

这是运行扩展程序时的实际html，我没有看到应用的角度绑定：

<login><div class="form-group">

    <!---->

    <label>Username</label>
    <input class="form-control">

    <label>Password</label>
    <input class="form-control">

    <button class="btn btn-lg">Login</button>
</div></login>