routing doesnt work after deployment in angular2

[Bhushan001]

angular-cli: 1.0.0-beta.18
node: 6.4.0
os: win32 x64 Windows 10

I have created an angular2 app & deployed it successfully.

app starts correctly after taking some time to load & then I am able to navigate to different components.

but when I put direct address in URL as :

www.sample.com/about

it says 404 error.

even when I am creating bundle using ng build --prod , it creates dist folder correctly & I am able to navigate to different components using links only.

but I cant access components directly from the URL in my local system also.

I am using http-server.

are there any extra configurations required to make it work?

[deebloo]

you need to setup something to redirect to your index.html page or change the default location strategy to hash.

[hbweb]

Hi,

Yes - you do :) Angular CLI does not automatically add routing to the app just yet therefore you would need to modify app.module.ts file as example below:

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent },
      {
        path: 'individual',
        component: IndividualComponent,
        data: {
          title: 'User List'
        }
      },
      { path: '', component: AppComponent }

    ]),
    HttpModule,
    JsonpModule,
    AlertModule
  ],

[Bhushan001]

@hbweb HI I tried this,still its not redirecting to components if I am redirecting directly from URL :(

[clydin]

As @deebloo mentioned, you need to properly configure your server or switch to angular's hash location strategy.

[34r7h]

+1 Then pushing to gh-pages is probably not much good since we can't update their servers for proper html5mode. Same as with ng1.x, no?

[deebloo]

@irthos you can change the router to use A hash location strategy instead of the history API and that will work on gh pages.

[filipesilva]

http-server doesn't support fallback to index.html, thus you can't use HTML5 push navigation with it.
You can use https://github.com/johnpapa/lite-server instead, which supports fallback.

[naveenkumarkg19]

Hi , I have the same issue , its working on ng serve . But if I use ng build I cant hit directly i get "Error cannot GET/path" . I was not able to implement the the hash location strategy . can somebody help me with this

[filipesilva]

@naveenkumarkg19 see https://angular.io/guide/deployment for information about deployment. Likely you need to configure index fallback (https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml).

[MalateshPatil]

If this issue occurred in production, follow below steps

1. Add a Web.Config file in the src folder of your angular application. Place below code in it.

<configuration>
<system.webServer>
<rewrite>
    <rules>
    <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
    </rule>
    </rules>
</rewrite>
</system.webServer>
</configuration>

2. Add a reference to it in angular-cli.json. In angular-cli.json put Web.config in assets block as shown below.

"assets": [
    "assets",
    "favicon.ico",
    "Web.config"
  ],

3. Now you can build the solution for production using
   ng build --prod
   This will create a dist folder. The files inside dist folder are ready for deployment by any mode.

[lsalim]

Hi. Did anybody tested the last solution above? Is it working?

[piyarulpss]

Nothing Works.... :-(

[chezihp]

I have the same issue... "ng serve" works great and changes the url according to route configuration. "ng build --prod" changes the url according to route configuration but they cannot be navigated again

[gustavostuff]

@filipesilva "http-server doesn't support fallback to index.html, thus you can't use HTML5 push navigation with it. You can use https://github.com/johnpapa/lite-server instead, which supports fallback."

that worked for me! I assume this fallback thing is supported in an amazon server as well, right? (we're planning to upload the front end project there)