奇怪的是无法访问查询＆＃39; null错误

时间：2016-05-10 16:58:25

标签： typescript angular

这个错误是什么？可以从更具描述性的错误中受益，但这让我迷失了。它没有提到任何我已经完成的事情，它只是发生了。该代码在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) { } 
}

此外，所有角度文件都已正确加载。这是错误的堆栈跟踪：

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>

2 个答案:

答案 0 :(得分：3)

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

答案 1 :(得分：2)

确保您的打字稿配置与您的模块配置（也称为模块101）相匹配。问题是原始模块设置是以SystemJS完成的，但module选项设置为tsconfig.json中的'commonjs'。难怪它真的太疯狂了，虽然'SystemJS'应该为'commonjs'进行pollyfill而且它有，但仍然有这个疯狂的错误。

<强>更新

将您的tsconfig.json文件更改为：

//if planning to build a release bundle, remember to use the following on top of every .ts file if using this configuration.
//use /// <amd-module name="your .ts file path from site root" /> for a named system.register (module: "system") or define (module: "amd")
{
  "compileOnSave": true,
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "amd",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "target": "es3" //or es5, es6 if you can
  }
}

此外，您可能还想排除node_modules和typings，我不需要：

...
exclude: ["node_modules", "typings"]
...

此处的一个技巧是不使用commonjs作为值module，因此您可以使用amd或system。就我而言，由于systemjs-builder的发布构建过程，我选择了amd以便不包含任何模块加载器。

以下是systemjs配置，我仅用于DEV环境：

System.config({
    defaultJSExtensions: true,
    baseURL: '/',
    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'
    }
});
相关问题
最新问题