PatrickJS / NG6-starter

:ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack
https://angularclass.github.io/NG6-starter
Apache License 2.0
1.91k stars 1.35k forks source link

building index.html net::ERR_FILE_NOT_FOUND #190

Closed sztymelq closed 7 years ago

sztymelq commented 7 years ago

Hello,

I would like to serve bundled index.html by my express app. In order to check if index.html works fine I've run "npm run build". Dists have been generated properly but when I open bundled index.html locally in browser I get following errors:

file:///vendor.bundle.js?a90d67828476200254c4 Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app.bundle.js?a90d67828476200254c4 Failed to load resource: net::ERR_FILE_NOT_FOUND file://www.google-analytics.com/analytics.js Failed to load resource: net::ERR_FILE_NOT_FOUND

Could you please help with that issue? Maybe it is related to base href="/" ? What am I doing wrong here? Note that it is reproducible on fresh cloned NG6-starter.

fesor commented 7 years ago

Could you please help with that issue?

You should start some http server and place this files to webroot. Or you could just change path in your index.html from /vendor.js to vendor.js to use relative paths.

sztymelq commented 7 years ago

Ive tried to serve index.html by response.render method in express. Please find following steps to reproduce issue:

  1. clone NG6-starter
  2. npm install
  3. npm run build
  4. open dist/index.html in browser

Here is my index.html which is not modified at all:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>NG6-Starter by @AngularClass</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="NG6-Starter by @AngularClass">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <base href="/">
  </head>
  <body ng-app="app" ng-strict-di ng-cloak>

    <app>
      Loading...
    </app>

    <!-- Google Analytics: change UA-71073175-2 to be your site's ID -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-71073175-2', 'auto');
      ga('send', 'pageview');
    </script>
  <script src="vendor.bundle.js"></script><script src="app.bundle.js"></script></body>
</html>
fesor commented 7 years ago
 <base href="/">

This is the reason why you should not just "open dist/index.html in browser", but start http server and specify dist as a webroot.