Property does not exist issue running Angular2 ver.2.0.0-alpha.44

Question

New to Angular2, trying to get this plunkr project running on my local system. I'm getting the following errors:

Error:(25, 23) TS2339: Property 'people' does not exist on type 'PeopleService'. Error:(26, 39) TS2339: Property 'people' does not exist on type 'People'

on the lines: peopleService.people
.subscribe(people => this.people = people);

I'm reasonably confident I have the environment set up properly as I have other basic components running properly.

people.ts file:

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'  
import {PeopleService} from './peopleService'  
import {Person} from './person'

@Component({  
    selector: 'my-app',  
    providers: [PeopleService]  
})  
@View({
    template: `
    <div>
      <h2>Hello Angular2!</h2>
      <my-person
        *ng-for="#person of people"
        [name]="person.name"
        (hello)="saidHello($event)">
      </my-person>
    </div>
  `,  
        directives: [CORE_DIRECTIVES, Person]  
})  
export class People {  
    constructor(public peopleService:PeopleService) {  
        peopleService.people  
            .subscribe(people => this.people = people);  
    }  
    saidHello($event){  
        alert(`You said hello to ${$event}`)  
    }
}

Similar error in the peopleService.ts file:

Error:(8, 14) TS2339: Property 'people' does not exist on type 'PeopleService'.

//a simple service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Injectable()
export class PeopleService {
  constructor(http:Http) {
    this.people = http.get('api/people.json').map(res => res.json());
  }
}

Any guidance would be greatly appreciated!

Yaniv, I'm still working thru this, below is the exception after implementing the change.  Also, I didn't notice this before but I'm getting a warning in the people.ts file on the following statements:
    [name]="person.name"
    (hello)="saidHello($event)">

warning Attribute [name] not allowed here
Attribute (hello) not allowed here

EXCEPTION: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.
angular2.dev.js:21835 EXCEPTION: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.BrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 Error: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.
    at NoAnnotationError.BaseException [as constructor] (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:16034:21)
    at new NoAnnotationError (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4983:14)
    at _dependenciesFor (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:20066:13)
    at resolveFactory (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:19964:22)
    at Object.resolveProvider (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:19983:66)
    at Function.DirectiveProvider.createFromProvider (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:23906:27)
    at Function.DirectiveProvider.createFromType (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:23915:32)
    at provideDirective (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:27209:49)
    at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:27188:14
    at Array.map (native)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: TypeError: Cannot read property 'location' of undefined
angular2.dev.js:21835 EXCEPTION: TypeError: Cannot read property 'location' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 TypeError: Cannot read property 'location' of undefined
    at angular2.dev.js:19434
    at Zone.run (angular2.dev.js:138)
    at Zone.run (angular2.dev.js:10644)
    at zoneBoundFn (angular2.dev.js:111)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
    at angular2.dev.js:219
    at microtask (angular2.dev.js:10670)
    at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
angular2.dev.js:21835 EXCEPTION: TypeError: Cannot read property 'hostView' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 TypeError: Cannot read property 'hostView' of undefined
    at tick (angular2.dev.js:19626)
    at Zone.run (angular2.dev.js:138)
    at Zone.run (angular2.dev.js:10644)
    at zoneBoundFn (angular2.dev.js:111)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
    at angular2.dev.js:219
    at microtask (angular2.dev.js:10670)
    at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301

EDIT:

Simplified version of PeopleService

//a simple service import {Injectable} from 'angular2/angular2';

@Injectable() export class PeopleService {
    people: any;
    constructor() {
        this.people = [
            {"id": 1, "name": "Brad"},
            {"id": 2, "name": "Jules"},
            {"id": 3, "name": "Jeff"}
        ]
    } }

Basically what the error says, add `people: Observable` before the constructor in your `PeopleService`, like `class PeopleService { people: Observable; constructor(...) {} }`. *PS: I don't know for sure if Observable is the correct type, but that's what you were missing* — Eric Martinez, Nov 06 '15 at 21:08
That eliminated the error in PeopleService, however it produced a new error in people.ts. Error:(26, 14) TS2339: Property 'subscribe' does not exist on type 'Observable'. — Tim W., Nov 06 '15 at 21:19
Also, any idea why the plunkr example works without adding this? Thx — Tim W., Nov 06 '15 at 21:20
Problem with typings in Observables were fixed in `RxJS 5.0.0-alpha.7`, so you should try upgrading it. In the plnkr works because the browser doesn't understand TypeScript. Remember that your TypeScript file is getting transpiled (compiled/translated/etc) to plain javascript, and as far as I know [javascript is weak typed](http://stackoverflow.com/questions/964910/is-javascript-an-untyped-language) — Eric Martinez, Nov 06 '15 at 21:33
@Yaniv, No but I did simplify it for this example. Added the updated service for reference. — Tim W., Nov 09 '15 at 18:28

