[es6 only] Cannot read property 'onPopState' of undefined

[FrancescoBorzi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Having the following class:

import { Injectable } from '@angular/core';
import { HashLocationStrategy } from '@angular/common';

@Injectable()
export class CustomLocationStrategy extends HashLocationStrategy {
  // this can be empty
}

used in my app.module.ts as provider:

...
providers: [
    { provide: LocationStrategy, useClass: CustomLocationStrategy },
    ...
]
...

Current behavior

If (and only if) in the tsconfig.json the "target" is set to be "es6", I get the following error when running my application:

zone.js:665 Unhandled Promise rejection: Cannot read property 'onPopState' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'onPopState' of undefined

Expected behavior

It should just work (it works fine when compiling to es5).

Minimal reproduction of the problem with instructions

Just create an empty class extending HashLocationStrategy and use it as a LocationStrategy provider like showed above.

What is the motivation / use case for changing the behavior?

Changing target from es5 to es6 should not break the application.

Environment

Angular CLI: 6.0.8
Node: 8.10.0
OS: linux x64
Angular: 6.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3


Browser: Chrome (desktop) 

[FrancescoBorzi]

@trotyl what is wrong with it ?

[trotyl]

What you provided cannot be reproduced via Angular CLI. Please provide an concrete GitHub Repo for the minimal reproduction based on brand new Angular CLI project.

[FrancescoBorzi]

@trotyl I will add it. The reason I didn't add it before is because I thought it was very easy to reproduce it with the instructions that I've already give.

Like I said last time, I don't think it's nice to just downvoting issues without specifying the reason.

[trotyl]

OK, duplicate of #24014, you can try ng serve --prod and it would work.

For workaround, manually specifies the dependencies could help:

@Injectable()
export class CustomLocationStrategy extends HashLocationStrategy {
  constructor(
    _platformLocation: PlatformLocation,
    @Optional() @Inject(APP_BASE_HREF) _baseHref?: string,
  ) {
    super(_platformLocation, _baseHref);
  }
}

[jasonaden]

It looks like this can be closed based on being a duplicate of #24014. @ShinDarth if you're experiencing something else, please give details with the repro. Otherwise I'll go ahead and close this in the next 24 hours and #24014 can be tracked for the fix.

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