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.
