PrimeNG quickstart install

jasdanh · 20 Apr 2016, 21:00

Hi,

I'm having challenges to run the quickstart. I'm using tomcat (not Node.js). Is there a complete setup instructions for PrimeNg other than what's on the demo site quickstart.

I did
1. npm install primeng --save and npm install primeui --save.
2. copied node_modules which only includes primeng and primeui to the webapps folder to be deployed to tomcat
3. I copied the code from quickstart (ex. index.html etc.)

I get the following error:
GET ../angular2/platform/browser.js 404 (Not Found)
GET ../angular2/core.js 404 (Not Found)
GET ../angular2/common.js 404 (Not Found)
GET ../angular2/src/facade/lang.js 404 (Not Found)

Please help. Coming from coding in Java to doing angular2 has been a challenged to setup PrimeNG

Code: Select all

<!DOCTYPE html>
<html>

  <head>
    <title>PrimeNG QuickStart</title>

    <link rel="stylesheet" type="text/css" href="angular2/node_modules/primeui/themes/delta/theme.css" />
    <link rel="stylesheet" type="text/css" href="angular2/resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="angular2/node_modules/primeui/primeui-ng-all.min.css" />

    <!-- 1. Load libraries -->
<!--     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/primeui/primeui-ng-all.min.js"></script> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                '/angular2': {"defaultExtension": 'js'}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
        System.import('angular2/boot').then(null, console.error.bind(console));
    </script>

<!--     <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script> -->
    
    <script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

here's my folder structure in Spring IDE

src
----main
-------webapp
-----------ng
--------------primeng
-----------------quickstart
---------------------angular2
------------------------app.component.js
------------------------app.component.ts
------------------------boot.js
------------------------boot.ts
---------------------node_modules
------------------------primeng
------------------------primeui
---------------------index.html
---------------------traceur.js
---------------------tsconfig.json
---------------------typings.json

I also had to do npm install traceur --save because before it was complaining that it can't find this too.

21 Apr 2016, 08:39

I think base should point to;

Code: Select all

<head>
    <script>document.write('<base href="' + document.location + '/src/main/webapp/ng/primeng/quickstart/" />');</script>

Also try mapping angular2 as well in your system.js config;

Code: Select all

        System.config({
            defaultJSExtensions: true,
            packages: {
                'app': {"defaultExtension": 'js'}
            },
            map: {
                'angular2': 'src/main/webapp/ng/primeng/quickstart/node_modules/angular2',
                'primeng': 'src/main/webapp/ng/primeng/quickstart/node_modules/primeng'
            }
        });

Still I'd suggest a dev server like lite-server for development purposes and an actual server like tomcat or else for production.

PrimeNG quickstart install

Who is online