未捕获的无效提供者 - 仅允许提供者和类型的实例,得到:[object Object]

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

在另一台机器上安装我的应用程序后,我在浏览器端遇到错误:

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

这似乎与提供商的错误引导有关。但似乎没有什么不对。知道出了什么问题吗?

套餐

"@angular/common": "^2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "^3.0.0-beta.2",
"angular2-meteor": "^0.6.2",
"angular2-meteor-auto-bootstrap": "^0.6.0",
"angular2-meteor-polyfills": "^0.1.1",
"angular2-pagination": "^0.2.1",
"core-js": "^2.4.0",
"es6-shim": "^0.35.1",
"hammerjs": "^2.0.8",
"jquery": "^3.0.0",
"meteor-node-stubs": "~0.2.0",
"reflect-metadata": "0.1.2",
"route-matcher": "^0.1.0",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"

代码

import 'reflect-metadata';
import 'zone.js/dist/zone';
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import { Component, provide, PLATFORM_DIRECTIVES } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { APP_BASE_HREF } from '@angular/common';
import { provideRouter, RouterConfig, Routes, ROUTER_DIRECTIVES } from '@angular/router';

import { Home } from '../imports/business/home';

export const routes: Routes = [{ path: '',  component: Home, data: {prettyName: 'Accueil'} }];

@Component({
  moduleId: module.id,
  selector: 'app',
  template: require('./app.html').default,
  directives: [ROUTER_DIRECTIVES],
})class App{}


bootstrap(App, [
  disableDeprecatedForms(),
  provideForms(),
  provideRouter(routes),
  provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true })
]);

PS:不是完全相同的版本,但是这里抛出异常https://github.com/vicb/angular/blob/b8450fa68f704f5f7f0f119034f5e4242664b172/modules/angular2/src/core/di/provider.ts#L567

编辑 这显然与我更新的“@angular/router”和"angular2-meteor-auto-bootstrap" 版本相关联。 他们对 rc.5 有一些依赖,显然这个版本更改对我的应用程序不向后兼容。

如果有人有解释...

我遇到了同样的问题并回滚到@angular/router-3.0.0-beta.2(升级到 rc.1 后),删除了位于 node_modules/@[=20 的文件夹=] 并安装 beta.2,无需更改其他软件包并删除错误并恢复正常。看了之后:Angular Router Developer Documentation and noting the substantial differences, as well as the change log on the angular/modules/@angular/router github repo, there were substantial changes and rolling back was the quickest fix. My package.json and app.component.ts/main.ts are substantially similar. I have been following this thread as well: Bootstrapping Process for RC5 并做了一些初步尝试来更新新结构,但还没有取得太大进展。不确定这是否有帮助,因为您的包指示相同的 @angular/router 版本。

套餐:

   "@angular/common": "^2.0.0-rc.4",
    "@angular/compiler": "^2.0.0-rc.4",
    "@angular/core": "^2.0.0-rc.4",
    "@angular/forms": "^0.3.0",
    "@angular/platform-browser": "^2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.4",
    "@angular/router": "^3.0.0-beta.2",
    "@angular2-material/button": "^2.0.0-alpha.7-2",
    "@angular2-material/card": "^2.0.0-alpha.7-2",
    "@angular2-material/core": "^2.0.0-alpha.7-2",
    "@ngrx/core": "^1.0.1",
    "@ngrx/router": "^1.0.0-beta.2",
    "adm-zip": "^0.4.7",
    "angular2-blaze-template": "^0.0.1",
    "angular2-file-drop": "^0.0.3",
    "angular2-meteor": "^0.6.2",
    "angular2-meteor-auto-bootstrap": "^0.6.0",
    "angular2-meteor-polyfills": "^0.1.1",
    "angular2-notifications": "^0.2.6",
    "es6-shim": "^0.35.1",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.14.1",
    "ng2-uploader": "^0.5.10",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-beta.11",
    "superagent": "^2.1.0",
    "typings": "^1.3.2",
    "zone.js": "^0.6.12"

代码:

'use-strict';
import 'reflect-metadata';
import { Component, provide } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import { provideRouter, RouterConfig, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginButtons } from './imports/accounts-ui/login-buttons';
import { APP_ROUTER_PROVIDERS, authProvider } from './app.routes';




import template from './app.html';

@Component({
  selector: 'app',
  template,
  directives: [ROUTER_DIRECTIVES, LoginButtons]
})



export class Socially {
}
bootstrap(Socially, [APP_ROUTER_PROVIDERS, authProvider, provide(APP_BASE_HREF, { useValue: '/' })]);