typescript - 奇怪的无法访问 'query' of null 错误

Question

这是什么错误？可以从更具描述性的错误中受益，但这让我迷路了。它没有提及我所做的任何事情，它只是发生了。该代码在 Angular2 beta.9 中运行，但在升级到 rc1 后，这种情况开始发生。没有对 Angular2 的扩展或解决方案中任何疯狂的东西，只有一个组件:

组件

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

@Component({
    selector: 'login-form',
    templateUrl: '/Home/Login.html'  
})
export class Login {        
    constructor(elm: ElementRef) { } 
}

所有 Angular 文件也被正确加载。这是错误的堆栈跟踪:

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
BrowserDomAdapter.logError 
@ browser_adapter.ts:78 BrowserDomAdapter.logGroup 
@ browser_adapter.ts:89 ExceptionHandler.call 
@ exception_handler.ts:53(anonymous function) 
@ application_ref.ts:304 schedulerFn 
@ async.ts:131 SafeSubscriber.__tryOrUnsub 
@ Subscriber.ts:240 SafeSubscriber.next 
@ Subscriber.ts:192 Subscriber._next 
@ Subscriber.ts:133 Subscriber.next 
@ Subscriber.ts:93 Subject._finalNext 
@ Subject.ts:154 Subject._next 
@ Subject.ts:144Subject.next 
@ Subject.ts:90EventEmitter.emit 
@ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError 
@ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError 
@ ng_zone_impl.ts:90ZoneDelegate.handleError 
@ zone.js:327Zone.runGuarded 
@ zone.js:233_loop_1 
@ zone.js:487drainMicroTaskQueue 
@ zone.js:494ZoneTask.invoke 
@ zone.js:426 browser_adapter.ts:78STACKTRACE:BrowserDomAdapter.logError 
@ browser_adapter.ts:78ExceptionHandler.call 
@ exception_handler.ts:56(anonymous function) 
@ application_ref.ts:304schedulerFn 
@ async.ts:131SafeSubscriber.__tryOrUnsub 
@ Subscriber.ts:240SafeSubscriber.next
@ Subscriber.ts:192Subscriber._next 
@ Subscriber.ts:133Subscriber.next 
@ Subscriber.ts:93Subject._finalNext 
@ Subject.ts:154Subject._next 
@ Subject.ts:144Subject.next 
@ Subject.ts:90EventEmitter.emit 
@ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError 
@ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError 
@ ng_zone_impl.ts:90ZoneDelegate.handleError 
@ zone.js:327Zone.runGuarded 
@ zone.js:233_loop_1 
@ zone.js:487drainMicroTaskQueue 
@ zone.js:494ZoneTask.invoke 
@ zone.js:426
browser_adapter.ts:78Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (application_ref.ts:340)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.ts:67)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.ts:56)BrowserDomAdapter.logError 
@ browser_adapter.ts:78ExceptionHandler.call 
@ exception_handler.ts:57(anonymous function) 
@ application_ref.ts:304schedulerFn 
@ async.ts:131SafeSubscriber.__tryOrUnsub 
@ Subscriber.ts:240SafeSubscriber.next 
@ Subscriber.ts:192Subscriber._next 
@ Subscriber.ts:133Subscriber.next 
@ Subscriber.ts:93Subject._finalNext 
@ Subject.ts:154Subject._next 
@ Subject.ts:144Subject.next 
@ Subject.ts:90EventEmitter.emit 
@ async.ts:117NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError 
@ ng_zone.ts:138NgZoneImpl.inner.inner.fork.onHandleError 
@ ng_zone_impl.ts:90ZoneDelegate.handleError 
@ zone.js:327Zone.runGuarded 
@ zone.js:233_loop_1 
@ zone.js:487drainMicroTaskQueue 
@ zone.js:494ZoneTask.invoke 
@ zone.js:426
zone.js:461 Unhandled Promise rejection: Cannot read property 'query' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'query' of null(…)consoleError 
@ zone.js:461_loop_1 
@ zone.js:490drainMicroTaskQueue 
@ zone.js:494ZoneTask.invoke 
@ zone.js:426
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null(…)

更新

这是配置:

  <script src="/node_modules/es6-shim/es6-shim.js"></script>
    <script src="/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.js"></script>

    <script type="text/javascript">
            System.config({
                defaultJSExtensions: true,
                baseURL: 'lib/src/scripts',
                map: {
                    '@angular/common': '../../node_modules/@angular/common/index',
                    '@angular/core': '../../node_modules/@angular/core/index',
                    '@angular/compiler': '../../node_modules/@angular/compiler/index',
                    '@angular/http': '../../node_modules/@angular/http/index',
                    '@angular/platform-browser': '../../node_modules/@angular/platform-browser/index',
                    '@angular/platform-browser-dynamic': '../../node_modules/@angular/platform-browser-dynamic/index',
                    '@angular/router': '../../node_modules/@angular/router/index',
                    'rxjs': '../../node_modules/rxjs'
                }
            });
    </script>

Answer 1

在我的例子中，我通过设置 typescript 选项 --emitDecoratorMetadata 解决了这个问题，希望它能帮助一些人。