Giters

Polymer / polymer-starter-kit

A starting point for Polymer apps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Does not show 404 page and console Errors appear when deployed to Firebase Hosting

johnlim opened this issue · comments

commented

Description

Generated a psk2 app using polymer init.
When deployed to firebase as documented, the 404 page does not load and there are console errors

Expected outcome

404 page should load for invalid pages and there should not be console errors.

Actual outcome

404 page does not show and there are console errors.

Live Demo

https://test-psk2-ba2b0.firebaseapp.com

Steps to reproduce

  1. Open dev console
  2. Navigate to https://test-psk2-ba2b0.firebaseapp.com/view22
  3.  at HTMLElement._initializeProperties (element-mixin.html:1)
 at HTMLElement.<anonymous> (property-accessors.html:1)
 at template-stamp.html:1
 at fe (property-effects.html:1)
 at s (element-mixin.html:1)
 at MyApp (my-app.html:1)```

displayed in console.
4) Click view1 menu item in app-drawer, more errors are displayed:

my-app.html:1 Uncaught TypeError: Cannot read property 'instanceCount' of undefined
    at HTMLElement._initializeProperties (element-mixin.html:1)
    at HTMLElement.<anonymous> (property-accessors.html:1)
    at template-stamp.html:1
    at fe (property-effects.html:1)
    at s (element-mixin.html:1)
    at MyApp (my-app.html:1)
_initializeProperties @ element-mixin.html:1
(anonymous) @ property-accessors.html:1
(anonymous) @ template-stamp.html:1
fe @ property-effects.html:1
s @ element-mixin.html:1
MyApp @ my-app.html:1
iron-selectable.html:1 Uncaught TypeError: Cannot read property 'dashToCamelCase' of undefined
    at HTMLElement._valueForItem (iron-selectable.html:1)
    at HTMLElement._indexToValue (iron-selectable.html:1)
    at HTMLElement._activateHandler (iron-selectable.html:1)
    at HTMLElement.<anonymous> (template-stamp.html:1)
    at Object._fire (gestures.html:1)
    at Object.forward (gestures.html:1)
    at Object.click (gestures.html:1)
    at HTMLElement._handleNative (gestures.html:1)
_valueForItem @ iron-selectable.html:1
_indexToValue @ iron-selectable.html:1
_activateHandler @ iron-selectable.html:1
(anonymous) @ template-stamp.html:1
_fire @ gestures.html:1
forward @ gestures.html:1
click @ gestures.html:1
_handleNative @ gestures.html:1
app-drawer-layout.html:1 Uncaught TypeError: Polymer.dom is not a function
    at HTMLElement._clickHandler (app-drawer-layout.html:1)
    at HTMLElement.<anonymous> (template-stamp.html:1)
_clickHandler @ app-drawer-layout.html:1
(anonymous) @ template-stamp.html:1
iron-location.html:1 Uncaught TypeError: Polymer.dom is not a function
    at HTMLElement._getSameOriginLinkHref (iron-location.html:1)
    at HTMLElement._globalOnClick (iron-location.html:1)
    at HTMLBodyElement.<anonymous> (template-stamp.html:1)
_getSameOriginLinkHref @ iron-location.html:1
_globalOnClick @ iron-location.html:1
(anonymous) @ template-stamp.html:1
Navigated to https://test-psk2-ba2b0.firebaseapp.com/view1

Browsers Affected

  • [x ] Chrome
  • Edge
  • Firefox
  • IE 11
  • Safari 8
  • Safari 9
commented

This error is often seen when a redirection error causes my-app.html to be loaded from inside itself, it isn't deduped because it's a server redirection error and the browser thinks it's actually a different file.

You would fix this by adding the pattern for lazy imports (src/my-*.html) as an exclusion when rewriting nonexistent pages to index.html.

commented

@jsilvermist I'm getting the same error...how do you mean 'adding the pattern for lazy imports'? How should I do that?

commented

@Mikebarson Firebase rewrites work on an in-order basis, so with an example of:

{
  "source": "!/__/**",
  "destination": "/index.html"
},
{
  "source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
  "destination": "/index.html"
}

The first rewrite is catching all url's which don't exist and redirecting them to /index.html, this causes a URI such as /view33 to cause a HTTP request to index.html with an identifier of my-view33.html.

While it's actually importing index.html again, the browser only see's that you imported a new file called my-view33.html so it's not properly deduplicated.

To fix this you can simply remove the first rule keeping only:

{
  "source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
  "destination": "/index.html"
}

This method will rewrite requests such as /view33, but not /view33.html.

Alternatively, you could redirect any nonexistent html page to index.html, unless it matches my-*.html for missing lazy views. (I use the pattern <PREFIX>-view-*.html to denote a lazy view.):

{
  "source": "**/!(*.js|my-*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
  "destination": "/index.html"
}

There's a related PR which simplifies the documentation for this here: Polymer/old-docs-site#2324