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

Heyde

Answer 1

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 }
    ]);

Pursley

where i can add this { provide: LocationStrategy, useClass: HashLocationStrategy } – Heyde

@amrabdulaziz Did my best to explain, can't do better than this. – Pursley

i cannot load import { LocationStrategy,HashLocationStrategy} from 'angular2/common'; – Heyde

@amrabdulaziz I guess you are using very old version, try this then: import {LocationStrategy, HashLocationStrategy} from 'angular2/platform/common'; – Pursley

not worked i am using "name": "angular2", "version": "2.0.0-beta.7", – Heyde

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. – Pursley

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" } – Heyde

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. – Herein

Answer 2

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

Masquer

Answer 3

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

Mirthamirthful