2

I have built a website using angular2, it works fine on localhost but when i deploy it on my server all css and js links appears broken.

ex:localhost:4200/home works fine but ip:4200/home gives 404 for css and js files.

ip:4200 itself redirects to home but typing ip:4200/home gives 404 even on reload it gives 404

I think i need to fix the routing for these.

My router ts file is as follows:

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { HomeComponent }  from './component/home.component';
import { RegisterComponent } from './component/register.component';
import { ProductComponent } from './component/product.component';

const appRoutes: Routes = [

  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  {
    path: 'home',
    component: HomeComponent
  },
  {
   path: 'register',
   component: RegisterComponent
  },
   {
    path: 'product',
    component: ProductComponent
  }


];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

and app.module.ts is like this:

import { NavBar } from './component/nav-bar.component';
import { RegisterService } from './services/register.service';
import { HomeService } from './services/home.service';
import { ProductService } from './services/product.service';
import { ProductComponent } from './component/product.component';
import { NavBar1 } from './component/nav-bar1.component';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RegisterComponent,
    NavBar,
    ProductComponent,
    NavBar1

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
         {
           path: 'register',
           component: RegisterComponent
         }
       ]),

    routing
  ],
  providers: [
RegisterService,
HomeService,
ProductService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
kirti
  • 4,499
  • 4
  • 31
  • 60

2 Answers2

0

Switch to HashLocationStrategy

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

or configure your server to support HTML5 pushState (rewrite requests to non-existing files to index.html.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • provice is giving node_modules/@angular/core/index"' has no exported member 'provice'. and even i tried it using provide : and its giving the same error node_modules/@angular/core/index"' has no exported member 'provide'. – kirti Dec 29 '16 at 08:48
  • Sorry, that's a typo - should be `provide` – Günter Zöchbauer Dec 29 '16 at 08:49
  • i have tried provide aswel but still giving same error node_modules/@angular/core/index"' has no exported member 'provide', do i need to install any module for this – kirti Dec 29 '16 at 09:01
  • That's just an object literal, you don't need anything for it. No idea why you get this error. You don't need to import `provide`. – Günter Zöchbauer Dec 29 '16 at 09:06
0

You should include .htaccess and put this code and keep file in root. 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

i hope i make you day.

YOG_PHP
  • 188
  • 1
  • 16