Conditional import of Electron/NodeJS libs - The app can be launch in browser mode

src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './components/home/home.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
-import { ipcRenderer } from 'electron';
+import { ElectronService } from './providers/electron.service';
-import * as childProcess from 'child_process';
 
 @Component({
   selector: 'app-root',
@@ -8,10 +7,16 @@ import * as childProcess from 'child_process';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor() {
+  constructor(public electronService: ElectronService) {
+
+    if(electronService.isElectron()) {
+      console.log('Mode electron');
       // Check if electron is correctly injected (see externals in webpack.config.js)
-    console.log('c', ipcRenderer);
+      console.log('c', electronService.ipcRenderer);
       // Check if nodeJs childProcess is correctly injected (see externals in webpack.config.js)
-    console.log('c', childProcess);
+      console.log('c', electronService.childProcess);
+    } else {
+      console.log('Mode web');
+    }
   }
 }

src/app/app.module.ts

@@ -1,13 +1,17 @@
+import 'zone.js';
+import 'reflect-metadata';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './components/home/home.component';
 
 import { AppRoutingModule } from './app-routing.module';
 
+import { ElectronService } from './providers/electron.service';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -19,7 +23,7 @@ import { AppRoutingModule } from './app-routing.module';
     HttpModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [ElectronService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/home/home.component.scss

@@ -2,7 +2,7 @@
   color: black;
   margin:0;
   padding:50px 20px;
-  background: url(../../assets/background.jpg) no-repeat center fixed;
+  background: url(../../../assets/background.jpg) no-repeat center fixed;
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
   background-size: cover; /* version standardisée */
 }

src/app/components/home/home.component.spec.ts

@@ -26,7 +26,7 @@ describe('HomeComponent', () => {
    it(`should have as title 'App works !'`, async(() => {
     const fixture = TestBed.createComponent(HomeComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('aApp works !');
+    expect(app.title).toEqual('App works !');
   }));
 
   it('should render title in a h1 tag', async(() => {

src/app/providers/electron.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ElectronService } from './electron.service';
+
+describe('ElectronService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ElectronService]
+    });
+  });
+
+  it('should ...', inject([ElectronService], (service: ElectronService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/providers/electron.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+import { ipcRenderer } from 'electron';
+import * as childProcess from 'child_process';
+
+@Injectable()
+export class ElectronService {
+
+  ipcRenderer: typeof ipcRenderer;
+  childProcess: typeof childProcess;
+
+  constructor() {
+    if (this.isElectron()) {
+      this.ipcRenderer = window.require('electron').ipcRenderer;
+      this.childProcess = window.require('child_process');
+    }
+  }
+
+  isElectron = () => {
+    return window && window.process && window.process.type;
+  }
+
+}