Tìm kiếm trang web

typescript - Lỗi lạ không thể truy cập 'query' của null

Lỗi này để làm gì? Có thể sẽ hữu ích hơn nếu có một thông báo lỗi mô tả chi tiết hơn, nhưng điều này khiến tôi bối rối. Nó không liên quan đến bất cứ thứ gì tôi đã làm, và nó chỉ xảy ra. Mã đã hoạt động trong Angular2 beta.9 nhưng sau khi nâng cấp lên rc1, điều này bắt đầu xảy ra. Không có tiện ích mở rộng nào cho Angular2 hay bất cứ thứ gì phức tạp trong giải pháp, chỉ là một component:

Thành phần

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

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

Ngoài ra tất cả các tệp Angular đều được tải đúng cách. Đây là lần theo dấu ngăn xếp của lỗi:

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(…)

Cập nhật

Đây là cấu hình:

  <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>

Câu trả lời #1

Trong trường hợp của tôi, tôi đã giải quyết vấn đề này bằng cách thiết lập tùy chọn TypeScript --emitDecoratorMetadata, hy vọng nó sẽ giúp được một số người.

Câu trả lời #2

Đảm bảo cấu hình TypeScript của bạn khớp với cấu hình module của bạn (hay còn gọi là modules 101). Vấn đề là thiết lập module ban đầu được thực hiện dưới dạng SystemJS nhưng tùy chọn module lại được đặt là 'commonjs' trong tsconfig.json. Không có gì ngạc nhiên khi nó trở nên quá kỳ quặc để tin, mặc dù 'SystemJS' dự kiến sẽ hỗ trợ thay thế cho 'commonjs' và nó đã làm, nhưng vẫn còn lỗi kỳ lạ này.

Cập nhật

Thay đổi tệp tsconfig.json của bạn để trông như sau:

//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
  }
}

Ngoài ra, bạn cũng có thể muốn loại trừ node_modules và typings, tôi thì không cần:

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

Một mẹo ở đây là không sử dụng commonjs làm giá trị của module, vì vậy bạn có thể sử dụng amd hoặc system. Trong trường hợp của tôi, do quá trình xây dựng phát hành với systemjs-builder, tôi đã chọn amd để không bao gồm bất kỳ trình tải module nào.

Dưới đây là cấu hình systemjs mà tôi chỉ sử dụng cho môi trường 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'
    }
});

Bài viết liên quan