Yaniv Efraim · Answer 1 · 2015-11-09T05:12:04.810

11

The error is caused by Typescript compiler. You have to define people as a member of PeopleService:

 //a simple service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';

@Injectable()
export class PeopleService {
  people: any;//-> this part is missing in your code.
  constructor(http:Http) {
    this.people = http.get('api/people.json').map(res => res.json());
  }
}

I'm not sure what type off array is it so I made it any. Anyway, it should be defined as a class member.

EDIT:

In response to the your edit with the error in PeopleService. Try to update your component to inject People service like that:

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {Inject} from 'angular2/core'; 
import {PeopleService} from './peopleService'  
import {Person} from './person'

@Component({  
    selector: 'my-app',  
    providers: [PeopleService]  
})  
@View({
    template: `
    <div>
      <h2>Hello Angular2!</h2>
      <my-person
        *ng-for="#person of people"
        [name]="person.name"
        (hello)="saidHello($event)">
      </my-person>
    </div>
  `,  
        directives: [CORE_DIRECTIVES, Person]  
})  
export class People {
    public peopleService: PeopleService;   

    constructor(@Inject(PeopleService) peopleService:PeopleService) {  
      this.peopleService = peopleService;  
      this.peopleService.people  
            .subscribe(people => this.people = people);  
    }  
    saidHello($event){  
        alert(`You said hello to ${$event}`)  
    }
}

Pay attention to the @Inject(PeopleService) inside your constructor and the new import of it:

import {Inject} from 'angular2/core';

I recommend to read this awesome post about dependency injection in Angular 2, it helped me a lot!

edited Nov 09 '15 at 05:12

answered Nov 06 '15 at 22:33

Yaniv Efraim

6,633
7
53
96

Thanks Yaniv, that took care of the compiler errors however I'm still getting runtime exceptions "EXCEPTION: Cannot resolve all parameters for PeopleService(?). Make sure they all have valid type or annotations." I need to debug this further. – Tim W. Nov 07 '15 at 14:22
Can you please add some more details about the error? – Yaniv Efraim Nov 07 '15 at 18:41
Please see my updated response. I hope it will solve your problem! – Yaniv Efraim Nov 09 '15 at 05:13
When I load this code verbatim into my Webstorm IDE I get the original error "TS2339: Property 'people' does not exist on type 'People'. Do you see this in your IDE? Thanks for the pointer to the post! – Tim W. Nov 09 '15 at 17:27
@TimW. Did you add private people member on your service? – Yaniv Efraim Nov 09 '15 at 17:29
No but I did simplify it for this example. Added the updated service for reference. – Tim W. Nov 09 '15 at 18:29
@TimW. It is hard to track your problem like this. I would suggest to invest few minutes and build a Plunker with an example. This way you could isolate your problem + get help from the community. In plunker you can choose to add Angular 2.0 and everything is ready for you - it is few minutes setup but it worth it! – Yaniv Efraim Nov 09 '15 at 19:14
Thanks a lot ... Working fine – Gopinath Kaliappan Oct 26 '17 at 17:00

score 0 · Answer 2 · answered Nov 10 '15 at 04:46

@Yaniv, here is the new plunkr.

Like the previously reference plunkr, this one doesn't exhibit errors. Exceptions only occur in my local environment which uses tsc and live-server.

I discovered in my local env the exception would come and go depending on which file I touched last (no functional change). For instance if I touched peopleservice.ts (and saved), the app would work fine however if I touched people.ts....I get the exception.

I modified the system config (config.js), adding a map definition and changing the package defaultextension to ts. This seems to have had a positive impact on the loader as now I never get the exception in my local environment. App runs fine just like in the plunkr env.

System.config({

    // New configuration
    transpiler: 'typescript',
    typescriptOptions: {
        emitDecoratorMetadata: true
    },

    map: { //map tells the System loader where to look for things
        people: "./src"
    },

    packages: { people: { main: './app.ts', defaultExtension: 'ts' }}

    // Original configuration
//    packages: {'app': {defaultExtension: 'js'}}
});

The Webstorm IDE still highlights "property people does not exist on type..." errors in people.ts and peopleservice.ts unless you add people as a member per your suggestion. Adding people as member eliminates the IDE error however it doesn't seem to have an impact on execution.

@Yaniv, thanks for your help. I'm not totally confident I understand why the system.config changes made the difference in my local env and there still may be an underlying issue. — Tim W., Nov 10 '15 at 14:52

Property does not exist issue running Angular2 ver.2.0.0-alpha.44

2 Answers2