Angular build empty project

Question

Create a simple project in angular7. Its working fine with in development mode.

after completing, build through ng build --prod command.

Its generate dist folder with index.html with assets and some JS files

Check index file

If open in browers, its just white screen.

any solution what I am missing.

package.json

{
  "name": "app2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
    "bootstrap": "^4.2.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "ngx-swiper-wrapper": "^7.2.1",
    "popper": "^1.0.1",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.2",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

No-error, just blank white browser screen. – faisaljanjua Feb 07 '19 at 07:53 — faisaljanjua, Feb 07 '19 at 07:53

score 1 · Accepted Answer · answered Feb 06 '19 at 12:14

1

I am assuming it is because the browser attempts to access the local files and this throws an error to your console. You cannot directly serve by opening the index.html since file access is restricted.

You can however create a static server using lite-server or use some chrome extension.

[try this : https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb ]

Another alternative is to modify the browser target shortcut and add --web-security-disabled --allow-file-access-from-files flags

Read more : How to launch html using Chrome at "--allow-file-access-from-files" mode?

answered Feb 06 '19 at 12:14

Dhananjai Pai

5,914
1
10
25

1

thanks buddy, Using Chrome extension and its working. – faisaljanjua Feb 06 '19 at 15:20
Anytime! Happy to help. – Dhananjai Pai Feb 06 '19 at 16:55
Do consider an upvote and you can accept the best answer for future reference – Dhananjai Pai Feb 06 '19 at 16:56
upload the whole files to domain(xyz.com) for testing purpose in 3 level of folders (xyz.com/f1/f2/f3/app), but again its not working. When I checked sourcecode and see the files, its loading from path (xyz.com/runtime.js). I am wondering why? – faisaljanjua Feb 07 '19 at 07:56

Shreenil Patel · Answer 2 · 2019-02-07T06:45:56.987

1

You always need a server to run angular project. When you are running ng serve angular internally creates one server which is called localhost.

You can use any local server like iis to run the project.

EDIT:

If you want to use with xampp you need to change base href in index.html in dist folder.

STEP:1 copy app2 folder generated inside dist and paste it in xampp/htdocs

STEP:2 - xampp/htdocs/app2/index.html change <base href="/"> into

<base href="./">

STEP:3 open browser and navigate to http://localhost/app2

edited Feb 07 '19 at 06:45

answered Feb 06 '19 at 12:15

Shreenil Patel

1,054
1
9
20

I try XAMPP but still same issue. – faisaljanjua Feb 06 '19 at 15:18

Angular build empty project

2 Answers2