Angular 表单提交导致页面重新加载(仅限生产)

Question

我有一个看起来像的表格

<form (ngSubmit)="onSubmit(myForm)" 
      #myForm="ngForm">
  <mat-form-field>
    <input matInput placeholder="Field" [(ngModel)]="field" name="field">
  </mat-form-field>
  <button mat-raised-button color="primary">Submit</button>
</form>

我正在我的模块中导入 FormsModule，当为开发构建代码时，一切都按预期工作。当我为生产构建项目时，页面会重新加载并且没有提供控制台日志。

我尝试向提交处理程序提供 $event 并显式停止默认行为(据我所知，这是 ngSubmit 应该隐式处理的事情)，但是那没有帮助。

包版本如下

+-- @angular/animations@5.1.2
+-- @angular/cdk@5.0.2
+-- @angular/cli@1.6.1
+-- @angular/common@5.1.2
+-- @angular/compiler@5.1.2
+-- @angular/compiler-cli@5.1.2
+-- @angular/core@5.1.2
+-- @angular/flex-layout@2.0.0-beta.12
+-- @angular/forms@5.1.2
+-- @angular/http@5.1.2
+-- @angular/language-service@5.1.2
+-- @angular/material@5.0.2
+-- @angular/platform-browser@5.1.2
+-- @angular/platform-browser-dynamic@5.1.2
+-- @angular/router@5.1.2
+-- @types/jasmine@2.5.54
+-- @types/jasminewd2@2.0.3
+-- @types/node@6.0.95
+-- codelyzer@4.0.2
+-- core-js@2.5.3
+-- jasmine-core@2.6.4
+-- jasmine-spec-reporter@4.1.1
+-- karma@1.7.1
+-- karma-chrome-launcher@2.1.1
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.1
+-- karma-jasmine@1.1.1
+-- karma-jasmine-html-reporter@0.2.2
+-- protractor@5.1.2
+-- rxjs@5.5.6
+-- ts-node@3.2.2
+-- tslint@5.7.0
+-- typescript@2.4.2
`-- zone.js@0.8.18

当我检查我刚才工作的一个项目时，它使用了完全相同的代码并且应用程序没有遇到这个问题。在新版本的 Angular 中，是否应该做一些不同的事情？

编辑:当我进行评论中建议的更改时

• 将按钮类型更改为button
• 从按钮点击中显式调用提交处理程序

页面仍然重新加载，这是由检查表单有效性引起的。

onSubmit(form: NgForm){
  if (form.form.invalid)
    return;
}

这不是原始原因，因为在不进行建议的更改的情况下删除有效性检查不会阻止页面重新加载。

Edit2: 所以看起来确实是包版本问题。这是 git project这说明了问题。使用默认包时，问题没有发生，并且在我更新包后出现。

Answer 1

我也遇到了同样的问题。显然在 Angular 项目下已经注册了一个错误。 Issue 21173 .

我能够通过按照@thekiba 进行更改来让它工作

// file: /node_modules/@angular/cli/models/webpack-configs/production.js

-mangle: true
+mangle: false

并运行以下命令来构建:

ng build --prod --env=release --aot --build-optimizer true --output-hashing all --extract-css true --named-chunks false --sourcemaps false

希望对你有帮助