“TypeError:在启动angular2-meteor项目时无法读取属性'getLocation'为null”

时间:2016-05-10 13:53:28

标签: meteor typescript angular angular2-meteor

我最近一直在使用angular2-meteor和打字稿,我已经创建了几个项目。

我之前遇到的问题,为了解决这个问题,我删除并重新安装了node_modules和meteor以解决问题。

因为问题再次发生,我发布了这个问题,而不是重新安装所有内容,看看是否有人可以给我一些关于此错误的见解。

总的来说,我按照http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping

所述创建了一个angular2-meteor项目

目前该应用程序非常基础。

我在客户端目录中有一个主app.ts,代码如下:

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

import {MdToolbar} from '@angular2-material/toolbar';

import {Welcome} from './imports/pages/welcome/welcome';
import {Statistics} from './imports/pages/statistics/statistics';


@Component({
   selector: 'app',
   templateUrl: 'client/app.html',
   directives: [ROUTER_DIRECTIVES,MdToolbar],
   providers: [ROUTER_PROVIDERS,provide(APP_BASE_HREF, { useValue: '/' })]
})
@Routes([
 { path: '/', component: Welcome },
 {path: '/statistics',component:Statistics}  
])
class BingoDriveStatisticsApp {

}

bootstrap(BingoDriveStatisticsApp);

如您所见,我有两个视图组件,“欢迎”和“统计”。我现在也在使用angular2-material作为工具栏。

视图组件几乎包含指向空html文件的templateUrl。

示例:welcome.ts

import {Component} from '@angular/core';

@Component({
 templateUrl: '/imports/pages/welcome/welcome.html'
})
export class Welcome {

}

客户端目录中的主index.html文件包含:

<body><app></app></body>

和app.html包含:

<md-toolbar [color]="primary">
    <span>BingoDrive Statistics</span>&nbsp;
    <a [routerLink]="['/']">Welcome</a>
    <a [routerLink]="['/statistics']">Statistics</a>
</md-toolbar>
<router-outlet></router-outlet>

再次..我不认为这个错误与我的代码有关,因为它已经发生在其他项目之前。

这是我的package.json:

{
  "name": "bingodrive-statistics",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular2-material/core": "^2.0.0-alpha.4",
    "@angular2-material/toolbar": "^2.0.0-alpha.4",
    "angular2-meteor": "^0.5.5",
    "angular2-meteor-auto-bootstrap": "^0.5.5",
    "es6-shim": "^0.35.0",
    "meteor-node-stubs": "^0.2.3",
    "reflect-metadata": "=0.1.2",
    "rxjs": "=5.0.0-beta.6",
    "zone.js": "^0.6.12"
  }
}

我的.meteor/packages文件包含以下内容:

meteor-base             # Packages every Meteor app needs to have
mobile-experience       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
reactive-var            # Reactive variable for tracker
jquery                  # Helpful client-side library
tracker                 # Meteor's client-side reactive programming library

standard-minifier-css   # CSS minifier run for production mode
standard-minifier-js    # JS minifier run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.
ecmascript              # Enable ECMAScript2015+ syntax in app code

angular2-compilers
barbatus:angular2-runtime
accounts-password

之后......错误信息本身! :)

重复但很长,但主要的例外是:

EXCEPTION: Error in :0:0
VM2668:27 ORIGINAL EXCEPTION: TypeError: Cannot read property 'getLocation' of null
VM2668:27 ORIGINAL STACKTRACE:
VM2668:27 TypeError: Cannot read property 'getLocation' of null
at BrowserPlatformLocation._init (browser_platform_location.js:19)
at new BrowserPlatformLocation (browser_platform_location.js:14)
at DebugAppView.Object.defineProperty.get (BingoDriveStatisticsApp_Host.template.js:35)
at DebugAppView.Object.defineProperty.get (BingoDriveStatisticsApp_Host.template.js:47)
at DebugAppView.Object.defineProperty.get (BingoDriveStatisticsApp_Host.template.js:53)
at DebugAppView.Object.defineProperty.get (BingoDriveStatisticsApp_Host.template.js:59)
at DebugAppView._View_BingoDriveStatisticsApp_Host0.injectorGetInternal (BingoDriveStatisticsApp_Host.template.js:82)
at DebugAppView.AppView.injectorGet (view.js:96)
at DebugAppView.injectorGet (view.js:269)
at ElementInjector.get (element_injector.js:20)
VM2668:27 ERROR CONTEXT:
VM2668:27 
DebugContext {_view: _View_BingoDriveStatisticsApp_Host0, _nodeIndex: 0, _tplRow: 0, _tplCol: 0}

任何想法发生了什么?

更新

我将项目备份到另一个目录,然后删除node_modules并执行meteor npm install --save。之后,该应用程序正常。所以...有些东西打破了应用程序,通过删除node_modules并重新创建它我解决了问题。

所以...我讨厌每次开始一个新项目时这样做。

非常感谢有关该问题的任何信息。

2 个答案:

答案 0 :(得分:0)

尝试更改dev依赖项 &#34; @ angular / platform-b​​rowser&#34;:&#34; ^ 2.0.0-rc.1&#34;,to&#34; angular2-meteor-auto-bootstrap&#34;:&#34; ^ 0.5.5&#34;,

答案 1 :(得分:0)

仅通过更改reflect. metadata和rxjs的package.json解决了路由问题。我们不应该使用最新版本的反射(0.1.3)。 &#34;反映元数据&#34;:&#34; = 0.1.2&#34;, &#34; rxjs&#34;:&#34; = 5.0.0-beta.6&#34;,