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


#1

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!


#2

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.


#3

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!


#4

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!