Angular 2 Routing Does Not Work When Deployed to Http Server

Question

I am going to develop a simple Angular 2 application. I have created a project with routing, using Angular CLI and added several components to the app using \'ng generate co

Answer 1

You should try specifying the url in the build from the point the app should initialize:

Ng build --prod --base-href="http://your.url.com/subdirectory/etc"

Answer 2

This problem is solved by implementing HashLocationStrategy which adds # to all your routes. You achieve this by adding HashLocationStrategy to AppModule providers.

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

and add the corresponding import

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

This will solve your problem.

And if you don't want to use the HashLocationStrategy, you can use the PahtLocationStrategy, and so your Angular app will not show Hash in the URL. For more details about it check the official Link: https://angular.io/api/common/PathLocationStrategy

Answer 3

This is because http-server does not support fallback like lite-server or web pack-dev server. This is why it shows 404 not found. There are two solution to resolve this issue:

1. you can use HashLocationStrategy like mentioned above.
2. If you are deploying it to Apache or IIS server then you can simply add configurations as mentioned here!

Note: For development you can use lite-server.

Hope this will help you.

Answer 4

Add a dot in your base href strings.

Correct

<base href="./home">

Wrong

<base href="/home">

http://www.wisdomofjim.com/blog/solved-problems-with-resource-loading-failures-when-deploying-angular-2-webapps-live

Answer 5

It will happen because it goes to find a page about which is not there inside at all hence 404. Possible options:

1. If you want to go with http-server then use a proxy which will redirect everything to http://localhost:your-port.

   Option: -P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com

2. Don't use express at all. Create your own http-server using express & Redirect everything to index.html

   Assuming public is your folder where u keep all transpiled things.

   var express = require('express');
   var app = express();
   
   var path = __dirname + '/public';
   var port = 8080;
   
   app.use(express.static(path));
   app.get('*', function(req, res) {
       res.sendFile(path + '/index.html');
   });
   app.listen(port);
   

Answer 6

For Apache Server

• Create a file name .htaccess
• Edit that file and write index.html instead of index.php

• For those who dont have any code, can write the code below in your .htaccess file : RewriteEngine On # If an existing asset or directory is requested go to it as it is RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] # If the requested resource doesn't exist, use index.html RewriteRule ^ /index.html

• This code might not work for SSL certificate - contact your hosting provider OR visit https://httpd.apache.org/docs/current/howto/htaccess.html to refer to docs.