Can't get it to work with angular quickstart / systemjs #14

rbaarsma · 2016-04-13T08:42:47Z

I'm using the angular2 quickstart setup together with ng2-bootstrap. Everything is working and I would love to add angulartics, but I can't get it to work.

These are the errors in my Chrome console:

angulartics2.ts:1Uncaught ReferenceError: require is not defined(anonymous function) @ angulartics2.ts:1
angulartics2-google-analytics.ts:1Uncaught ReferenceError: require is not defined(anonymous function) @ angulartics2-google-analytics.ts:1
angular2-polyfills.min.js:1 Error: SyntaxError: Unexpected token <(…)

In the Network tab both angulartics2.js and angulartics2-google-analytics.js are loading propertly, but then they are loaded again and searched as /angulartics2 and /angulartics2/src/providers/angulartics2-google-analytics and both of them return "Loading..."

I've tried to map "angulartics2": "node_modules/angulartics2" and a bunch of other variations. Strangely I can at most seem to get one of the "Loading..." messages to return depending on my map, but not both..

This is my index.html:

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Angular2 playground</title>

  <link rel="stylesheet" href="css/main.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.min.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.min.js"></script>

  <script src="node_modules/angular2/bundles/router.dev.js"></script>
  <script src="node_modules/angular2/bundles/http.dev.js"></script>
  <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

  <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

  <script src="node_modules/angulartics2/src/core/angulartics2.js"></script>
  <script src="node_modules/angulartics2/src/providers/angulartics2-google-analytics.js"></script>

  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        "node_modules/ng2-bootstrap": {
          "defaultExtension": "js"
        },
        "node_modules/angulartics2": {"defaultExtension": "js"}
      },
      map: {
        'ng2-bootstrap': 'node_modules/ng2-bootstrap',
        moment: 'node_modules/moment/moment.js',
      },
      paths: {
        "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap",
      }
    });
    System.import('app/main')
            .then(null, console.error.bind(console));
  </script>
</head>

<!-- 3. Display the application -->
<body>
<div class="container">
  <my-app>Loading...</my-app>
</div>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-18982324-19', 'auto');
  //ga('send', 'pageview');
</script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

jkufrin · 2016-04-21T14:42:26Z

@rbaarsma did you ever figure this out? I'm seeing the same thing.

NathanWalker · 2016-04-21T15:35:55Z

@jkufrin @rbaarsma You can likely follow this guide which I wrote to get ng2-dragula setup with system register format and QuickStart guide. Similar setup and changes would be needed for this lib as well:
https://github.com/valor-software/ng2-dragula/wiki#5-min-quickstart

jkufrin · 2016-04-21T17:45:25Z

@NathanWalker
Awesome. Thanks for the fast reply.

I just updated to the latest specs from https://angular.io/docs/ts/latest/quickstart.html, "angular2": "2.0.0-beta.15", etc...
I've got it working up until the point where I add Angulartics2GoogleAnalytics to the component providers. As soon as I add that, I get 2 errors in my console:

system.src.js:4935
GET http://localhost:3000/libraries/angular2/angulartics2.js/src/providers/angulartics2-google-analytics 404 (Not Found)

angular2-polyfills.js:332
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/libraries/angular2/angulartics2.js/src/providers/angulartics2-google-analytics(…)

I can't tell why it's trying to concat the AGA path onto the end of the angulartics2.js

thanks

jkufrin · 2016-04-21T18:33:22Z

@NathanWalker
It's something with my System.config. I've tried all kinds of combinations of the code to try and include the libraries. You can see all the commented stuff I tried in my index below.

The paths stuff you mention in dragula did not work. I thought I was close when I tried using map, lines 41-42 on the attached index. It allows the main script to work, but it's also concatenating the google-analytics script and throwing that error up above.

I notice that you're using:
import {Component} from 'angular2/angular2';
which is old. I'm wondering if something else is going on with the main library that is effected since the master angular2 core code has changed?

I appreciate any help you could throw my way.

index.txt
main.txt
app.component.txt

NathanWalker · 2016-04-21T21:33:33Z

If you have a github repo you could share with me, I may can help later with a PR.

rbaarsma · 2016-04-22T06:33:28Z

