inject right performance api depending on platform

server.ts

@@ -9,6 +9,7 @@ import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
 
 import { performance } from 'perf_hooks';
+import { PERFORMANCE_API } from 'src/app/app.module';
 
 console.log('performance.now() is working in server.ts => ', performance.now());
 
@@ -36,7 +37,14 @@ export function app(): express.Express {
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+    res.render(indexHtml, {
+      req,
+      providers: [
+        { provide: APP_BASE_HREF, useValue: req.baseUrl },
+        { provide: PERFORMANCE_API, useValue: performance },
+
+      ]
+    });
   });
 
   return server;

src/app/app.browser.module.ts

@@ -0,0 +1,17 @@
+import { InjectionToken, NgModule } from '@angular/core';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { PERFORMANCE_API } from './app.module';
+
+@NgModule({
+  imports: [
+    AppModule
+  ],
+  providers: [
+    { provide: PERFORMANCE_API, useValue: window.performance },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppBrowserModule {}

src/app/app.component.ts

@@ -1,7 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-
-// with the following line, it doesn't even compile
-// import { performance } from 'perf_hooks';
+import { Component, Inject, OnInit } from '@angular/core';
+import { PERFORMANCE_API } from './app.module';
 
 
 @Component({
@@ -12,9 +10,14 @@ import { Component, OnInit } from '@angular/core';
 export class AppComponent implements OnInit {
   title = 'angular-ssr-demo';
 
+  constructor(
+    @Inject(PERFORMANCE_API) private performance: any
+  ) {}
+
+
   ngOnInit() {
     console.log('lets see if it works in app.component.ts too');
-    console.log('performance.now() is working here too => ', performance.now());
+    console.log('performance.now() is working here too => ', this.performance.now());
   }
 
 }

src/app/app.module.ts

@@ -1,9 +1,11 @@
-import { NgModule } from '@angular/core';
+import { InjectionToken, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+export const PERFORMANCE_API = new InjectionToken('performance-api');
+
 @NgModule({
   declarations: [
     AppComponent
@@ -12,7 +14,5 @@ import { AppComponent } from './app.component';
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
     AppRoutingModule
   ],
-  providers: [],
-  bootstrap: [AppComponent]
 })
 export class AppModule { }

src/main.ts

@@ -1,14 +1,14 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { AppBrowserModule } from './app/app.browser.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+  platformBrowserDynamic().bootstrapModule(AppBrowserModule)
+    .catch(err => console.error(err));
 });