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

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

git clone this repo.
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

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.

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.

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

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

Description

Activity

mgechev commented on Nov 21, 2017

ComFreek commented on Nov 21, 2017

dscheerens commented on Nov 22, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

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