Lite-server show blank screen in angular app

Question

I want to use lite-server for testing my angular app in mobile view. This is my package json:

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "dev": "lite-server"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "^12.2.1",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "lodash": "^4.17.21",
    "ngx-page-scroll": "^8.0.0",
    "ngx-page-scroll-core": "^8.0.0",
    "random-words": "^1.1.2",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.1",
    "@angular/cli": "^12.2.13",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "lite-server": "^2.6.1",
    "typescript": "~4.3.5"
  }
}

When I run my app use command npm run dev I see only blank screen with my title. I already have tryed to build app first then run in folder dist, but it didn't help, I also see blank screen without any errors in console.

AhmedSHA256 · Answer 1 · 2022-05-31T11:32:28.313

0

As you can see here:

When you have installed lite-server, you have to run this command:

lite-server --baseDir="dist/project-name"

Where project-name is, at its name says, your project name, which is the name of your main folder.

You can also try http-server, you can see another question here, and the docu from here.

edited May 31 '22 at 11:32

answered May 31 '22 at 09:19

AhmedSHA256

525
2
20

Thanks for answer, but it doesn't help, I also see blank screen( – Peter Shneider May 31 '22 at 10:24
Blank screen when doing ng build and then lite-server --baseDir="dist/project-name" ? – AhmedSHA256 May 31 '22 at 10:37
Yes, I also try to do it in two terminals in first ng build --watch, in second lite-server --baseDir="dist/my-app" – Peter Shneider May 31 '22 at 11:01
I edited my answer, give it a try please – AhmedSHA256 May 31 '22 at 11:32
It doesn't help. I try to use angular-http-server, which also doesn't help. Also I try to create new default angular project and I also see blank screen. What realy help, to use command http-server in dist folder. – Peter Shneider Jun 03 '22 at 09:24

Lite-server show blank screen in angular app

1 Answers1