Cannot load files when paste URL manually Angular 2 routing?

Question

I make this routing config

@RouteConfig([
  {
    path:'/profile/:id',name:'Profile',component:ProfileComponent
  },
  // else
  {
    path: '/**',
    redirectTo: ['Home']
  }
])

and used this to navigate Profile with parameter {id:5}

<a [routerLink]="['Profile', {id:5}]" >Go </a>

i added to index.html head this base

<base href="/">

It successfully navigated to

http://localhost:3000/profile/1

and worked fine

but when i paste same URL manual in browser and hit enter it give me this error

Error happen because files are not loaded from root directory

http://localhost:3000

but browser trying to load them form relative URL directory

http://localhost:3000/profile/1

UPDATE: I am using angular 7 now, this kind of problem is fixed without need to add any thing

Stefan Svrkota · Accepted Answer · 2016-09-16T18:10:36.620

5

I solved that problem by adding # to my routes, for example http://localhost:3000/#/profile/1, you can try to do the same. Someone may have better fix for this problem though. Anyway, my solution is adding HashLocationStrategy to AppModule providers:

{ provide: LocationStrategy, useClass: HashLocationStrategy }

Of course, before that, you need to import LocationStrategy and HashLocationStrategy:

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

If you are using RC4 or lower, you add this to your bootstrap method, for example:

bootstrap(
AppComponent,
    [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]);

edited Sep 16 '16 at 18:10

answered Sep 16 '16 at 17:55

Stefan Svrkota

48,787
9
98
87

where i can add this { provide: LocationStrategy, useClass: HashLocationStrategy } – Amr Ibrahim Sep 16 '16 at 18:21
@amrabdulaziz Did my best to explain, can't do better than this. – Stefan Svrkota Sep 16 '16 at 18:24
i cannot load import { LocationStrategy,HashLocationStrategy} from 'angular2/common'; – Amr Ibrahim Sep 16 '16 at 18:30
@amrabdulaziz I guess you are using very old version, try this then: `import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common';` – Stefan Svrkota Sep 16 '16 at 18:34
not worked i am using "name": "angular2", "version": "2.0.0-beta.7", – Amr Ibrahim Sep 16 '16 at 18:42
1

Then this is it: `import {LocationStrategy, HashLocationStrategy} from 'angular2/router';`. Why are you using such an old version of Angular? It is recommended that you update to latest version ASAP. – Stefan Svrkota Sep 16 '16 at 18:45
how to update this ? "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "bootstrap": "^3.3.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "systemjs": "0.19.22", "zone.js": "0.5.15" } – Amr Ibrahim Sep 16 '16 at 19:16
A bit late in the show but facing similar issue. For head start i am using Angular 6. My issue is when i paste the url of my application for e.g. `http://localhost:4200/#/verified/someComponent` where `someComponent` is the path of my component defined in `route` then i am getting redirected to home page which is `http://localhost:4200/#/`. FYI i have first used `{usehash: true}` then`{ provide: LocationStrategy, useClass: HashLocationStrategy }` but none of them is working for the first time it redirects me to homepage only then the routing works. – dev_khan Jul 20 '18 at 12:16

micronyks · Answer 2 · 2016-09-16T18:33:46.497

5

Thats pretty simple.

When you refresh or manually copy paste URL in address bar, you need to have server side configuration (probably server side routing) to identify and redirect (with PathLocationStrategy) to destination page.

Angular routing is at client side and if you want to do the same with working condition, you need to use HashLocationStrategy

edited Sep 16 '16 at 18:33

answered Sep 16 '16 at 18:14

micronyks

54,797
15
112
146

score 1 · Answer 3 · answered Mar 07 '19 at 19:32

If you are using Express Server. You can use another middleware package called express-history-api-fallback. Use the below code into your server.js

import fallback from 'express-history-api-fallback'
import express from 'express'
const app = express()
const root = `${__dirname}/public`
app.use(express.static(root))
app.use(fallback('index.html', { root }))

If you are using a Webpack server. THere is an option in the webpack server configuration options "historyApiFallback". Set this value to true for your case.

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './client/main.ts'),
    target: "web",
    output: {
       path: path.resolve(__dirname, './comp'),
       publicPath: 'http://localhost:8080/',
       filename: 'app.bundle.js',
       chunkFilename: 'app.bundle.js'
    },
    devServer: {
        port: 8080,
        hot: true,
        historyApiFallback: true
    },
...
}

By using this approach you are asking the browser to store the urls(in the browser) into the cache, effectively asking the server to fallback to index.html

Cannot load files when paste URL manually Angular 2 routing?

3 Answers3