@jkufrin nope didn't get it to work. In the end I simply put the pageview in my custom secure-router-outlet.ts and didn't bother with this bundle (except steal ideas from it's source code)

        // track google analytics pageview
        if (ga) {
            if (this._api.user) {
                ga('set', '&uid', this._api.user.id);
            }
            ga('send', 'pageview', instruction.urlPath);
        }

JonnyBGod · 2016-04-22T14:36:04Z

@rbaarsma not steeling ideas, the code is MIT, you are just learning one way of doing it. ;)

We should still try to help ease the use of this library for everyone. @NathanWalker I am assigning you to the issue as I am not familiar with quickstart or system.config. You probably can do it better.

Probably should add some reference to docs with proper configuration.

NathanWalker · 2016-04-28T18:20:01Z

@jkufrin As mentioned, if you have a github project you could share, I could help further. Configuring SystemJS is very specific and dependent upon the entire setup you are working with so would need to see it in entirety to help further. Seeing bits and pieces often leaves out most important thing.

jkufrin · 2016-05-02T20:22:37Z

@NathanWalker Thanks for reaching out again. I appreciate it.
Unfortunately, I can't really post this project publicly. I did include a few of the files up above, with the extensions just switched from .ts to .txt so they could upload. You can see the first few steps of my project. I'm using all the latest stuff from https://angular.io/docs/ts/latest/quickstart.html, "angular2": "2.0.0-beta.15", etc...

I see that the repo was updated 4 days ago and again yesterday, with notes about updating it to beta.17. I will update my project to beta17 and get the latest version of angulartics2 and see if everything is working now.

jkufrin · 2016-05-16T16:56:31Z

@NathanWalker
I finally figured it out. I'm running Quickstart ng2-rc1 inside a VS2015 project. I moved @angular and angulartics into my wwwroot/libraries folder.

The map and package objects needed to be updated from what you show in your Readme documenation.

Here's a snippet from my updated systemjs.config.js file:
var map = {
'app': 'app',
'rxjs': 'libraries/rxjs',
'angular2-in-memory-web-api': 'libraries/angular2-in-memory-web-api',
'@angular': 'libraries/@angular',
'moment': 'libraries/moment/min/moment.min.js',
'angulartics2': 'libraries/angulartics2'
};
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'moment': { type: 'cjs', defaultExtension: 'js' },
'angulartics2': { main: 'index.js', defaultExtension: 'js' }
};

marcusfalley · 2016-05-18T00:38:12Z

@jkufrin Your most recent comment with 'angulartics2': { main: 'index.js', defaultExtension: 'js' } and in particular the main: 'index.js' fixed my similar issue. Thank you!

JonnyBGod assigned NathanWalker Apr 22, 2016

scttcper added the question label Oct 24, 2017

scttcper closed this as completed Jan 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't get it to work with angular quickstart / systemjs #14

Can't get it to work with angular quickstart / systemjs #14

rbaarsma commented Apr 13, 2016

jkufrin commented Apr 21, 2016

NathanWalker commented Apr 21, 2016 •

edited

jkufrin commented Apr 21, 2016

jkufrin commented Apr 21, 2016

NathanWalker commented Apr 21, 2016

rbaarsma commented Apr 22, 2016

JonnyBGod commented Apr 22, 2016 •

edited

NathanWalker commented Apr 28, 2016

jkufrin commented May 2, 2016

jkufrin commented May 16, 2016

marcusfalley commented May 18, 2016

Can't get it to work with angular quickstart / systemjs #14

Can't get it to work with angular quickstart / systemjs #14

Comments

rbaarsma commented Apr 13, 2016

jkufrin commented Apr 21, 2016

NathanWalker commented Apr 21, 2016 • edited

jkufrin commented Apr 21, 2016

jkufrin commented Apr 21, 2016

NathanWalker commented Apr 21, 2016

rbaarsma commented Apr 22, 2016

JonnyBGod commented Apr 22, 2016 • edited

NathanWalker commented Apr 28, 2016

jkufrin commented May 2, 2016

jkufrin commented May 16, 2016

marcusfalley commented May 18, 2016

NathanWalker commented Apr 21, 2016 •

edited

JonnyBGod commented Apr 22, 2016 •

edited