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

希望对您有所帮助

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

Angular form submission causes page to reload (production only)

angular

angular-forms