ElectronアプリのAngular2エラー：PlatformRefのプロバイダがありません

私は、既存の電子アプリケーションで非常に基本的なangular2を実行しようとしています。 Typescriptファイルは正常にjsコードにコンパイルされ、電子はうまく動作しています。必要なファイルはすべてindex.htmlに含まれています。しかし、私はいつもアプリの起動中にエラーが発生しました - PlatformRefのプロバイダはありません！ElectronアプリのAngular2エラー：PlatformRefのプロバイダがありません

私はすでにこのリンクをチェックしていますNo provider for PlatformRef error after upgrading to Angular2 RC5 in IE10

私はES6-シムの依存関係を持っていない、TSパッケージの私のバージョンは2.0.3（最新）です。

これは私が持っているものです。

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

感謝します。

出典

2016-10-19 Vladimir Melekh