Typescript 怪异的罐头'；t访问'；查询'；零误差

这是什么错误？可以从更具描述性的错误中获益，但这让我迷失了方向。它没有提及我做过的任何事情，只是碰巧发生了。代码在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>

System.config({
defaultJSExtensions:true，
baseURL:'lib/src/scripts'，
地图：{
“@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_模块/rxjs”
}
});

在我的例子中，我通过设置typescript选项

--emitdecoratormatata

解决了这个问题，希望它能帮助一些人。

确保您的typescript配置与您的模块配置（也称模块101）匹配。问题是最初的模块设置是作为

SystemJS

完成的，但

tsconfig.json

中的

module

选项设置为“commonjs”。难怪这太疯狂了以至于不可能是真的，尽管“SystemJS”应该为“commonjs”付费，但仍然存在这个疯狂的错误

更新

将

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

这里的一个技巧是不使用

commonjs

作为值

模块

，因此可以使用

amd

或

系统

。在我的例子中，由于使用

systemjsbuilder

发布构建过程，我选择

amd

，以便不包含任何模块加载程序

以下是我仅用于开发环境的

systemjs

配置：

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'
    }
});

---

如果删除

elm:ElementRef

构造函数参数，错误会消失吗？哇！是的。怎样？我以前使用过

ElementRef

，但从未发生过这种情况。我想导入

ElementRef

不会有太多错误。我猜你的配置有问题。该错误表示DI解析或传递依赖项时出现问题（不确切知道，但该错误始终与DI相关）。在使用

ElementRef

之前是否有任何特定的提供程序设置？@Harry我想我在中的某个地方提到过，因此我现在回到beta.15。捆绑也是一个问题，无法找出所有的RC1文件，在混合中添加了

索引

，以及如何捆绑它们。在Visual Studio中，您的解决方案无法生成。如果你没有那个配置，TSC会抱怨的。我只是一个初学者，所以当你说“原始模块设置”时，设置在哪里？我指的是Angular2设置。如果您看过他们的教程，他们会将SystemJS脚本设置为在浏览器中运行。这里的问题是typescript正在传输CommonJS。我从来没有弄明白为什么会发生错误，特别是因为SystemJS为CommonJS做了pollyfill。

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'
    }
});