CODEWITHSUNDEEP
angular
Mohy Eldeen
Mohy Eldeen

Reputation: 1330

EXCEPTION: TypeError: Cannot read property 'subscribe' of undefined after Upgrade

I have an angular 2 application that I upgraded today from beta1 to beta16. It works fine on beta1, but not on the 16. I get this error: 

angular2.dev.js:24821 TypeError: Cannot read property 'subscribe' of undefined
    at AppView._View_ApplicationForm0.createInternal (ApplicationForm.template.js:825)
    at AppView.create (angular2.dev.js:22641)
    at AppView._View_Home5.createInternal (Home.template.js:509)
    at AppView.create (angular2.dev.js:22641)
    at TemplateRef_.createEmbeddedView (angular2.dev.js:4186)
    at ViewContainerRef_.createEmbeddedView (angular2.dev.js:5742)
    at NgIf.Object.defineProperty.set [as ngIf] (angular2.dev.js:10003)
    at AppView._View_Home0.detectChangesInternal (Home.template.js:848)
    at AppView.detectChanges (angular2.dev.js:22811)

I have an example on plnkr that is working just fine, but this does not work on my local. Only works on beta1. Here is my plnkr:

http://plnkr.co/edit/eZJYOVsvFeglfJmuIHpp?p=preview

app.ts

import {Component} from 'angular2/core'
import {Form} from 'src/frm'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <frm (submitted) = "submitted()"></frm>
    </div>
  `,
  directives: [Form]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }

  submitted(){
    console.log('clicked');
  }
}

frm.ts

import {Component, EventEmitter} from 'angular2/core'

@Component({
  selector: 'frm',
  providers: [],
  template: `
    <div>
      <h2>Form</h2>
      <button (click) = "clicked()">Go</button>
    </div>
  `,
  directives: [],
  outputs: ['submitted', 'canceled']
})
export class Form {

  submitted: EventEmitter<any> = new EventEmitter<any>();

   canceled: EventEmitter<any> = new EventEmitter<any>();

  constructor() {

  }

  clicked(){
    this.submitted.emit(null);

  }
}

If I remove the event binding, it will work. Like this: 

<frm></frm>

Here is my package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular": "~1.5.0",
    "angular-animate": "~1.5.0",
    "angular-aria": "~1.5.0",
    "angular-material": "~1.0.5",
    "angular-ui-bootstrap": "~1.1.2",
    "angular2": "2.0.0-beta.16",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "jquery": "~2.2.0",
    "ng2-bootstrap": "~1.0.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  }
}

Upvotes: 1

Views: 2529

Answers (3)

Mohy Eldeen
Mohy Eldeen

Reputation: 1330

the issue was that I am missing the implements keyword.

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202196

I think that the problem could be related to the instantiation of your outputs. Here is the right way to do (the one from your working pkunkr):

submitted: EventEmitter<any> = new EventEmitter<any>();

According to the error, Angular2 can't subscribe in them since they are undefined. Are you sure that they instantiated the same way in tour local code?

Upvotes: 3

siva636
siva636

Reputation: 16441

There seems to be a couple of bugs in your app.js file:

(1) Declare the name variable at the top of the class before access it, something like: name:string;

(2) Import should be like this: import {Form} from './frm'

Upvotes: 1

Related Questions