Page is loaded however no content is shown - Angular CLI project

[julianonunes]

A descriptive title

I'm creating a simple project using Angular-CLI, and it was working fine (when I run ng serve, the browser can load the page). However it was not detecting file changes, then I installed lite-server as I saw it being used on Angular Quicklaunch. The problem is that it runs fine, but nothing appears in the page content area.

Bug repro steps

The code and Dockerfile is available at https://github.com/julianonunes/angular_simple, I'm creating the project and running from a Docker container based on node:7.10 image.

1. Created the project using Angular CLI (ng new)
2. Added ngx-bootstrap package
3. Run npm install
4. Run npm start

Environment

• lite-server version: 2.3.0 (just installed locally)
• nodejs version: v7.10.0
• npm version: 4.2.0
• OS type/version: Debian:jessie

root@bf375f83e08e:/var/www# npm start
npm info it worked if it ends with ok
npm info using npm@4.2.0
npm info using node@v7.10.0
npm info lifecycle simple@0.0.0~prestart: simple@0.0.0

> simple@0.0.0 prestart /var/www
> npm run build

npm info it worked if it ends with ok
npm info using npm@4.2.0
npm info using node@v7.10.0
npm info lifecycle simple@0.0.0~prebuild: simple@0.0.0
npm info lifecycle simple@0.0.0~build: simple@0.0.0

> simple@0.0.0 build /var/www
> tsc -p src/

npm info lifecycle simple@0.0.0~postbuild: simple@0.0.0
npm info ok
npm info lifecycle simple@0.0.0~start: simple@0.0.0

> simple@0.0.0 start /var/www
> concurrently "npm run build:watch" "npm run serve"

[0] npm
[0]  info it worked if it ends with ok
[0] npm info using npm@4.2.0
[0] npm info using node@v7.10.0
[1] npm
[1]
[1] info
[1]
[1] it worked if it ends with
[1]  ok
[1] npm
[1]
[1] info
[1]  using npm@4.2.0
[1] npm info using node@v7.10.0
[0] npm info lifecycle simple@0.0.0~prebuild:watch: simple@0.0.0
[1] npm
[1]
[1] info
[1]
[1] lifecycle
[1]  simple@0.0.0~preserve: simple@0.0.0
[0] npm info lifecycle simple@0.0.0~build:watch: simple@0.0.0
[0]
[0] > simple@0.0.0 build:watch /var/www
[0] > tsc -p src/ -w
[0]
[1] npm
[1]
[1] info
[1]
[1] lifecycle
[1]  simple@0.0.0~serve: simple@0.0.0
[1]
[1] > simple@0.0.0 serve /var/www
[1] > lite-server -c=bs-config.json
[1]
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.html', './**/*.css', './**/*.js' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server:
[1]    { baseDir: 'src',
[1]      middleware: [ [Function], [Function] ],
[1]      routes: { '/node_modules': 'node_modules' } },
[1]   port: 3000 }
[1] [BS] Access URLs:
[1]  -----------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://172.19.0.3:3000
[1]  -----------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://172.19.0.3:3001
[1]  -----------------------------------
[1] [BS] Serving files from: src
[1] [BS] Watching files...
[1] [BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[0] 7:44:47 PM - Compilation complete. Watching for file changes.
[0]
[0]

[zatchgordon]

Sounds like you might need to run ng build and then setup a liteServer.config.json file with something like this

{
  "port": 8000,
  "files": ["./dist/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./dist" }  /* this is the important part */
}

then run lite-server -c liteServer.config.json

[impankratov]

Why not just cd into dist directory and run lite-server from there. It's even more convenient with npx:

cd dist
npx lite-server

[huddlestonka]

@julianonunes did you ever find a solution? I'm encountering the same issue.

I've tried both suggestions by @zatchgordon and @impankratov with no luck.

I am running an Angular 7 CLI generated application.

I have the following bs-config.json -

{
 "port": 8000,
 "files": ["./dist/**/*.{html,htm,css,js}"],
 "server": {"baseDir": "./dist"}
}

I run npm run dev and get the following console errors -

Refused to execute inline script because it violates the following Content Security Policy directive: default-src self. 
Either the unsafe-inline keyword, a hash (sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU=), or a nonce (nonce-...) is required to enable inline execution. 
Note also that script-src was not explicitly set, so default-src is used as a fallback.

localhost/:1 Failed to load resource: the server responded with a status of 404 (Not Found)