Solved: Can't seem to reference Classes correctly: n00b to basic Ionic 2 and Typescript

I am getting started with ionic, still green around the gills, and starting with ionic 2. But I am stuck right at the beginning. I can’t seem to reference in app.component.ts a class I wrote.

In the screenshot:

  • I import the class (no error): “import { CurrentUser } from ‘service/currentUser’;”
  • I can reference it in one place (no error): “@Component({ templateUrl: ‘app.html’, providers: [CurrentUser] })”
  • But in the MyApp class I can’t seem to reference it (the error): “user: CurrentUser;”
    Why can Angualr2 find the class in one part of the file but not in another?

Cordova CLI: 6.4.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 2.0.0=rc1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 2.1.4
OS:
Node Version: v6.9.1

The CurrentUser class has an error with “@Injectable” (whatever that means) despite enabling ExperimentalDecorators in tsconfig.json (and referencing a local version of typescript in .vscode/settings.json to try to avoid Visual Code using it’s own version). But other than that, it seems like a basic class at this point.

Do you have any idea why I can reference the class in one part of the file but not in a different part of that same file? It might help you to know that I really don’t have a good understanding of what typescript is either…

Thank you for your help!

First screenshot

Providers must be declared inside Module, not inside the class.

and also declare correctly the path of your class

Second screenshot

Try to install Angular 2 TypeScript. Here’s my list of extensions installed.

image

Thanks for the help, Ellezo!

I tried changing the import path reference to use ‘./service/currentUser’ instead of ‘service/currentUser’ before, and that didn’t seem to change anything. But I didn’t try changing what Ionic generated - “@Component” to “@NgModule” (tho to be fair, Ionic didn’t add in that “providers” item, I did…)

If I change “@Component” to “@NgModule” I get an error that “templateUrl is not an assignable parameter of type NgModule”. So I get an additional error with NgModule compared to Component. So I don’t think the “provider” in the “@Component” decorator is the bug. I wonder if maybe it’s the “@Injectable” bit in the CurrentUser class?

vs

And I actually had that Angular 2 Typescript Snippets extension already just by chance, but I don’t know how to use extensions, so I just put that off to the side for me to figure out later. I went and installed all of those extensions you showed tho. Any tips are welcome!

I think I found the solution, and the problem seems to be due to my unfamiliarity with TypeScript.

I changed the suffix of my class file to “.ts” instead of “.js”. That caused a bunch of new errros tha tI had to fix, but I’ve almost got those fixed now.

So note to self: pay attention to file names!

Sorry for the red-herring, and thanks again for the help!