javascript - Angular2 显示错误 : TypeError: Cannot read property 'query' of null

Question

我试图在我的组件中实现服务，但它给我一个错误

EXCEPTION: TypeError: Cannot read property 'query' of null
platform-browser.umd.js:962 EXCEPTION: TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8982ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:6075ZoneDelegate.invoke @ zone.js:322Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ core.umd.js:6066ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:971 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
platform-browser.umd.js:962 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'query' of nullBrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__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 @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:962 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3698(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__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 @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
platform-browser.umd.js:962 Error: Uncaught (in promise): TypeError: Cannot read property 'query' of null
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at eval (core.umd.js:8981)
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (core.umd.js:6075)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (core.umd.js:6066)BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3699(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__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 @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.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(…)

我的代码:

包.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.10",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

系统js.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'assets/js/angular2/app', // 'dist',
    '@angular':                   'assets/js/angular2/node_modules/@angular',
    'angular2-in-memory-web-api': 'assets/js/angular2/node_modules/angular2-in-memory-web-api',
    'rxjs':                       'assets/js/angular2/node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

打字.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

文件包含

<script src="assets/js/angular2/node_modules/core-js/client/shim.min.js"></script>
<script src="assets/js/angular2/node_modules/zone.js/dist/zone.js"></script>
<script src="assets/js/angular2/node_modules/reflect-metadata/Reflect.js"></script>
<script src="assets/js/angular2/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="assets/js/angular2/systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ 
    console.error(err); 
  });
</script>

主要.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { FeedsComponent } from 'assets/js/angular2/app/feeds.component';
bootstrap(FeedsComponent);

feeds.component.ts

import { Component } from '@angular/core';
import { FeedsService } from 'assets/js/angular2/app/feeds.service';

@Component({
  selector: 'feeds',
  templateUrl: 'assets/partials/wall/Feeds.html',
  providers: [FeedsService]
})
export class FeedsComponent {
    constructor(private _feedsService: FeedsService) { }
}

feeds.service.ts

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

//@Injectable()
export class FeedsService {
  getFeeds() {
    return [];
  }
}

请让我知道我做错了什么以及如何解决这个问题，它出现在 feeds.service.ts 文件之后，只有当我删除服务代码时它才能正常工作，并且让我知道如何使用 http 调用服务带有传递参数的 angular2。

提前致谢:)

Answer 1

如果您注释了@injectable，则无法将服务注入(inject)到您的组件中，使用@injectable 并且依赖关系将得到解决