Electron 应用程序中的 Angular2 错误：没有 PlatformRef 提供程序

Question

我正在尝试在我现有的电子应用程序中运行非常基本的 angular2 东西。 Typescript 文件成功编译成 js 代码，electron 运行良好。所有需要的文件都包含在 index.html 中。但我在应用启动过程中总是出错 - No Provider for PlatformRef!

我已经查看了这个链接：No provider for PlatformRef error after upgrading to Angular2 RC5 in IE10

我没有 es6-shim 依赖，我的 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

非常感谢。

Answer 1

我的问题是其中一个文件包含对“q-io/fs”npm 的引用。一旦我删除了这种用法，angular就开始工作了。很奇怪..