[SOLVED] Why am I getting 404 GET /index.html when I use lite-server in my Angular project?

Why am I getting 404 GET /index.html when I use lite-server in my Angular project?

I have an Angular project which I cannot deploy so I decided to use lite-server to see what's wrong. But when I run lite-server in my terminal, I get the following errors:

[Browsersync] Serving files from: ./
[Browsersync] Watching files...
21.09.26 17:17:05 404 GET /index.html
21.09.26 17:17:06 404 GET /favicon.ico
21.09.26 17:20:21 404 GET /index.html

This is my scripts object in package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev": "lite-server"
  },

Solution

To serve the application with lite-server you need to build it first. So run npm run build. This will put the built application by default in dist/<app_name> folder. After that lite-server should be called with --baseDir parameter which lets lite-server know, where the built application is. So I suggest to update the dev script to "dev": "lite-server --baseDir=\"dist/<app_name>\"".

If you need to watch the build output, you can define an npm script with ng build --watch content. This could run in the first terminal, and in the second one the lite-server.