Vladimir Melekh Vladimir Melekh - 1 month ago 24
TypeScript Question

Angular2 error in Electron app: No Provider for PlatformRef

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!

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

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..