How to remove hash (#) from angular4 when using Ubuntu

Question

I realise that i can remove hash from my url -

by setting this -

{
provide: LocationStrategy, useClass: HashLocationStrategy }

with this -

{ provide: LocationStrategy, useClass: PathLocationStrategy }

But then i found out that we need to change our web server configuration also, because then when routing through url's in the application, it doesn't show any page, not even --> 404 Not Found.

I have even implemented in -

app.routing.ts

export class AppRoutingModule {
 constructor(private router: Router) {
  this.router.errorHandler = (error: any) => {
     let routerError = error.toString();
          if (routerError.indexOf('Cannot match any routes') >= 0 ) {
              this.router.navigate(['/pages/login']);
          } else {
              throw error;
          }
     }
     }

But to no avail. I am using Ubuntu, so i guess any setting on IIS is discarded and i could not even find any substitute to IIS in ubuntu, please help.

UPDATE

angular-cli.json

   {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
    "version": "1.0.0-alpha.6",
    "name": "coreui-angular"
     },
    "apps": [
       {
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "scss/style.scss"
        ],
        "scripts": [
            "../node_modules/chart.js/dist/Chart.bundle.min.js",
            "../node_modules/chart.js/dist/Chart.min.js"
        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
       }
     ],
     "e2e": {
       "protractor": {
           "config": "./protractor.conf.js"
       }
      },
     "lint": [
    {
        "project": "src/tsconfig.app.json"
    },
    {
        "project": "src/tsconfig.spec.json"
    },
    {
        "project": "e2e/tsconfig.e2e.json"
    }
    ],
   "test": {
      "karma": {
        "config": "./karma.conf.js"
       }
      },
   "defaults": {
    "styleExt": "scss",
    "prefixInterfaces": false,
    "serve": {
        "port": 4200,
        "host": "localhost"
    }
    }
  }

index.html

   <head>

   <base href="./">

   //code for links like bootstrap ,etc.
   </head>

app.routing.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule,Router } from '@angular/router';
 import { HttpModule } from '@angular/http';

 // Layouts
 import { FullLayoutComponent } from './layouts/full-layout.component';
 import { SimpleLayoutComponent } from './layouts/simple- 
  layout.component';

  import { AuthGuard } from './authguard/authguard';


   export const routes: Routes = [
  {
  path: '',
  redirectTo: 'pages/login',

   pathMatch: 'full',
    },
    {
     path: '',
    component: FullLayoutComponent,

     children: [
     {
      path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule',
      canActivate: [AuthGuard],
      data: [{
      title: 'Master Systems'
    },
    {
      expectedRole: '18'
    },
    {
      expectedRole: '0'
    },
     ]
    },
    {
      path: 'components',
      loadChildren: './components/components.module#ComponentsModule',
      canActivate: [AuthGuard],
      data: [{
        title: 'Master Systems'
      }
      ]

      },

     //code


    @NgModule({
   imports: [RouterModule.forRoot(routes )],
   exports: [RouterModule]
     })

 export class AppRoutingModule {
   constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
       let routerError = error.toString();
          if (routerError.indexOf('Cannot match any routes') >= 0 ) {
              this.router.navigate(['/pages/login']);
          } else {
              throw error;
          }
     }
     }


     }

Maybe you can found something here : https://stackoverflow.com/questions/48742496/pathlocationstrategy-works-only-locally — Julien METRAL, Jun 07 '18 at 12:30

score 0 · Answer 1 · answered Jun 07 '18 at 12:53

0

Well, when running on locally, the application is served by the development server which is configured ok and everything works fine (no matter what path strategy you use).

When you run the build and you get the bundle file and you serve it on some other server - lets say NGINX, you must configure the server to redirect all the requests to your index.html (root) file. If you do that everything will work fine

Here is an example on how you can configure NGINX

server {
  listen 80;
  server_name localhost ;
  index index.html;
  root /var/www/exchange-frontend;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

You have to configure your server to redirect all requests to index.html. My guess is that your server intercepts the request http://localhost:4200/pages/login (assuming your server runs on port 4200) and doesn't know what to do with the path /pages/login.

I had this issue when I served the application encapsulated in a Spring Boot application served under /static folder. I had to configure Spring Controller to redirect all requests to /index.html. Doing so, it will load the application and then the Routing module from angular will work just fine.

There is also one more thing. When the application is started, it tries to load all bundles (js & css). If the index.html is not served on the server on / , then when you will look in browser console, you will see an error saying could not load bundle.js - this can be fixed by configuring angular cli build process with specifying --deploy-url so when the application tries to load its bundle, it will know the relative path from the server.

answered Jun 07 '18 at 12:53

Adrian Claudiu Dima

449
5
9

hi Adrian, i donot have NGINX file in my code. Besides , i have updated my code post can you please have a look and suggest the changes there probably in angular-cli ..please – Techdive Jun 08 '18 at 03:42
Also, do i need to specifically and compulsorily create an NGINX fileto solve the routing ?? – Techdive Jun 08 '18 at 04:05
You don't need an nginx file. That is needed only if you want to serve your content(app) from NGINX. Also the link which was provided in the comment above, does the same but for node.js. You must do the same for the server you are hosting on, since all the requests must be redirected to your base path. On what server you serve your content ? Also don't try to access the app on port 4200. That port is of your development kit provided by angular. – Adrian Claudiu Dima Jun 08 '18 at 06:19
i don't understand, can you explain in simple terms as to what content needs to be added in my files and please specify the files even . Also, as you said that i donot need the nginx file, then where do i place the above code snippet you have mentioned in your post to ensure proper functioning of urls' – Techdive Jun 08 '18 at 06:38
When you run a build, you application will be archived in some files (index.html, bundle.js and so on). Now those files need to be served (hosted) on a webserver. When you run the ng serve, those files are hosted on a node server - thats why you can access the app at port 4200. Now when you run the build, those files (your application) must be hosted on a server. This server which runs on a port (other than 4200 most likely ) must be configured (like node server from development is condifured) to redirect all requests to your index.html from the server where is hosted. – Adrian Claudiu Dima Jun 08 '18 at 06:51
You might host the application on a webserver like NGINX, Apache HTTP Server, Node.js and so on. All those servers must be configured to host your application in a way that all requests are redirected to this index.html. Have a look at my repo which integrates angular with spring boot under docker. https://github.com/adrianclaudiudima/angular-springboot-docker-integration. (if you use docker). You will see that the server which hosts the files is configured to redirect all requests to index.html. As for apache server, same thing. – Adrian Claudiu Dima Jun 08 '18 at 06:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172741/discussion-between-adrian-claudiu-dima-and-techdive). – Adrian Claudiu Dima Jun 08 '18 at 08:07
HI Adrian, I am using Node.js for server side deployement. So can you suggest in which file and what to write in that file And the port for angular4 - (client-side application) i use 4200 and server side implementation is via Node.js on 8098 port Also, one more question is, once the configuration is done in my Node.js files , i hope i may not need anything to implement anything else while deploying on production – Techdive Jun 08 '18 at 13:55

How to remove hash (#) from angular4 when using Ubuntu

1 Answers1