mgechev / mgechev/angular-seed
Navigation broken in AOT build (interpolates `/<%=%20APP_BASE%20%>/` in URIs)
- Dominant language
- TypeScript
- Stars
- 4.5k
- Forks
- 1.4k
- PR merge metrics
- No merged PRs in 30d
Description
**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
Contributor guide
Research direction
Reproduce the issue with `gulp serve.prod.aot` and compare it with the non-AOT build. Inspect the default app's routerLink navigation and the AOT build configuration, then verify that Home and About URLs no longer contain the encoded APP_BASE text and that navigation and reload work in the reported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100