angular-cli prod构建问题 [英] Problems with angular-cli prod build

问题描述

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

My application seems to be working fine if I use ng serve. When I navigate to the localhost there are no errors.

当我进行产品构建并发布网站时，出现以下错误:EXCEPTION:错误:未被捕获(承诺):名称为'email'的表单控件没有值访问器

When I do a prod build and publish the site I get the following error: EXCEPTION: Error: Uncaught (in promise): No value accessor for form control with name: 'email'

我正在使用cli 1.0.0-beta.11-webpack.2;角2 RC5;材料2.0.0-alpha.7-4.

I am using cli 1.0.0-beta.11-webpack.2; angular 2 RC5; material 2.0.0-alpha.7-4.

app.modlues.ts如下所示:

app.modlues.ts look as follows:

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>

推荐答案

模板解析无法正常工作，Angular团队目前已为其文档提供了解决方案，但希望完全可以在webpack中尽快解决.config文件添加此

Template parse is not working properly as it should and angular team has provided a work around on their docs for right now but hope fully it should be fix soon in webpack.config file add this

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

或

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

angular.io的解决方法

这篇关于angular-cli prod构建问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！