Cannot find module generated with "Ionic g provider"

Ionic Framework ionic-v3
1

Hello,
I generated a provider with the command “ionic g provider chat” and it created a new folder called “providers” in the folder “app” (so same level as “pages”).

Now in my page I want to import that provider, but it always says “Cannot find module”. I tried all:

import {ChatService} from ‘./providers/chat/chat’;
import {ChatService} from ‘./providers/chat’;
import {ChatService} from ‘…/providers/chat/chat’;
import {ChatService} from ‘./app/providers/chat/chat’;

but nothing. This is my provider:

import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Chat provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ChatService {
  static get parameters() {
    return [Http];
  }

  constructor(http) {
    this.http = http;
    this.data = null;
  }
}

and this the page:

import {Page} from 'ionic-angular';
import {Inject} from 'angular2/core';
import {ChatService} from './providers/chat/chat';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  providers: [ChatService]
})

export class HelloIonicPage {
  
  static get parameters() {
    return [ChatService];
  }
  
  constructor(chat) {
    this.chat = chat;
  }
  
}

Ideas?

2

@Grork The location is relative to the file that you’re importing it to, try this way:

// app/pages/home/home.ts
import {ChatService} from '../../providers/chat/chat';
//                            ^- go another level up, i.e.: app
//                         ^- go one level up, i.e.: pages
3 Likes
3

Sure, I know how paths works, but someone used the absolute path, so idk.

Tomorrow I’ll check, thank you!

4

Hello,
thanks. Now it works.

Do you know why I can’t do this, but I have to use “get parameters()”?

constructor(chat: ChatService) {

I think it’s 'cause page is .js and not .ts, but if I rename it to hello-ionic.ts, in app.js with this code import {HelloIonicPage} from './pages/hello-ionic/hello-ionic'; it can’t find the module.

Are there alternatives to get parameters()? Maybe @Inject? ( I prefere the TS solution above )

5

Because the type annotations are not supported in JavaScript, or as explained here:

What the heck is that static get parameters()? Angular2 is written in TypeScript, and normally depends on types to know what kind of objects to inject into class constructors as part of its dependency injection framework. Since these examples are in JavaScript and not TypeScript, we need a way to tell Angular what “types” of objects should be injected, without actually using types. The way we do this is with the static getter parameters which attaches this type information to the class.

You can use TypeScript instead of JavaScript.

If you want to start a project with TypeScript support then make sure to specify the --ts flag (as JavaScript is currently the default), for converting a JavaScript project to TypeScript follow the steps in the linked post:

1 Like
6

I already had this and it’s still not working.

Screenshot (2)
Screenshot (2).png1366×768 101 KB

7

Hello,

you must point to your file. At the moment you are pointing to the directory.

Instaed ‘…/…/providers/posts-service’ you need ‘…/…/providers/posts-service/posts-service’

Furtermore you need for providers an import and entry in provider section in app.module.ts

vs code has extension that helps importing an checking paths.

I personaly think it is not a good idea that the import hides the .ts, but it is how it is.

Best regards, anna-liebt

1 Like