Angular 4 form submit is not working

[sarathscs]

I am using Angular 4 for my application development. When I submit my form it's calling the browser URL for posting. Browser showing something like this:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>MethodNotAllowed</Code>
<Message>
The specified method is not allowed against this resource.
</Message>
<Method>POST</Method>
<ResourceType>OBJECT</ResourceType>
<RequestId>EDFDF7D3C3D38F</RequestId>
<HostId>
adasdsa$623y234
</HostId>
</Error>

My form and code:

 <form #loginForm="ngForm" method="post" (ngSubmit)="login()">
                                <input type="text" class="form-control" placeholder="Eg sample@gmail.com " name="emailids" [(ngModel)]="emailid" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$" required #emailids="ngModel">
<input type="{{pswdInputType}}" class="form-control" placeholder="Enter your password here" name="userpassword" [(ngModel)]="userPassword"
                                    required #userpassword="ngModel">

                            <button [disabled]="!loginForm.form.valid" type="submit" class="btn btn_submit mt_20 hvr-icon-forward"></button>
                        </form>

Login function :

login() {
      this._loginService.login(this.emailid, this.userPassword).subscribe(res => {
console.log("success")
      }, error => {
        this.toastr.error('User  not found!', null, { toastLife: 2000 });
      });
}

I don't know what's the issue happening here. It's not calling the login function instead of this function call the form POST method is trying to post the browser URL (www.example.com/login) Registration also have to save form structure there also facing the same issue and this issue is only in AOT build.

Now using node v6.10.0 (npm v5.6.0)
Now using node v6.10.0 (npm v5.6.0)

package.json file :

 "dependencies": {
        "@agm/core": "1.0.0-beta.2",
        "@angular/animations": "4.4.6",
        "@angular/cdk": "2.0.0-beta.11",
        "@angular/common": "4.4.6",
        "@angular/compiler": "4.4.6",
        "@angular/core": "4.4.6",
        "@angular/forms": "4.4.6",
        "@angular/http": "4.4.6",
        "@angular/material": "2.0.0-beta.11",
        "@angular/platform-browser": "4.4.6",
        "@angular/platform-browser-dynamic": "4.4.6",
        "@angular/router": "4.4.6",
        "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.28",
        "angular2-drag-scroll": "1.4.4",
        "angular2-image-zoom": "1.2.1",
        "angular2-modal": "3.0.1",
        "angular2-moment": "1.7.0",
        "angular2-notifications": "0.7.8",
        "angularfire2": "4.0.0-rc.1",
        "aws-sdk": "2.88.0",
        "core-js": "2.4.1",
        "firebase": "3.6.6",
        "hammerjs": "2.0.8",
        "lodash": "4.17.4",
        "moment": "2.18.1",
        "ng2-auto-complete": "0.12.0",
        "ng2-canvas-whiteboard": "1.4.0",
        "ng2-file-upload": "1.2.1",
        "ng2-google-place-autocomplete": "1.4.2",
        "ng2-order-pipe": "0.1.5",
        "ng2-pagination": "2.0.2",
        "ng2-progressbar": "1.3.0",
        "ng2-toastr": "4.1.2",
        "ngx-carousel": "1.3.5",
        "ngx-infinite-scroll": "0.5.2",
        "ngx-pipes": "1.6.3",
        "ngx-rating": "0.0.9",
        "primeng": "4.1.1",
        "rxjs": "5.1.0",
        "time-ago-pipe": "1.2.1",
        "zone.js": "0.8.4"
    },
    "devDependencies": {
        "@angular/cli": "1.5.3",
        "@angular/compiler-cli": "4.4.6",
        "@angular/language-service": "4.4.6",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "6.0.85",
        "codelyzer": "~3.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.0.4",
        "tslint": "~5.3.2",
        "typescript": "~2.3.3",
        "webpack": "3.7.1"
    }

Please suggest!!

[arvindvishwkarma]

I had the same error with ng build -prod. On ng build, it worked fine. After adding reference of "uglify-es": "^3.2.2" in package.json, issue is resolved now.

Please check angular/angular#21173 (comment)

[filipesilva]

This issue is a duplicate of #8997. Updating to @angular/cli@1.6.3 should fix it.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}