CODEWITHSUNDEEP
angulartypescriptroutes
Supun Abesekara
Supun Abesekara

Reputation: 736

Angular URL does not work in build project but it works on localhost:4200

When I open a sub URL it works on my local environment like http://localhost:4200/login. But after I build the project with ng build --prod all sub URLs are not working on the live server.

If I open a sub URL using this.router.navigate(['/system']); it works in the built project but if I reload that same URL it does not work (404).

Is there any issue with my Routing Strategies?

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <base href="/">
</head>
<body>

  <app-root></app-root>

</body>
</html>

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from "@angular/forms";
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HomeComponent} from './components/home/home.component';
import {HttpClientModule} from "@angular/common/http";
import {SystemComponent} from './components/system/system.component';
import {RouterModule, Routes} from '@angular/router';
import {AdminComponent} from './components/admin/admin.component';

const appRoutes: Routes = [
    {path: '', component: HomeComponent}, // home pages
    {path: 'login', component: HomeComponent},// sub page 1
    {path: 'system', component: SystemComponent}, // sub page 2
    {path: 'admin', component: AdminComponent} //sub page 3
];

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        SystemComponent,
        AdminComponent
    ],
    imports: [RouterModule.forRoot(
        appRoutes,
        {enableTracing: true},// <-- debugging purposes only it will show  big  console  log  data
        {useHash: true}  ),
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Upvotes: 1

Views: 2859

Answers (2)

Supun Abesekara
Supun Abesekara

Reputation: 736

I found solution to my error it's with my .htaccess file. Here the links that help me to solve this error.

HOWTOs / Making sure .htaccess and mod_rewrite are working as they should

  • Update your virtual host files sudo nano /etc/apache2/sites-available/000-default.conf
  • Add below code under DocumentRoot /var/www/html

    <Directory /var/www/html/projectFolder>
       # Don't show directory index
       Options -Indexes +FollowSymLinks +MultiViews
          
       # Allow .htaccess files
        AllowOverride All
          
       # Allow web access to this directory
       Require all granted
    </Directory>

  • Then restart server

Upvotes: 0

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

Check if you have set the base href in index.html

You could also use the commands below to update them if required.

ng build --base-href /

or ng build --bh /

or ng build --prod --bh /

This overrides the base href set in index.html and sets it if it is not set. Set it according to the deployment and modify accordingly. Can't comment since I am not familiar with your deployment strategy

You may also be interested in the --deploy-url option if you have different folder for assets refer [ https://shekhargulati.com/2017/07/06/angular-4-use-of-base-href-and-deploy-url-build-options/ ]

Upvotes: 2

Related Questions