angular-cli: routing doesnt work after deployment in angular2

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
  ],

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>

1. 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"
  ],

1. 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.

@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).

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.

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

Apache: add a rewrite rule to the .htaccess file with following content

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

@Bhushan001 U have to add something like that in ur server.js

app.get('/*', function(req, res) { res.sendFile(path.join(__dirname + '/dist/index.html')); });

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

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

Apache: add a rewrite rule to the .htaccess file with following content

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

This work for me !!

You need to configure this on the server, direct access e.g. www.yourdomain.eu/home will look for “home” directory which does not exist… All requests need to go through index.html so on apache server all you need is .htaccess from this https://angular.io/guide/deployment

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

+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?