Visual Studio configuration

[tkignParticipant]

hello,
i am trying to run jqwidgets-ts and angular2 with visual studio 2015.
i have visual studio 14.0.25431.01 update 3, typescript 1.8.36.0 and angular 2.0.
if i just code the quickstart-tutorial from angular2, it work´s.

but if i try to add e.g. “import {jqxButtonComponent} from “jqwidgets-framework/jqwidgets-ts/angular_jqxbutton”;” in the app.ts (code follows) i get error from typescript compiler “error TS6059: File ‘../node_moduleswidgets-fis not under ‘rootDir’ ‘WWW/src/ts’. ‘rootDir’ is expected to contain all source files” twice (don´t know why twice exactly the same error).

tsconfig.json:

{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“moduleResolution”: “node”,
“sourceMap”: false,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“removeComments”: true,
“noImplicitAny”: false,
“suppressImplicitAnyIndexErrors”: true,
“outDir”: “www/dist/js”,
“rootDir”: “www/src/ts”
},
“exclude”: [
“node_modules”,
“www/dist”
],
“compileOnSave”: true
}

Here the code from app.ts:

Working:

import { NgModule } from “@angular/core”;
import { BrowserModule } from “@angular/platform-browser”;

import { AppComponent } from “./components/componentGlobal”;

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

Not Working:

import { NgModule } from “@angular/core”;
import { BrowserModule } from “@angular/platform-browser”;

import {jqxButtonComponent} from “jqwidgets-framework/jqwidgets-ts/angular_jqxbutton”;

import { AppComponent } from “./components/componentGlobal”;

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent,
jqxButtonComponent],
bootstrap: [AppComponent]
})

export class AppModule { }

thanks for your help

[Ivo ZhulevParticipant]

Hi tkign,

That’s is probably because you have pointed a ‘rootDir’ in your ‘tsconfig’ file and the TS compiler wants all .ts files to be in it. You are also using the newly released Angular 2 module syntax which we don’t support yet. But it wont be long till we do, so my advice is to look again at our demos in the Angular 2 start page and use the syntax and configuration there or wait a bit and use the new module syntax.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[tkignParticipant]

Hi Ivo Zhulev,

I can wait for your next Version

Thank you!

[tkignParticipant]

Hello again,

now with Version 4.3.0 i got two types of Errors.
First “Build:Module ‘”…./node_modules/@angular/http/index”‘ has no exportet member ‘noop”. in all jqwidgets-ts files.
And second type is “Build:Class ‘jqxComboBoxComponent” incorrectly implements Interface ‘ControleValueAccessor’. theses “incorrect implements” error are in many jqxwidgets-ts files.

same version as in my first post but typescript 2.0.2
i just added the jqwidgets-ts folder to my components. no coding with jqwidgets-ts nothing importet just translate with typescript.

this is my packe.json:

{
“version”: “1.0.0”,
“name”: “tkign”,
“private”: true,
“dependencies”: {
“@angular/common”: “2.0.0”,
“@angular/compiler”: “2.0.0”,
“@angular/core”: “2.0.0”,
“@angular/forms”: “2.0.0”,
“@angular/http”: “2.0.0”,
“@angular/platform-browser”: “2.0.0”,
“@angular/platform-browser-dynamic”: “2.0.0”,
“@angular/router”: “3.0.0”,
“@angular/upgrade”: “2.0.0”,
“systemjs”: “0.19.27”,
“jquery”: “3.1.0”,
“bootstrap”: “3.3.7”,
“core-js”: “2.4.1”,

“@types/core-js”: “0.9.33”,
“reflect-metadata”: “^0.1.3”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “^0.6.23”
}
}

if you need something else from my code, please let me know

thank you for your help

[Ivo ZhulevParticipant]

Hi tkign,

Thanks for your feedback

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[luisvieParticipant]

Hello,

I’m trying to run jqwidgets-ts and angular2 with visual studio 2015, but I can’t get it.
Is there any basic vs2015 solution on github for this purpose?

Thanks in advanced,
Luis

[Ivo ZhulevParticipant]

Hi luisvie,

If you are using JIT compilation all you need to do is open the package.json file in VS, and it will automatically install all the packages.

If you are using AOT compilation first do the same as in JIT. Then all that’s left is to do a npm start. From VS you can do that by installing some plugin like this one: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[luisvieParticipant]

Thanks Ivo, but doesn’t work.

I created my solution like described on angular.io cookbook:
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

root
— app
— main.ts
— app.module.ts
— app.component.ts
index.html
package.json
systmjs.config.js
tsconfig.json

This basic project run correctly.

Then I copied jqwidgets and jqwidgets-ts folders on root.

What must I do after that?

Thanks a lot!

[Ivo ZhulevParticipant]

Hi luisvie,

Your structure is okay. You just need to make/add the correct config/code to the files.
This is JIT compilation, so check this guide:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angular2/angular2.htm

P.S. When you are ready with the package.json file update the packages to their latest versions before installing them.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts