mgechev / mgechev/angular-seed

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

Open
#2,145 3 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.