title: Node/Express angular 5 routing
body: <p>I am creating an application using angular5 and express 4.16. I have anchor tag on home page on click of which another component should be rendered (it should be redirected to that URL) but only URL changes.</p>
  
  <p>Required code is below.</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>  import { NgModule }  from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { AppComponent }   from './app.component';
    import { TestComponent }   from '../test/test.component';
  
  
    const routes: Routes = [
      { path: '', redirectTo: '/', pathMatch: 'full' },
  
      { path: 'Test', component: TestComponent }
  
    ];
  
    @NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule {}
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>    import { Component } from '@angular/core';
      // Import the DataService
      import { DataService } from './data.service';
  
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {  
        // Define a users property to hold our user data
        employees: Array&lt;any&gt;;
        // Create an instance of the DataService through dependency injection
        constructor(private _dataService: DataService) {
          // Access the Data Service's getUsers() method we defined
          this._dataService.getEmployees()
              .subscribe(res =&gt; this.employees = res);
        }
      }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>    import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import { FormsModule }    from '@angular/forms';
      import { AppComponent } from './app.component';
      import {TestComponent  } from '../test/test.component';
      import { AppRoutingModule }     from './app-routing.module';
      import{DataService} from './data.service'
      import {HttpModule} from '@angular/http'
      @NgModule({
        imports: [
          BrowserModule,
          FormsModule,
          AppRoutingModule,
          HttpModule
        ],
        declarations: [
          AppComponent,
          TestComponent
  
        ],
  
        providers: [DataService],
        bootstrap: [AppComponent]
      })
      export class AppModule { }
  </code></pre>
  
  <p><strong>out put of folder through ng build /dist/index.html</strong></p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;IndexV3&lt;/title&gt;
        &lt;base href="/"&gt;
  
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;app-root&gt;&lt;/app-root&gt;
        &lt;test-html&gt;&lt;/test-html&gt;
      &lt;script type="text/javascript" src="inline.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="polyfills.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="styles.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="vendor.bundle.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="main.bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>Node/Express server.js</strong></p>
  
  <pre><code>            const express = require('express');
              const bodyParser = require('body-parser');
              const path = require('path');
              const http = require('http');
              const app = express();
  
              // API file for interacting with MongoDB
              const api = require('./server/routes/api');
  
              // Parsers
              app.use(bodyParser.json());
              app.use(bodyParser.urlencoded({ extended: false}));
  
              // Angular DIST output folder
              app.use(express.static(path.join(__dirname, 'dist')));
  
              // API location
              app.use('/api', api);
  
              // Send all other requests to the Angular app
              app.get('*', (req, res) =&gt; {
  
                  res.sendFile(path.join(__dirname, 'dist/index.html'));
              });
  
              //Set Port
              const port = process.env.PORT || '3000';
              app.set('port', port);
  
              const server = http.createServer(app);
  
         server.listen(port, () =&gt; console.log(`Running on         localhost:${port}`));
  </code></pre>
  
  <p><strong>Output of home page as desired</strong></p>
  
  <p><a href="https://i.stack.imgur.com/b87yN.png" rel="noreferrer">Downoad screenshot Output after running localhost:3000 as desired anchor tag rendered</a></p>
  
  <p><strong>After click on anchor tag url changed but test component didnt rendered on browser</strong></p>
  
  <p><a href="https://i.stack.imgur.com/xmSRZ.png" rel="noreferrer">Downoad screenshot</a></p>
  
  <p><strong>test.component.ts</strong></p>
  
  <pre><code>    import { Component } from '@angular/core';
  
      @Component({
  
        selector: 'test-html',
        templateUrl: './test.component.html'
  
      })
      export class TestComponent {
        title = 'app';
      }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>    &lt;!--The content below is only a placeholder and can be replaced.--&gt;
      &lt;div style="text-align:center"&gt;
        &lt;h1&gt;    
        &lt;/h1&gt;  
      &lt;/div&gt;
  
      &lt;a   [routerLink]="['/Test']"  &gt;test&lt;/a&gt;
      &lt;ul&gt;
        &lt;li *ngFor="let employee of employees"&gt;{{employee.name}}&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>test.component.html</strong></p>
  
  <pre><code>        &lt;span&gt;yeeee&lt;/span&gt;
  </code></pre>
  
  <p><strong>Project Structure</strong></p>
  
  <p><a href="https://i.stack.imgur.com/lGq0U.png" rel="noreferrer">download project structure if required</a></p>