Angular 2 setup

[GaryParticipant]

I’m having trouble getting components to render.

I get the following error when app renders:

rror: Error: XHR error (404 Not Found) loading http://localhost:3000/vendor/jqwidgets-ts/angular_jqxbargauge
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34)
Error loading http://localhost:3000/vendor/jqwidgets-ts/angular_jqxbargauge as “../vendor/jqwidgets-ts/angular_jqxbargauge” from http://localhost:3000/app/app.component.js(anonymous function) @ localhost/:33

I then followed instructions found on setup for Angular 2 Jqwidgets. I’m using Angular RC5.

I get no errors in my IDE and when I run npm start”: “tsc && concurrently \”npm run tsc:w\” \”npm run lite\” “, I see no error.

When I drop back to my own component I see everything that I would expect.

If I can provide you with anything from my side please let me know.

Thanks,
Gary

[Peter StoevKeymaster]

Hi Gary,

Actually, the configuration file was using Angular 2 RC 5 until Angular 2 RC 6 was released. The following can be used with Angular 2 RC 5.

/**
 * PLUNKER VERSION (based on systemjs.config.js in angular.io)
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {

    var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
    var routerVer = '@3.0.0-rc.1'; // lock router version
    var formsVer = '@0.3.0'; // lock forms version
    var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides

    //map tells the System loader where to look for things
    var map = {
        'app': 'app',

        '@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
        '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
        '@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
        '@angular/router-deprecated': 'https://npmcdn.com/@angular/router-deprecated' + routerDeprecatedVer,
        'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
        'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
        'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
        'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
    };

    //packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.ts', defaultExtension: 'ts' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };

    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'upgrade',
    ];

    // Add map entries for each angular package
    // only because we're pinning the version with <code>ngVer</code>.
    ngPackageNames.forEach(function (pkgName) {
        map['@angular/' + pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
    });

    // Add package entries for angular packages
    ngPackageNames.concat(['forms', 'router', 'router-deprecated']).forEach(function (pkgName) {

        // Bundled (~40 requests):
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };

        // Individual files (~300 requests):
        //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        defaultJSExtensions: true,
        typescriptOptions: {
            tsconfig: true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

Best Regards,
Peter Stoev

[GaryParticipant]

Peter,

Works!!!! Thanks………

[PrashantParticipant]

Team,

I am trying to setup jQwidgets on Angular2.0-rc5 but facing difficulty while installing npm packages.

Can somebody share working copy of package.json,typings.json and tsconfig.json?

Also, any plans to support RC6?

Any help would be appreciated.

Thanks and regards,
Prashant

[GaryParticipant]

Prashant,

If you can send me your email I’ll will forward copies of files requested if still needed.

ghaddon1@gmail.com

Regards,
Gary

[PrashantParticipant]

Gray,

I moved on Angular 2.0. Have you tried it on angular final version? If that is working, then please send me config files on below mail id,

prashu84k@gmail.com

Experts :
When can we expect Angular 2.0 sample tutorial?
please confirm..

Regards,
Prashant

[Ivo ZhulevParticipant]

Hi pkirpan,

We are updating all components to work with Angular 2.0. You will also get many bugfixes and optimizations.

Best Regards,
Ivo

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

[lqbwebParticipant]

Please Ivo, have a look at my last thread here:

http://www.jqwidgets.com/community/topic/ngmodel-does-not-refresh-the-view/

I believe it is an important bug, that will be a pity that you miss, and I still have not got any answer there or by email.

[PrashantParticipant]

Team,

I have integrated Jqwidgets docking layout with angulat 2.0 – rc5 with Visual Studio Code.

Integration was successful and working fine but when i added Jqwidegts library into solution, i get below error while launching app.

After doing other integration, below error appears on terminal again and fails application launching. Am i missing something while integration?

error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxcalendar.js’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxcalendar.js’

[0] error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxcalendar.js.map’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxcalendar.js.map’

[0] error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxdockinglayout.js’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxdockinglayout.js’

[0] error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxdockinglayout.js.map’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxdockinglayout.js.map’

[0] error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxtree.js’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxtree.js’

[0] error TS5033: Could not write file ‘{Source Location}/jqwidgets-ts/angular_jqxtree.js.map’: EPERM: operation not permitted, open ‘{Source Location}\jqwidgets-ts\angular_jqxtree.js.map’

Regards,
Prashant

[Author]

Posts