CODEWITHSUNDEEP
javascriptangulartypescript
OCDDev
OCDDev

Reputation: 307

TypeError: Cannot read property 'index' of null in Angular2

I am receiving the above error in the console of the Chrome browser, and I am at a loss as where to look and what too do. The complete stack trace looks like this: 

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)

My app.module.ts is this:

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

The referenced app component looks like this:

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

I do not know if it is needed, but here is the 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 typescript configurations, as requested:

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

Upvotes: 1

Views: 834

Answers (2)

OCDDev
OCDDev

Reputation: 307

The .csproj had

<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>,

but I had updated to 2.3. Changing the above line to reflect this has fixed the error I was receiving.

Upvotes: 1

therebelcoder
therebelcoder

Reputation: 1018

Not really familiar with .csproj files, but I reckon they function as the tsconfig. I would try setting:

<TypeScriptModuleKind>es2015</TypeScriptModuleKind>

Do not know for sure if you need to cap it for your IDE.

Upvotes: 0

Related Questions