How i can import primeng9 with systemjs?

UI Components for Angular
Post Reply
zornic
Posts: 53
Joined: 09 Dec 2017, 10:12

29 Feb 2020, 10:13

He gyus,

how i can import primeng 9 with systemjs 0.21.6?
In version 8 i did it like this:

Code: Select all

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.appVersion = '2.7.0.4';
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {
            "target": "es5",
            "module": "commonjs",
            "moduleResolution": "node",
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true
        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'ClientApp/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js?v=' + System.appVersion,
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js?v=' + System.appVersion,
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js?v=' + System.appVersion,
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js?v=' + System.appVersion,
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js?v=' + System.appVersion,
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js?v=' + System.appVersion,
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js?v=' + System.appVersion,
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js?v=' + System.appVersion,
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js?v=' + System.appVersion,

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js?v=' + System.appVersion,
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js?v=' + System.appVersion,
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js?v=' + System.appVersion,

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js?v=' + System.appVersion,
            '@angular/cdk/a11y': 'npm:/@angular/cdk/bundles/cdk-a11y.umd.js?v=' + System.appVersion,
            '@angular/cdk/bidi': 'npm:/@angular/cdk/bundles/cdk-bidi.umd.js?v=' + System.appVersion,
            '@angular/cdk/observers': 'npm:/@angular/cdk/bundles/cdk-observers.umd.js?v=' + System.appVersion,
            '@angular/cdk/overlay': 'npm:/@angular/cdk/bundles/cdk-overlay.umd.js?v=' + System.appVersion,
            '@angular/cdk/portal': 'npm:/@angular/cdk/bundles/cdk-portal.umd.js?v=' + System.appVersion,
            '@angular/cdk/scrolling': 'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js?v=' + System.appVersion,
            '@angular/cdk/platform': 'npm:/@angular/cdk/bundles/cdk-platform.umd.js?v=' + System.appVersion,
            '@angular/cdk/keycodes': 'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js?v=' + System.appVersion,
            '@angular/cdk/coercion': 'npm:/@angular/cdk/bundles/cdk-coercion.umd.js?v=' + System.appVersion,
            '@angular/cdk/collections': 'npm:/@angular/cdk/bundles/cdk-collections.umd.js?v=' + System.appVersion,
            '@angular/cdk/rxjs': 'npm:/@angular/cdk/bundles/cdk-rxjs.umd.js?v=' + System.appVersion,
            '@angular/cdk/table': 'npm:/@angular/cdk/bundles/cdk-table.umd.js?v=' + System.appVersion,

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js?v=' + System.appVersion,
            
            'primeng': 'npm:primeng',
            
            'jquery': 'npm:jquery/dist/jquery.js?v=' + System.appVersion,

            'crypto-js': 'npm:crypto-js/crypto-js.js?v=' + System.appVersion,

            '@fullcalendar/core': 'npm:@fullcalendar/core/main.min.js?v=' + System.appVersion,
            '@fullcalendar/daygrid': 'npm:@fullcalendar/daygrid/main.min.js?v=' + System.appVersion,
            '@fullcalendar/timegrid': 'npm:@fullcalendar/timegrid/main.min.js?v=' + System.appVersion,
            '@fullcalendar/list': 'npm:@fullcalendar/list/main.min.js?v=' + System.appVersion,
            '@fullcalendar/interaction': 'npm:@fullcalendar/interaction/main.min.js?v=' + System.appVersion,

            'moment': 'npm:moment/min/moment-with-locales.min.js?v=' + System.appVersion,
            'tslib': 'npm:tslib/tslib.js?v=' + System.appVersion,
            'quill': 'npm:quill/dist/quill.js?v=' + System.appVersion,
            'chart.js': 'npm:chart.js/dist/Chart.js?v=' + System.appVersion,
            'froala-editor': 'npm:froala-editor/js/plugins/align.min.js?v=' + System.appVersion,
        },
        meta: {
            '@angular/*': { 'format': 'cjs' },
            '*': {
                authorization: true
            }

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'primeng': {
                defaultExtension: 'js?v=' + System.appVersion,
            },
            app: {
                defaultExtension: 'js?v=' + System.appVersion,
                meta: {
                    './*.js': {
                        loader: 'ClientApp/systemjs-angular-loader.js?v=' + System.appVersion,
                    }
                }
            },
            'rxjs': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/ajax': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/operators': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/testing': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/webSocket': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            quill: {
                defaultExtension: 'js?v=' + System.appVersion
            },
            'angular2-router-loader': {
                defaultExtension: 'js?v=' + System.appVersion
            },
            'moment': {
                defaultExtension: 'js?v=' + System.appVersion },
        }
    });
})(this);
if I change that to version 9:

