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

Question

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

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 有一些依赖性，显然这个版本更改不向后兼容我的应用程序。

如果有人有解释...

Answer 1

我遇到了同样的问题并回滚到@angular/router-3.0.0-beta.2(在升级到 rc.1 之后)，删除了 node_modules/@angular/router 的文件夹并安装了 beta.2，无需更改其他包并删除错误并恢复业务。看完后:Angular Router Developer Documentation并注意到实质性差异，以及 angular/modules/@angular/router github repo 上的更改日志，有实质性的变化，回滚是最快的修复。我的 package.json 和 app.component.ts/main.ts 基本相似。我也一直在关注这个话题: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: '/' })]);