TypeError:无法读取属性' index'在Angular2中为null

时间:2017-05-12 20:20:37

标签: javascript angular typescript

我在Chrome浏览器的控制台中收到了上述错误,我不知道在哪里看,也有什么。完整的堆栈跟踪如下所示:

ERROR TypeError: Cannot read property 'index' of null
    at ComponentFactory_.create (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:9896:101)
    at ComponentFactoryBoundToModule.create (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:3434:29)
    at ApplicationRef_.bootstrap (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:5017:57)
    at eval (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:4806:79)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:4806:42)
    at eval (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:4768:27)
    at ZoneDelegate.invoke (http://localhost:63770/node_modules/zone.js/dist/zone.js:365:26)
    at Object.onInvoke (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:4135:37)
    at ZoneDelegate.invoke (http://localhost:63770/node_modules/zone.js/dist/zone.js:364:32)
    at Zone.run (http://localhost:63770/node_modules/zone.js/dist/zone.js:125:43)
    at http://localhost:63770/node_modules/zone.js/dist/zone.js:758:57
    at ZoneDelegate.invokeTask (http://localhost:63770/node_modules/zone.js/dist/zone.js:398:31)
    at Object.onInvokeTask (http://localhost:63770/node_modules/@angular/core/bundles/core.umd.js:4126:37)
    at ZoneDelegate.invokeTask (http://localhost:63770/node_modules/zone.js/dist/zone.js:397:36)

我的app.module.ts就是这样:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GPAEnterpriseAppComponent } from './gpaenterprise-app.component';
@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        GPAEnterpriseAppComponent
    ],
    providers: [],
    bootstrap: [GPAEnterpriseAppComponent]
})
export class AppModule { }

引用的app组件如下所示:

import { Component } from '@angular/core';
@Component({
    selector: 'gpa-enterprise-app',
    template: '<h1>We are here</h1>'
})
export class GPAEnterpriseAppComponent {
}

我不知道是否需要它,但这里是package.json:

  "version": "1.0.0",
  "name": "gpa_enterprise",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.1",
    "typescript": "^2.3.2",
    "typings": "^2.1.1"
  },
  "dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@angular/router": "^4.1.2",
    "@angular/upgrade": "^4.1.2",
    "angular2-in-memory-web-api": "^0.0.21",
    "core-js": "^2.4.1",
    "primeng": "^4.0.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.0",
    "systemjs": "^0.20.12",
    "zone.js": "^0.8.10"
  },
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings",
    "cmd": "npm typescript"
  }
}

.csproj打字稿配置,按要求:

    <PropertyGroup>
    <TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>System</TypeScriptModuleKind>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
    <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
  </PropertyGroup>

2 个答案:

答案 0 :(得分:1)

.csproj有

<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>, 

但我已更新到2.3。更改以上行以反映这一点已修复了我收到的错误。

答案 1 :(得分:0)

不熟悉.csproj文件,但我认为它们可以作为tsconfig使用。我会尝试设置:

<TypeScriptModuleKind>es2015</TypeScriptModuleKind>

不确定是否需要为IDE设置上限。