Angular Universal - Server rendered app not functioning as expected - angular5

Question

I've followed several workthroughs https://youtu.be/gxCu5TEmxXE on deploying Angular Universal and am currently doing so on firebase. I've successfully got the server rendering the app, BUT for some reason the app isn't bootstrapping from the server code. What I mean to say, is that when I load the app rendered by the server, the actual app itself doesn't function correctly.
I'm not sure if this is because of incompatibility for example with Angular Material https://github.com/angular/universal#in-progress or if I've made some errors in the configuration.
For example, if I load up my homepage via the normal compiled app and navigate to a form, I see the 'expected' form. However, if I load same page via the server rendering then I see the rendered form but I cannot interact with it.
Rendered form that you cannot interact with
Expected result if you navigate through the app
It feels like I am missing a key part of in the integration to make the server side rendered HTML transition into the normal app. What am I missing to make sure that the server rendered HTML transitions and functions in the same way as the normal app?
app.server.module
import {NgModule} from '#angular/core';
import {ServerModule} from '#angular/platform-server';
import {AppModule} from './app.module';
import {AppComponent} from './app.component';
#NgModule({
imports: [
// The AppServerModule should import your AppModule followed
// by the ServerModule from #angular/platform-server.
AppModule,
ServerModule
],
// Since the bootstrapped component is not inherited from your
// imported AppModule, it needs to be repeated here.
bootstrap: [AppComponent],
})
export class AppServerModule {}
server.ts
import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';
export let ssrapp = angularUniversal.trigger({
index: __dirname + '/browser/index.html',
main: __dirname + '/server/main.bundle',
enableProdMode: true,
browserCacheExpiry: 1200,
cdnCacheExpiry: 600
});
firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssrapp"
}
]
},
"functions": {
"predeploy": "npm --prefix functions run build",
"source": "functions"
}
}
package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
"build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"generate:prerender": "cd dist && node prerender",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:prerender": "cd dist/browser && http-server",
"serve:ssr": "node dist/server"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.1.0",
"#angular/cdk": "5.0.1",
"#angular/common": "^5.1.0",
"#angular/compiler": "^5.1.0",
"#angular/core": "^5.1.0",
"#angular/flex-layout": "git+https://github.com/angular/flex-layout-builds.git",
"#angular/forms": "^5.1.0",
"#angular/http": "^5.1.0",
"#angular/material": "5.0.1",
"#angular/material-moment-adapter": "^5.0.0",
"#angular/platform-browser": "^5.1.0",
"#angular/platform-browser-dynamic": "^5.1.0",
"#angular/platform-server": "^5.2.0-beta.0",
"#angular/router": "^5.1.0",
"#angular/service-worker": "^5.1.0",
"#nguniversal/express-engine": "^5.0.0-beta.5",
"#nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"#types/moment": "^2.13.0",
"angular-ssr": "^0.10.40",
"angular2-universal": "^2.1.0-rc.1",
"body-parser": "^1.18.2",
"braintree-web": "^3.26.0",
"core-js": "^2.4.1",
"moment": "^2.20.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},