PrimeNG quickstart with linechart error

UI Components for Angular
Post Reply
pescamillam
Posts: 5
Joined: 21 Sep 2012, 16:56

01 Mar 2016, 16:43

Hey, I'm new to Angular 2 but I'm trying to use it with PrimeNG, right now I have some problems with the use of graphs, you can see my code in https://github.com/pescamillam/primeng-quickstart I just used the sample code of line chart with the base quickstart project, the quickstart project worked fine and the primeng project also worked, but this one is throwing me an error on javascript with:

SyntaxError: Unexpected token <(...)Zone.run @ angular2-polyfills.js:1243

so far the only changes I made so it might work as it was showing other errors were updating the primeng version of quickstart to 0.5.0 and the lite server version from 2.0.1 to 2.1.0

Thanks.

Peter Escamilla

pescamillam
Posts: 5
Joined: 21 Sep 2012, 16:56

01 Mar 2016, 17:27

nevermind, it is working now, I had to add the js libraries that were imported on the project PrimeNG so the quickstart worked with charts

index.html changed:

Code: Select all

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <link rel="stylesheet" type="text/css" href="app/resources/delta/theme.css" />
    <link rel="stylesheet" type="text/css" href="app/resources/icons/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="app/resources/primeui.css" />

      <!-- 1. Load libraries -->
      <!-- IE required polyfills, in this exact order -->
      <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/bundles/angular2-polyfills.js"></script>
      <script src="node_modules/systemjs/dist/system.src.js"></script>
      <script src="node_modules/rxjs/bundles/Rx.js"></script>
      <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
      <script src="node_modules/angular2/bundles/router.dev.js"></script>
      <script src="node_modules/angular2/bundles/http.dev.js"></script>

      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/jquery.js"></script>
      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/jquery-ui.js"></script>
      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/prism.js" data-manual></script>
      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/primeui/primeui.js"></script>
      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/charts.min.js"></script>
      <script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/site.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,
            packages: {
                "/angular2": {"defaultExtension": false}
            },
            map: {
                'primeng': 'node_modules/primeng'
            }
        });
      System.import('app/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>

  </head>

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

</html>
Thanks.

Peter Escamilla

cagatay.civici
Prime
Posts: 18158
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Mar 2016, 18:52

Glad to hear, I think you only need charts.js;

Code: Select all

<script src="https://cdn.rawgit.com/primefaces/primeng/master/showcase/resources/js/charts.min.js"></script>
Github is not a real cdn so I'd suggest;

Code: Select all

<script src="https://cdnjs.com/libraries/chart.js"></script>

site.js is also for primeng demo, you can remove it for your app.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests