onclick on forms button not working.

[gentios]

Bug Report

What is the expected behavior?

onclick event should work http.post() requests should work

What is the current behavior?

I have a simple Login button with a (click)="login()" and behind in the login.component.ts there is a function which does an http.post request as follows:

login() {
    console.log('Entered login')
    this.http.post<any>('http://localhost:4500/user/login', this.data).subscribe(response => {
      if (response.success) {
       // Do something here
      }
    },
      err => {
        // Do something here
      });
  }

But when I click the button nothing happens and the url becomes

http://localhost:4000/auth/login?email=demo%40demo.com&password=demo

If I check the network there is no XHR requests happening, and I can confirm this since no requests arrives in the backend api.

If I try the application without angular universal it works great

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [  x ] express-engine
- [ ] hapi-engine
- [  x ] module-map-ngfactory-loader

Environment:

@nguniversal versions

• aspnetcore-engine:
• common:
• express-engine: 8.1.1
• hapi-engine:
• module-map-ngfactory-loader: 8.1.1

<!--
Angular CLI: 8.1.0
Node: 10.15.3
OS: darwin x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.801.0
@angular-devkit/build-angular              0.801.0
@angular-devkit/build-optimizer            0.801.0
@angular-devkit/build-webpack              0.801.0
@angular-devkit/core                       8.1.0
@angular-devkit/schematics                 8.1.0
@angular/cdk                               8.0.2
@angular/http                              7.2.15
@angular/pwa                               0.801.0
@ngtools/webpack                           8.1.0
@nguniversal/common                        8.1.1
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.0
@schematics/update                         0.801.0
rxjs                                       6.5.2
typescript                                 3.4.5
webpack                                    4.35.2

Is there anything else we should know?

Update:

I haven't still resolved the issue, but I think this could be a problem with Javascript Event, since the other forms are not interactive as well.

I am exporting Event with domino as follows:

global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['MutationObserver'] = getMockMutationObserver();

But it doesn't resolve the issue

Update 1:

I ran the server.js in debug mode with node inspector. however when I click the login button I don't receive the breakpoint in the debugger.

And also I can see that the angular form events don't become from ng-pristine to ng-dirty

[MarkPieszak]

Is it possible to provide a very isolated/small sample of this in Action (maybe via the universal-starter/schematic) and publishing it somewhere?

Also with JS disabled, is it actually successfully creating the SSR?
This seems like it's just a client-side angular issue though, as Forms wouldn't work with JS disabled (unless you utilized normal Form submit functionality)

[Avcajaraville]

Are you trying to do a "normal" post without javascript ? Because thats what Im trying to solve as well. I had to add method and action to the form. What Im struggling now is how to process the post via angular on the server.

I have already filled an issue about this. :)

[adzza24]

I had a similar issue. I fixed it by only firing the initialisation script in a browser:

export class AppComponent {
    constructor(
        @Inject(PLATFORM_ID) private platformId: any
    ) {
        if (isPlatformBrowser(this.platformId)) {
            this.init();
        }
    }
    ...
}

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[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.}