Building Angular 2 App using angular-cli and deploying

Question

I have an angular 2 project which I am trying to deploy on a remote iis server. On my local machine the app runs fine. There are absolutely no problems regarding anything.

I am building it for production mode using

ng build --prod

I am copying contents of dist folder into the folder on my server. Now this is the first time I am deploying and there is no one to guide me. When I go to the website url it takes a long time to load compared to before(when i didn't deploy it). Also when I go to a page and refresh I get 404 Error.

Now I have seen both these links

Angular 2 CLI App throwing 404 errors once deployed

and

Refresh page got 404: only happen when using /dist folder

But if someone could elaborate what exactly I have to do to fix it and make the loading faster(there is no problem with code it is just the method of deployment) that would be really helpful

package.json

{
  "name": "ofweb",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --port 6363 --live-reload-port 43453",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "bootstrap": "^4.0.0-alpha.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "fullcalendar": "^3.3.0",
    "jquery": "^3.1.1",
    "moment": "^2.18.1",
    "primeng": "^4.0.0-rc.2",
    "primeui": "^4.1.15",
    "reflect-metadata": "^0.1.9",
    "rxjs": "^5.1.0",
    "systemjs": "^0.20.2",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0",
    "canonical-path": "^0.0.2",
    "concurrently": "^3.1.0",
    "http-server": "^0.9.0",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-remap-istanbul": "^0.2.1",
    "lite-server": "^2.2.2",
    "lodash": "^4.17.4",
    "rimraf": "^2.5.4",
    "typings": "^2.1.0"
  }
}

Server Log File Error

2017-04-24 07:35:38 104.245.36.179 GET /admin/organizations - 80 - 122.175.232.166 Mozilla/5.0+(Windows+NT+10.0;+Win64;+x64)+AppleWebKit/537.36+(KHTML,+like+Gecko)+Chrome/57.0.2987.133+Safari/537.36 - 404 0 2 349

Hi, can you post your package.json file please. Are you installing angular globally on your server before running ng build --prod? — Benji Lees
– Benji Lees, Commented Apr 24, 2017 at 7:18
As far as installing angular globally on the server. I am pretty sure it is installed. I only know that I have to build the project and put it in a particular folder to deploy. The other stuff has been done by the software architect and he is not available — Mohit Shah
– Mohit Shah, Commented Apr 24, 2017 at 7:22

snorkpete · Accepted Answer · 2017-04-24 07:28:30Z

1

I can't speak about the slow performance, but the '404 on refresh' issue is because of missing web server configuration.

When you try to load your default route (of /) from the server, your web server will interpret that as a request for index.html and send index.html and your Angular app will load. If you then navigate to some route (eg. /mystuff), the Angular router will take control and update the URL properly and navigate you to the correct component. If however, you then refresh, the web server will see the request for /mystuff and try to find the corresponding file, which won't exist - hence the 404.

The solution is to configure your web server to redirect all requests for files it can't find to your index.html.

See the docs for more information on how to do so for IIS.

answered Apr 24, 2017 at 7:28

snorkpete

14.6k3 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mohit Shah Over a year ago

I added a web.config to my angular project mentioning fallback

snorkpete Over a year ago

and all is well?

snorkpete Over a year ago

sorry i can't help with the slow loading problem. a question though, if you put the production angular app on a plain web server (not the ng dev server) running on your machine, is it also slow? At least you can isolate whether the slowness is from the production build (unlikely, but still possible) vs the IIS server you're deploying to

Mohit Shah Over a year ago

The slowness is because ng build is not an optimizable way for deployment. I guess I will have to use webpack or AOT something

P. Moloney Over a year ago

If you are using the latest version of the angular-cli (1.x) it will use AOT + bundling by default with the build --prod cmd

Collectives™ on Stack Overflow

Building Angular 2 App using angular-cli and deploying

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related