angular-cli 产品构建的问题

Question

如果我使用 ng serve，我的应用程序似乎运行良好。当我导航到本地主机时没有错误。

当我进行产品构建和发布网站时，出现以下错误：异常：错误：未捕获（承诺）：没有名称为表单控件的值访问器：'email'

我正在使用cli 1.0.0-beta.11-webpack.2； angular2个RC5； material 2.0.0-alpha.7-4.

app.modlues.ts 如下所示:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule  }         from '@angular/platform-browser';
import { AppComponent }           from './app.component';
import { Authenticated }           from './authenticated';
import { HttpModule }             from '@angular/http';
import { FormsModule, ReactiveFormsModule }            from '@angular/forms';
import { RouterModule }           from '@angular/router';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdCheckboxModule }       from '@angular2-material/checkbox';
import { MdCoreModule }           from '@angular2-material/core';
import { MdIconModule }           from '@angular2-material/icon';
import { MdInputModule }          from '@angular2-material/input';
import { MdListModule }           from '@angular2-material/list';
import { MdProgressBarModule }    from '@angular2-material/progress-bar';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdRadioModule }          from '@angular2-material/radio';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { AuthenticationService }  from './authentication.service';
import { DashboardComponent } from './dashboard/dashboard.component';
import { appRouterProviders } from './app.routes';
import { ActionsComponent } from './actions/actions.component';
import { LoginComponent } from './login/login.component';
import { ActionDetailComponent } from './action-detail/action-detail.component';

@NgModule({
    declarations: [
        AppComponent,
        DashboardComponent,
        ActionsComponent,
        LoginComponent,
        ActionDetailComponent 
    ],
    providers: [
        appRouterProviders,
        AuthenticationService,
        Authenticated        
    ],
    imports:      [
        BrowserModule,
        CommonModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule,
        MdButtonModule,
        MdCardModule,
        MdCheckboxModule,
        MdCoreModule,
        MdIconModule,
        MdInputModule,
        MdListModule,
        MdProgressBarModule,
        MdProgressCircleModule,
        MdRadioModule,        
        MdToolbarModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

发生错误的登录组件：

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../authentication.service';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css'],
  directives: [
    NgForm
  ]
})
export class LoginComponent implements OnInit {
  email: string;
  password: string;
  submitted : boolean = false;

  constructor(private authenticationService: AuthenticationService, private router: Router) {}

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
    this.authenticationService.login(this.email, this.password)
                              .subscribe(
                                (result) => {                                                                    
                                  this.submitted = false;
                                  if (result) {                                    
                                    this.router.navigate(['']);                                    
                                  }                                
                                },
                                (error) => {
                                  this.submitted = false;                                   
                                });
  }
}

登录组件html:

<div>
    <md-card>
        <h1>Login</h1>
        <br/>       
        <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
            <div>
                <md-input placeholder="Username" required [(ngModel)]="email" name="email"></md-input>
            </div>    
            <div>
                <md-input placeholder="Password" type="password" required [(ngModel)]="password" name="password" ></md-input>
            </div>
            <br/>
            <button md-raised-button type="submit" [disabled]="!loginForm.form.valid || submitted" class="btn btn-default">Submit</button>
        </form>               
    </md-card>
</div>

Answer 1

模板解析没有正常工作，angular 团队现在已经在他们的文档中提供了一个解决方法，但希望它能尽快在 webpack.config 文件中修复添加这个

htmlLoader: {
    minimize: false // workaround for ng2
  },

或

{
    test: /\.html$/,
    loader: `html?-minimize`
}

workaround from angular.io

angular-cli 产品构建的问题

Problems with angular-cli prod build

angular

angular-cli

angular-material2