lite-server does not load scripts from parent directory in Angular 2 app

Question

I am trying to run my application using the lite-server node package but it won't load scripts from the parent directory.

I want my index.html in the /src folder because it could be possible in the future to generate a different file to /dist. /node_modules and systemjs.config.js need to stay in the root directory as they won't change.

File structure:

The src/index.html:

<html>
    <head>
        <base href="/">
        <title>task manager</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
        <!-- Polyfill(s) for older browsers -->
        <script src="../node_modules/core-js/client/shim.min.js"></script>
        <script src="../node_modules/zone.js/dist/zone.js"></script>
        <script src="../node_modules/reflect-metadata/Reflect.js"></script>
        <script src="../node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="../systemjs.config.js"></script>
        <script>
            System.import('app').catch(function(err){ console.error(err); });
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

Running lite-server inside the /src dir:

The node modules do exist. If I move the required files to the child directory itself, /src, the server runs fine with no 404s. Is this a problem with my lite-server or systemjs settings?

score 0 · Accepted Answer · answered Aug 03 '16 at 02:08

You need to properly configure the lite-server.

In the project root, create a file called bs-config.json with the following content:

{
  "port": 8000,
  "server": {
    "baseDir": "./src",
    "routes": { "/": "./" }
  }
}

Now you have to run the lite-server in the same directory where is the bs-config.json file.

If you want to know more about lite-server config, read the Browsersync Options documentation.

Also, with this configuration, you can change the path of your script in the index.html file:

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

this method does not work for me, i still get the same 404, although i use bs-config.js, and add your routers in module.exports — longbow, Oct 19 '16 at 11:59

lite-server does not load scripts from parent directory in Angular 2 app

1 Answers1

Linked