PrimeNG setup issue

LaAck · 28 Apr 2016, 17:46

Hi community,

I'm new to Angular 2 and PrimeNG. I tried to integrate PrimeNG into the Angular 2 Quickstart tutorial. I suppose the cause is somehow related to the systemjs config. The Angular 2 Quickstart tutorial and the PrimeNG setup instructions seem to use a different configuration.

When I run my application with the Quickstart systemjs configuration and navigate to the page with a PrimeNG directive, I get an error:

Code: Select all

Uncaught ReferenceError: require is not defined

(in primeng.js). If I change the configuration according to http://www.primefaces.org/primeng/#/setup, all other included libraries are not found anymore. The error is:

Code: Select all

GET http://localhost:8080/rxjs/Observable.js 404 (Not Found)

I already searched the forum for any idea but without any success. It would be great if someone could help me out.

Thank you very, very much in advance and kind regards,
LaAck

29 Apr 2016, 08:58

Welcome,

What are your PrimeNG and Angular2 versions?

Can you send us your index.html?

LaAck · 29 Apr 2016, 10:57

Hi optimus.prime,

thank you very much for the fast response. The versions are:

Angular 2: 2.0.0-beta.15
PrimeNG: 1.0.0-beta.3
PrimeUI: 4.1.8

I modified the index.html slightly in order to play around and get an idea for building my own applications. However, the changes are only marginal. The code:

Code: Select all

<html>
<head>
    <title>My first Angular 2 app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- Imports all CSS for the app. -->
    <link rel="stylesheet" type="text/css" href="css/bundle.css"/>

    <!-- libs -->
    <script src="/js/lib/es6-shim.js"></script>
    <script src="/js/lib/system-polyfills.js"></script>
    <script src="/js/lib/angular2-polyfills.js"></script>
    <script src="/js/lib/system.src.js"></script>
    <script src="/js/lib/Rx.js"></script>
    <script src="/js/lib/angular2.dev.js"></script>

    <script src="/js/lib/router.dev.js"></script>
    <script src="/js/lib/http.dev.js"></script>

    <!-- systemjs -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                'angular2': {'defaultExtension': false}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
        /*System.config({
         packages: {
         app: {
         format: 'register',
         defaultExtension: 'js'
         }
         }
         });*/
        System.import('app/main')
                .then(null, console.error.bind(console));
    </script>

    <!-- PrimeNG JS -->
    <script src="/js/lib/primeui-ng-all.min.js"></script>
    <script src="/js/lib/primeng.js"></script>
</head>

<body>
<!-- display app -->
<spring-boot-angular2>Loading...</spring-boot-angular2>
</body>
</html>

I included the two contentious systemjs configurations and commented one of them (the original Angular 2 Quickstart config) out.

Thank you very much in advance and kind regards,
LaAck

29 Apr 2016, 13:02

Try placing rxjs and angular2dev after your system.js config, this worked for me last time;

Code: Select all

    <script src="/js/lib/es6-shim.js"></script>
    <script src="/js/lib/system-polyfills.js"></script>
    <script src="/js/lib/angular2-polyfills.js"></script>
    <script src="/js/lib/system.src.js"></script>
    <script src="/js/lib/router.dev.js"></script>
    <script src="/js/lib/http.dev.js"></script>
    <!-- PrimeNG JS -->
    <script src="/js/lib/primeui-ng-all.min.js"></script>
    <script src="/js/lib/primeng.js"></script>

    <!-- systemjs -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                'angular2': {'defaultExtension': false}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
        System.import('app/main')
                .then(null, console.error.bind(console));
    </script>

    <script src="/js/lib/Rx.js"></script>
    <script src="/js/lib/angular2.dev.js"></script>

LaAck · 29 Apr 2016, 14:19

Hi optimus.prime,

thx again for the fast reply. Unfortunately replacing rxjs and angular2dev does not solve the problem and instead causes further problems with angular2-polyfills (404 errors for things like angular2/platform/browser, link, async, etc.). I tried many things since this post but could not get the application to work.

I now try to switch to webpack. Maybe this helps.

Thank you again,
LaAck

29 Apr 2016, 15:32

Have you tried running;

https://github.com/primefaces/primeng-quickstart

LaAck · 29 Apr 2016, 16:09

Yes, this works for me.

29 Apr 2016, 16:55

Can you also move router and http after?

Code: Select all

<script src="/js/lib/es6-shim.js"></script>
    <script src="/js/lib/system-polyfills.js"></script>
    <script src="/js/lib/angular2-polyfills.js"></script>
    <script src="/js/lib/system.src.js"></script>

    <!-- PrimeNG JS -->
    <script src="/js/lib/primeui-ng-all.min.js"></script>

<!-- systemjs -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                'angular2': {'defaultExtension': false}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
        System.import('app/main')
                .then(null, console.error.bind(console));
    </script>

    <script src="/js/lib/Rx.js"></script>
    <script src="/js/lib/angular2.dev.js"></script>
    <script src="/js/lib/router.dev.js"></script>
    <script src="/js/lib/http.dev.js"></script>

Also there is no primeng.js bundle, at least not provided from us.

LaAck · 03 May 2016, 17:22

Hi again,

thx once again for your reply. Unfortunately your suggestion did not change anything. After hours of failings I decided to switch to webpack. But it currently does not work, too. I get the following error message:

Code: Select all

Uncaught TypeError: Cannot set property 'parseDateTime' of undefined(anonymous function)

Is this a known issue? As far as I know this is somehow related to jquery-ui. But I included it.

I also was a bit confused to get an error message like '$ is undefined' since I read that including jQuery is optional.

Thank you very much,
LaAck

dsoltesz · 03 May 2016, 20:58

see my post here

http://forum.primefaces.org/viewtopic.php?f=35&t=45356

PrimeNG setup issue

Who is online