Navigation broken in AOT build (interpolates /<%=%20APP_BASE%20%>/ in URIs)

[ComFreek]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see use [gitter](https://gitter.im/mgechev/angular2-seed) or [stackoverflow](https://stackoverflow.com/questions/tagged/angular2)

Current behavior
Navigation with the router directives [routerLink] is broken in the AOT build:

• it does not work at all in IE .11.64.16299.0 and Edge 41.16299.15.0, see the console outputs below.
• it produces weird URLs in Chrome (http://localhost:5555/%3C%=%20APP_BASE%20%%3E/about), which fail on reload.

Console output in Edge (not complete; IE allows easier copying, see its output below):

Environment config [object Object]

ERROR Error: Uncaught (in promise): SecurityError


app.js (1,301103)

[object Error]: {description: "Uncaught (in promise): SecurityError", message: "Uncaught (in promise): SecurityError", promise: Object, rejection: Object, stack: "Error: Uncaught (in promise): SecurityError at i (http://localhost:5555/js/shims.js?1511278332346:1:147444) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:148021) at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385) at onInvokeTask (http://localhost:5555/js/app.js?1511278332346:1:315135) at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385) at r.prototype.runTask (http://localhost:5555/js/shims.js?1511278332346:1:138657) at o (http://localhost:5555/js/shims.js?1511278332346:1:135733) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61298) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61170) at l (http://localhost:5555/js/shims.js?1511278332346:1:25245)"...}

ERROR Error: Uncaught (in promise): SecurityError


app.js (1,301103)

[object Error]: {description: "Uncaught (in promise): SecurityError", message: "Uncaught (in promise): SecurityError", promise: Object, rejection: Object, stack: "Error: Uncaught (in promise): SecurityError at i (http://localhost:5555/js/shims.js?1511278332346:1:147444) at i (http://localhost:5555/js/shims.js?1511278332346:1:147159) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:147981) at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385) at onInvokeTask (http://localhost:5555/js/app.js?1511278332346:1:315135) at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385) at r.prototype.runTask (http://localhost:5555/js/shims.js?1511278332346:1:138657) at o (http://localhost:5555/js/shims.js?1511278332346:1:135733) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61298) at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61170)"...}

IE console output:

DOM7011: Der Code auf dieser Seite hat die Zwischenspeicherung für das Vor- und Zurücknavigieren deaktiviert. Weitere Informationen dazu finden Sie unter: http://go.microsoft.com/fwlink/?LinkID=291337
localhost:5555
HTML1300: Navigation wurde ausgeführt.
localhost:5555
Environment config [object Object]
   "Environment config"
   {
      [functions]: ,
      __proto__: { },
      API: "https://demo.com",
      ENV: "DEV",
      Symbol()_n.rlqf1j5tewa: undefined,
      Symbol(react.element)_m.rlqf1j5tewa: undefined,
      Symbol(rxSubscriber)_o.rlqf1j5tewa: undefined,
      VERSION: "1.0.0"
   }

ERROR Error: Uncaught (in promise): SecurityError
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Uncaught (in promise): SecurityError",
      message: "Uncaught (in promise): SecurityError",
      name: "Error",
      promise: { },
      rejection: { },
      stack: "Error: Uncaught (in promise): SecurityError
   at i (http://localhost:5555/js/shims.js?1511278332346:1:147444)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:148021)
   at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385)
   at onInvokeTask (http://localhost:5555/js/app.js?1511278332346:1:315135)
   at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385)
   at r.prototype.runTask (http://localhost:5555/js/shims.js?1511278332346:1:138657)
   at o (http://localhost:5555/js/shims.js?1511278332346:1:135733)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61298)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61170)
   at l (http://localhost:5555/js/shims.js?1511278332346:1:25245)",
      Symbol()_n.rlqf1j5tewa: undefined,
      Symbol(react.element)_m.rlqf1j5tewa: undefined,
      Symbol(rxSubscriber)_o.rlqf1j5tewa: undefined,
      task: { },
      zone: { }
   }

ERROR Error: Uncaught (in promise): SecurityError
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Uncaught (in promise): SecurityError",
      message: "Uncaught (in promise): SecurityError",
      name: "Error",
      promise: { },
      rejection: { },
      stack: "Error: Uncaught (in promise): SecurityError
   at i (http://localhost:5555/js/shims.js?1511278332346:1:147444)
   at i (http://localhost:5555/js/shims.js?1511278332346:1:147159)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:147981)
   at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385)
   at onInvokeTask (http://localhost:5555/js/app.js?1511278332346:1:315135)
   at t.prototype.invokeTask (http://localhost:5555/js/shims.js?1511278332346:1:143385)
   at r.prototype.runTask (http://localhost:5555/js/shims.js?1511278332346:1:138657)
   at o (http://localhost:5555/js/shims.js?1511278332346:1:135733)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61298)
   at Anonymous function (http://localhost:5555/js/shims.js?1511278332346:1:61170)",
      Symbol()_n.rlqf1j5tewa: undefined,
      Symbol(react.element)_m.rlqf1j5tewa: undefined,
      Symbol(rxSubscriber)_o.rlqf1j5tewa: undefined,
      task: { },
      zone: { }
   }

Router URLs generated in Chrome for the links "Home" and "About" in the seed's default app:

• http://localhost:5555/%3C%=%20APP_BASE%20%%3E/
• http://localhost:5555/%3C%=%20APP_BASE%20%%3E/about

Navigating intra-page works, but fails on reload of them (URIError: URI malformed...).

Expected behavior
Seamless navigation.

Minimal reproduction of the problem with instructions

1. git clone this repo.
2. gulp serve.prod.aot (aot is important, it doesn't appear in the non-AOT build)

Please tell us about your environment:
Windows 10 Pro 64-bit, "default" HTTP server which is invoked with gulp serve.prod.aot.

• Angular Seed Version: 2bbbf9f

• Node: node --version = v8.9.0
• Node: npm --version = 5.5.1

[mgechev]

Would you merge with the code in master? Looks like this is an environment specific issue you have which might have been caused by migration to Angular version 5.

[ComFreek]

Sorry, I am not sure whether I fully understand your comment.
I am on the master branch already (git branch confirms), the latest commit is: 2bbbf9f (git log -1 confirms as well). The working directory is also clean except for package-lock.json which inevitably gets changed with npm install.

[dscheerens]

I got the same issue as well. This is actually part of a bigger problem: the new metadata rewriting feature from Angular 5, that is currently not compatible with the angular-seed. A simple workaround for the problem right now is to make a small change to your app module: use an exported factory function for the APP_BASE_HREF provider:

// ...

export function appBaseHrefFactory(): string {
  return '<%= APP_BASE %>';
}

@NgModule({
  // ...
  providers: [{
    provide: APP_BASE_HREF,
    useFactory: appBaseHrefFactory
  }],
  // ...
})
export class AppModule { }

However, this is just a quick fix. The real fix should be made in the AOT build tasks.