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

Question

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>

I think this might be more a problem of your build. Can you post your tsconfig.json — therebelcoder
– therebelcoder, Commented May 12, 2017 at 20:27
I am not using a tsconfig.json. I have used the .csproj file to configure typescript. I will post the pertinent lines from there, however. — OCDDev
– OCDDev, Commented May 12, 2017 at 20:29
Off topic, but I see you install typings. You should set <TypeScriptMapRoot /> to your directory where they are installed. (with me that is [project-root]/typings/) so they are picked up. — therebelcoder
– therebelcoder, Commented May 12, 2017 at 20:43

OCDDev · Accepted Answer · 2017-05-12 21:34:23Z

1

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.

answered May 12, 2017 at 21:34

OCDDev

3071 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

OCDDev Over a year ago

Me too! It was such an obscure error. If you hadn't asked me for my tsconfig I am not sure I would have found it. :)

therebelcoder Over a year ago

You should accept your own answer. That way it displays as 'answered'

OCDDev Over a year ago

I had to wait for two days to do so. :)

therebelcoder Over a year ago

Oh didn't know that where a waiting time. Cheers!

therebelcoder · Accepted Answer · 2017-05-12 20:37:41Z

0

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.

answered May 12, 2017 at 20:37

therebelcoder

1,02814 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related