MEAN app not routing in angularJS

I have a MEAN app that I've been having trouble with the routing. My app is reloading upon every tab click that routes to a new component. It is supposed to route through angularjs for the speed and the SPA benefits. There are no errors but I believe my code setup is wrong.

Here is my server.js

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require("body-parser");
const mongoose = require('mongoose');

const appRoutes = require('./routes/app');
const keyRoutes = require('./routes/keys');
const mailRoutes = require('./routes/mail');

const app = express();
const uristring =
  process.env.MONGOLAB_URI ||
  process.env.MONGOHQ_URL ||
  'mongodb://localhost/db';

mongoose.connect(uristring, function (err, res) {
  if (err) {
    console.log ('ERROR connecting to: ' + uristring + '. ' + err);
  } else {
    console.log ('Succeeded connecting to: ' + uristring);
  }
  });

app.set('views', path.join(__dirname, './dist'));
app.set('view engine', 'ejs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());

app.use(express.static(path.join(__dirname, './dist')));


app.use(function (req,res,next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
  next();

});

app.use('/event', appRoutes);
app.use('/mail', mailRoutes);
app.use('/keys', keyRoutes);
app.use('/', appRoutes);

//catch 404 and forward error handler
app.use('*', appRoutes);


app.listen(process.env.PORT || 8080);

module.exports = app;

Here is my routes/app.js

const express = require('express');
const router = express.Router();
const path = require('path');



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

router.use('*', function(req,res) {
  res.sendFile(__dirname, '../dist/index.html');
});

module.exports = router;

and here is my app.module.ts where my angularjs routing is setup

const appRoutes: Routes = [
  { path: '', component: HeaderComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'event', component: EventComponent },
  { path: 'gallery', component: GalleryComponent },
  { path: 'thankyou', component: ThankyouPageModalComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    BodyComponent,
    HeaderComponent,
    ContactFormComponent,
    ContactComponent,
    GalleryComponent,
    PrayerRequestModalComponent,
    EventComponent,
    ImgCardsComponent,
    FooterComponent,
    ContactModalComponent,
    PrayerRequestFormComponent,
    RegisterFormComponent,
    ThankyouPageComponent,
    ThankyouPageModalComponent
  ],
  entryComponents: [
    ContactModalComponent,
    PrayerRequestModalComponent,
    ThankyouPageModalComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    NgbModule.forRoot(),
    Ng2PageScrollModule.forRoot(),
    SpinnerModule
  ],
  providers: [
    KeyService,
    EmailTransporterService,
    NgbActiveModal
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My routes are being called by routerlink="expression" in the template code. Here is an example of one

<a pageScroll class="nav-link page-scroll"
           routerLink="/event"
           (click)="activateEvent()"
           (eventActivated)="onEventActivated($event)"
           href="#mainNav"
           [pageScrollDuration]="300"><strong>EVENT</strong></a>

via Jonathan Corrin