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

问题描述

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

当我进行 prod 构建并发布站点时，我收到以下错误:异常:错误:未捕获(承诺):表单控件没有值访问器，名称为:'email'

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

app.modlues.ts 如下所示:

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从'@angular/platform-b​​rowser' 导入 { BrowserModule };从 './app.component' 导入 { AppComponent };从'./authenticated'导入{已认证}；从'@angular/http'导入{HttpModule}；从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从 '@angular/router' 导入 { RouterModule };从 '@angular2-material/button' 导入 { MdButtonModule };从'@angular2-material/card'导入{MdCardModule}；从'@angular2-material/checkbox'导入{MdCheckboxModule}；从'@angular2-material/core'导入{MdCoreModule}；从 '@angular2-material/icon' 导入 { MdIconModule };从'@angular2-material/input'导入{MdInputModule}；从 '@angular2-material/list' 导入 { MdListModule };从'@angular2-material/progress-bar'导入{MdProgressBarModule}；从'@angular2-material/progress-circle'导入{MdProgressCircleModule}；从'@angular2-material/radio' 导入 { MdRadioModule };从 '@angular2-material/toolbar' 导入 { MdToolbarModule };从 './authentication.service' 导入 { AuthenticationService };从'./dashboard/dashboard.component'导入{仪表板组件}；从 './app.routes' 导入 { appRouterProviders };从 './actions/actions.component' 导入 { ActionsComponent };从 './login/login.component' 导入 { LoginComponent };从'./action-detail/action-detail.component'导入{ActionDetailComponent}；@NgModule({声明: [应用组件，仪表板组件，动作组件，登录组件，动作细节组件],供应商: [appRouterProviders,认证服务，已认证],进口:[浏览器模块，通用模块，Http模块，表单模块，反应形式模块，路由器模块，MdButton 模块，MdCard 模块，MdCheckbox模块，MdCore模块，MdIcon 模块，Md输入模块，MdList模块，MdProgressBar 模块，MdProgressCircleModule，MdRadio 模块，工具栏模块],引导程序:[AppComponent]})导出类 AppModule {}

发生错误的登录组件:

import { Component, OnInit } from '@angular/core';从 '../authentication.service' 导入 { AuthenticationService };从@angular/router"导入{路由器}；从'@angular/forms' 导入 { NgForm };@成分({选择器:'应用程序登录'，templateUrl: 'login.component.html',styleUrls: ['login.component.css'],指令:[表单]})导出类 LoginComponent 实现 OnInit {电子邮件:字符串；密码:字符串；提交:布尔=假；构造函数(私有 authenticationService:AuthenticationService，私有路由器:路由器){}ngOnInit() {}提交(){this.submitted = true;this.authenticationService.login(this.email, this.password).订阅((结果) =>{this.submitted = false;如果(结果){this.router.navigate(['']);}},(错误) =>{this.submitted = false;});}}

登录组件html:

<md-card><h1>登录</h1><br/><form (ngSubmit)="onSubmit()" #loginForm="ngForm"><div><md-input placeholder="Username" required [(ngModel)]="email" name="email"></md-input>
<div><md-input placeholder="Password" type="password" required [(ngModel)]="password" name="password" ></md-input>

<br/><button md-raised-button type="submit" [disabled]="!loginForm.form.valid || Submitted" class="btn btn-default">提交</button></表单></md-card>

解决方案

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

htmlLoader: {最小化:false//ng2 的解决方法},

或者

<代码>{测试:/\.html$/,加载器:`html?-最小化`}

angular.io 的解决方法

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

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'

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

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 {}

login component where the error occurs:

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

Login component 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>

解决方案

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
  },

Or

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

workaround from angular.io

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