Code: Select all

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.appVersion = '2.7.0.4';
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {
            "target": "es5",
            "module": "commonjs",
            "moduleResolution": "node",
            "sourceMap": true,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true
        },
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'ClientApp/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js?v=' + System.appVersion,
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js?v=' + System.appVersion,
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js?v=' + System.appVersion,
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js?v=' + System.appVersion,
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js?v=' + System.appVersion,
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js?v=' + System.appVersion,
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js?v=' + System.appVersion,
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js?v=' + System.appVersion,
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js?v=' + System.appVersion,

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js?v=' + System.appVersion,
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js?v=' + System.appVersion,
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js?v=' + System.appVersion,

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js?v=' + System.appVersion,
            '@angular/cdk/a11y': 'npm:/@angular/cdk/bundles/cdk-a11y.umd.js?v=' + System.appVersion,
            '@angular/cdk/bidi': 'npm:/@angular/cdk/bundles/cdk-bidi.umd.js?v=' + System.appVersion,
            '@angular/cdk/observers': 'npm:/@angular/cdk/bundles/cdk-observers.umd.js?v=' + System.appVersion,
            '@angular/cdk/overlay': 'npm:/@angular/cdk/bundles/cdk-overlay.umd.js?v=' + System.appVersion,
            '@angular/cdk/portal': 'npm:/@angular/cdk/bundles/cdk-portal.umd.js?v=' + System.appVersion,
            '@angular/cdk/scrolling': 'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js?v=' + System.appVersion,
            '@angular/cdk/platform': 'npm:/@angular/cdk/bundles/cdk-platform.umd.js?v=' + System.appVersion,
            '@angular/cdk/keycodes': 'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js?v=' + System.appVersion,
            '@angular/cdk/coercion': 'npm:/@angular/cdk/bundles/cdk-coercion.umd.js?v=' + System.appVersion,
            '@angular/cdk/collections': 'npm:/@angular/cdk/bundles/cdk-collections.umd.js?v=' + System.appVersion,
            '@angular/cdk/rxjs': 'npm:/@angular/cdk/bundles/cdk-rxjs.umd.js?v=' + System.appVersion,
            '@angular/cdk/table': 'npm:/@angular/cdk/bundles/cdk-table.umd.js?v=' + System.appVersion,

            // other libraries
            //'typescript': 'npm:typescript/lib/typescript.js?v=' + System.appVersion,
            //'typescript': 'npm:typescript/lib',
            //'ts': 'npm:plugin-typescript/lib/plugin.js',

            'primeng': 'npm:primeng/esm5/primeng.js?v=' + System.appVersion,

            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js?v=' + System.appVersion,
            'jquery': 'npm:jquery/dist/jquery.js?v=' + System.appVersion,

            'crypto-js': 'npm:crypto-js/crypto-js.js?v=' + System.appVersion,

            '@fullcalendar/core': 'npm:@fullcalendar/core/main.min.js?v=' + System.appVersion,
            '@fullcalendar/daygrid': 'npm:@fullcalendar/daygrid/main.min.js?v=' + System.appVersion,
            '@fullcalendar/timegrid': 'npm:@fullcalendar/timegrid/main.min.js?v=' + System.appVersion,
            '@fullcalendar/list': 'npm:@fullcalendar/list/main.min.js?v=' + System.appVersion,
            '@fullcalendar/interaction': 'npm:@fullcalendar/interaction/main.min.js?v=' + System.appVersion,

            'moment': 'npm:moment/min/moment-with-locales.min.js?v=' + System.appVersion,
            'tslib': 'npm:tslib/tslib.js?v=' + System.appVersion,
            'quill': 'npm:quill/dist/quill.js?v=' + System.appVersion,
            'chart.js': 'npm:chart.js/dist/Chart.js?v=' + System.appVersion,
            'froala-editor': 'npm:froala-editor/js/plugins/align.min.js?v=' + System.appVersion,
        },
        meta: {
            '@angular/*': { 'format': 'cjs' },
            '*': {
                authorization: true
            }

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            //'primeng': {
            //    defaultExtension: 'js?v=' + System.appVersion,
            //},
            app: {
                defaultExtension: 'js?v=' + System.appVersion,
                meta: {
                    './*.js': {
                        loader: 'ClientApp/systemjs-angular-loader.js?v=' + System.appVersion,
                    }
                }
            },
            'rxjs': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/ajax': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/operators': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/testing': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            'rxjs/webSocket': { main: 'index', defaultExtension: 'js?v=' + System.appVersion },
            quill: {
                defaultExtension: 'js?v=' + System.appVersion
            },
            'angular2-router-loader': {
                defaultExtension: 'js?v=' + System.appVersion
            },
            'moment': { defaultExtension: 'js?v=' + System.appVersion }
        }
    });
})(this);

