jQuery UI Widgets Forums Angular Angular 2 setup

This topic contains 8 replies, has 5 voices, and was last updated by  Prashant 6 years, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Angular 2 setup #87056

    Gary
    Participant

    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

    Angular 2 setup #87085

    Peter Stoev
    Keymaster

    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

    Angular 2 setup #87086

    Gary
    Participant

    Peter,

    Works!!!! Thanks………

    Angular 2 setup #87404

    Prashant
    Participant

    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

    Angular 2 setup #87416

    Gary
    Participant

    Prashant,

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

    ghaddon1@gmail.com

    Regards,
    Gary

    Angular 2 setup #87467

    Prashant
    Participant

    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

    Angular 2 setup #87468

    Ivo Zhulev
    Participant

    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/

    Angular 2 setup #87481

    lqbweb
    Participant

    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.

    Angular 2 setup #87616

    Prashant
    Participant

    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

    • This reply was modified 6 years, 4 months ago by  Prashant.
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.