Angular-cli: Unable to create OpaqueToken service to bridge Angular2 to JQuery

[amrdarwish1975]

Please provide us with the following information:

OS?

Windows 7 Professional (64 bit)

Versions.

@angular/cli: 1.0.0-rc.0
node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Repro steps.

Was this an app that wasn't created using the CLI? YES
What change did you do on your code? See the following steps
Step 1: Install latest angular cli: npm install -g @angular/cli
Step 2: create a new file & name it jquery.service.ts under app folder with the following contents:
import { OpaqueToken } from '@angular/core';
export const JQ_TOKEN = new OpaqueToken('jQuery');
export declare let jQuery: Object;
// providers
export const JQUERY_PROVIDER = [
{ provide: JQ_TOKEN, useValue: jQuery },
];
Step 3: append the following statements to app.module.ts:
...
import { JQUERY_PROVIDER } from './jquery.service';
@NgModule({
...
providers: [JQUERY_PROVIDER],
...
})
Step 4: Go to system CMD window & cd to project directory & run: ng serve
Step 5: "ng serve" command fails throwing error below

The log given by the failure.

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 4:20 in the original .ts file), resolving symbol jQuery in C:/Projects/HelloWorld/src/app/jquery.service.ts, resolving symbol JQUERY_PROVIDER in C:/Projects/HelloWorld/src/app/jquery.service.ts, resolving symbol AppModule in C:/Projects/HelloWorld/src/app/app.module.ts, resolving symbol AppModule in C:/Projects/HelloWorld/src/app/app.module.ts
webpack: Failed to compile.

Mention any other details that might be useful.

This failure prevents me to bridge Angular2 to JQuery. Kinldy fix or advise a workaround.
Pls refer to attached app.zip file having the 2 files in question: jquery.service.ts, app.module.ts

app.zip

---

Thanks! We'll be in touch soon.

[deebloo]

you are trying to provide an undefined value

export declare let jQuery: Object;

Try the below

import { OpaqueToken } from '@angular/core';

export const JQ_TOKEN = new OpaqueToken('jQuery');

// return the global instance of jquery
export function jQueryFactory() {
  return window['jQuery'];
}
// providers
export const JQUERY_PROVIDER = [
  { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

[amrdarwish1975]

@deebloo I used suggested factory approach above & build error disappeared however another error found whenever I try to reference $ as jquery tag. here is error reported followed by the code I am using through a new component:

Error
EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: this.$ is not a function

Component Code illustrating jquery provider usage

`import { Component, Inject, AfterViewInit } from '@angular/core';
import { JQ_TOKEN } from './jquery.service';

@Component({
templateUrl: './myComponent.component.html',
styleUrls: ['./myComponent.component.css']
})
export class MyComponent implements AfterViewInit {
constructor(@Inject(JQ_TOKEN) private $: any) { }
public ngAfterViewInit(): void{
this.$("#id").modal();
}
}
`

[deebloo]

@amrdarwish1975 did you try after I updated my comment to use a factory?

[deebloo]

Yes I use the same pattern for other global variables

[deebloo]

Sure I'll post it a few (on my way to work)

[deebloo]

@amrdarwish1975 Create a small repo to show it working

https://github.com/deebloo/JQUERY-TOKEN

[deebloo]

@amrdarwish1975 sorry forgot to push the actual provider code :D

[amrdarwish1975]

@deebloo See my updated comment above.

[deebloo]

@amrdarwish1975 I updated the sample repo to show it is working. I think this issue can be closed as it isn't an bug in the cli. (I can still help you debug your issue)

[amrdarwish1975]

@deebloo Just let me check it. Will update issue once done.

[amrdarwish1975]

@deebloo I have just tried it using same code under repo however I encountered error in my browser console log as follows:
_Array [ "jQuery" ]
EXCEPTION: Error in :0:0 caused by: this.$ is not a function_

Notice that the 1st line in above console log is a result of line code "console.log($);" while the 2nd is a result of line of code "this.$('#hi').text('asdfasdf');"

Are you sure you had a look in your browser's console log if there any errors?

[deebloo]

[deebloo]

Yes. the repository is working. make sure you have jquery in your scripts array. I would still say you should close this issue as it isn't a bug with the CLI

[amrdarwish1975]

@deebloo thanks for your support. May I ask how to have jquery in my scripts array?

[deebloo]

https://github.com/angular/angular-cli/wiki/stories-global-lib

[amrdarwish1975]

@deebloo It is working now. I missed to code correctly jqueryFactory under jquery-provider.ts file (should be exactly like you mentioned as return window['jQuery'], in addition I missed to add jquery lib reference under "scripts" of angular-cli.json file.
Many Thanks!

[deebloo]

@amrdarwish1975 no problem. glad it is working!

[RobRoch]

Hello,

At the moment I have same problem.
Going through explanations, it still doesn't work in my app with JQUERY_PROVIDER.

I've uploaded my code, "MovieRating". Hope someone will find few minutes to check this out :).

[amrdarwish1975]

@RobRoch , Did you try proposed code by deebloo? Recalling https://github.com/deebloo/JQUERY-TOKEN

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}