dszvivek
Posts: 1
Joined: 02 Mar 2020, 10:14

02 Mar 2020, 10:20

Hi,
Im stuck with the same issue.

If you have found any solution, Please reply.
Im getting this erroreach time.

(index):113 (SystemJS) XHR error (404 Not Found) loading http://localhost:51923/node_modules/pri ... tswitch.js
Error: XHR error (404 Not Found) loading http://localhost:51923/node_modules/pri ... tswitch.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:51923/node_modules/zon ... .js:698:29)
at ZoneDelegate.invokeTask (http://localhost:51923/node_modules/zon ... .js:265:35)
at Zone.runTask (http://localhost:51923/node_modules/zon ... .js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:51923/node_modules/zon ... .js:335:33)
Error loading http://localhost:51923/node_modules/pri ... tswitch.js as "primeng/inputswitch" from http://localhost:51923/app/tools/cleara ... .module.js

Regards, Vivek

zornic
Posts: 53
Joined: 09 Dec 2017, 10:12

03 Mar 2020, 08:46

Hi Vivek,

no, i don't have a solution :-(

My last attempt was to import the js file from the "esm5" folder.

Code: Select all

'primeng': 'npm:primeng/esm5/primeng.js',
'primeng/button': 'npm:primeng/esm5/button/button.js',
But then he always complains about typescript.

Failed to load resource: the server responded with '/Angular_MVC/typescript:1' a status of 404 (Not Found)

I am currently only running Angular9 with primeng 8.1.6LTS.
Do you also work with ASP.NET MVC in Visual Studio?

Best wishes zornic

Pennel1l
Posts: 1
Joined: 09 Mar 2020, 08:00

09 Mar 2020, 08:02

zornic wrote:
03 Mar 2020, 08:46
Hi Vivek,

no, i don't have a solution :-(

My last attempt was to import the js file from the "esm5" folder.

Code: Select all

'primeng': 'npm:primeng/esm5/primeng.js',
'primeng/button': 'npm:primeng/esm5/button/button.js',
But then he always complains about typescript.

Failed to load resource: the server responded with '/Angular_MVC/typescript:1' a status of 404 (Not Found)

I am currently only running Angular9 with primeng 8.1.6LTS.
Do you also work with ASP.NET MVC in Visual Studio?

Best wishes zornic
First will display all the data in the table using ngFor directive. So we need to import those in the module we need to use the breadcrumb.

zornic
Posts: 53
Joined: 09 Dec 2017, 10:12

09 Mar 2020, 09:05

Hi Pennel1l,

do you have an example of how you did it?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests