Angular2 error in Electron app: No Provider for PlatformRef

Question

I'm trying to run very basic angular2 stuff in my existing electron application. Typescript files are successfully compiled into js code, electron is running fine. All needed files are included in index.html. But I always have an error during app start - No Provider for PlatformRef!

I have already checked this link: No provider for PlatformRef error after upgrading to Angular2 RC5 in IE10

I don't have es6-shim dependency, my version of TS package is 2.0.3(latest).

Here is what I have.

system.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '../node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'app',
            'main': 'app/main.bootstrap.js',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            'rxjs': 'npm:rxjs',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.bootstrap.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

main.bootstrap.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './components2/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts:

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {DashboardComponent} from './dashboard.component';

import './rxjs-extensions';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            {
                path: 'dashboard',
                component: DashboardComponent
            },
            {
                path: '',
                redirectTo: '/dashboard',
                pathMatch: 'full'
            }
        ])
    ],
    declarations: [
        AppComponent,
        DashboardComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

app.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><div class="header-bar"></div>',
    styleUrls: ['']
})
export class AppComponent implements OnInit {
    //component initialization
    ngOnInit() {
        //check authentication
    }

    title = 'Test';
}

Index.jade:

doctype html
html
    head(lang="en")
        meta(charset="UTF-8")
        title
        ....
        script(type='text/javascript').
            System.import('systemjs.config.js').then(function () {
                System.import('main');
            }).catch(console.error.bind(console));
    body
        my-app

Many thanks in advance.

Answer 1

My problem was that one of the files contained reference to 'q-io/fs' npm. As soon as I removed this usage, angular started working. Very strange..