Hi,

I am trying POC for integerating ->  "Anychart map integeration" .  I am
getting below error in browser Javascript console.


Please let me know if I am following correctly.

Package.json has the entry for Anychart component and it was downloaded and
stored in node_modules folder.   Also I have imported the script file in
index.html file, but do I need to add to "System.conf.js" file please do
let me know.



*Error: Unexpected token <*
 Evaluating http://192.168.220.158:3008/anychart-angular2/components
  Evaluating http://192.168.220.158:3008/src/tmp/app/home/home.component.js
  Evaluating http://192.168.220.158:3008/src/tmp/app/home/index.js
  Evaluating http://192.168.220.158:3008/src/tmp/app/app.routing.js
  Evaluating http://192.168.220.158:3008/src/tmp/app/app.module.js
  Evaluating http://192.168.220.158:3008/src/tmp/app/main.js
  Loading app/main.js
    at eval (<anonymous>)
    at Ce (system.js:4)
    at system.js:5
    at P (system.js:4)
    at E (system.js:4)
    at O (system.js:4)
    at system.js:4
    at Object.eval (:3008/src/tmp/app/home/home.component.js:13)
    at eval (:3008/src/tmp/app/home/home.component.js:49)
    at eval (:3008/src/tmp/app/home/home.component.js:50)
(anonymous) @ 192.168.220.158/:47



*system.conf.js*

/*
 * This config is only used during development and build phase only
 * It will not be available on production
 *
 */

(function(global) {
    // ENV
    global.ENV = global.ENV || 'development';

    // map tells the System loader where to look for things
    var map = {
        'app': 'src/tmp/app',
        'test': 'src/tmp/test'
    };

    // packages tells the System loader how to load when no filename
and/or no extension
    var packages = {
        'app': {
            defaultExtension: 'js'
        },
        'test': {
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        }
    };

    // List npm packages here
    var npmPackages = [
        '@angular',
        'rxjs',
        'lodash'
    ];

    // Add package entries for packages that expose barrels using index.js
    var packageNames = [
        // App barrels
        'app/shared',

        // 3rd party barrels
        'lodash'
    ];

    // Add package entries for angular packages
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router'
    ];

    npmPackages.forEach(function (pkgName) {
        map[pkgName] = 'node_modules/' + pkgName;

    });

    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
        console.log(packages[pkgName]);
    });

    ngPackageNames.forEach(function(pkgName) {
        map['@angular/' + pkgName] = 'node_modules/@angular/' + pkgName +
            '/bundles/' + pkgName + '.umd.js';
        map['@angular/' + pkgName+'/testing'] =
'node_modules/@angular/' + pkgName +
        '/bundles/' + pkgName + '-testing.umd.js';
    });

    var config = {
        map: map,
        packages: packages
    };

    // filterSystemConfig - index.html's chance to modify config
before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);



*Index.html*


<html>
  <head>
    <title>Angular Starter</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- build:css assets/bundle.css -->
    <link rel="stylesheet"
href="../node_modules/font-awesome/css/font-awesome.css">
    <!-- app:css -->
    <link rel="stylesheet" href="/assets/styles/main.css">
    <!-- endinject -->
    <!-- endbuild -->
    <link rel="stylesheet" href="node_modules/dragula/dist/dragula.css">
  </head>
  <body>
    <as-main-app>
      <i class="center-fix main-spinner fa fa-spin fa-spinner"></i>
    </as-main-app>

    <!-- build:js assets/lib.js -->

    <!-- Non-module JS libs -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script 
src="../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="../node_modules/core-js/client/shim.min.js"></script>

    <!-- Load libraries -->
    <script src="../node_modules/zone.js/dist/zone.js"></script>

    <!-- endbuild -->

    <!-- build:js assets/app.js -->
    <script src="tmp/app/bundle.js"></script>
    <!-- endbuild -->

    <!-- build:remove -->
    <script src="../node_modules/systemjs/dist/system.js"></script>
    <script src="systemjs.conf.js"></script>
    <!-- Include anychart component -->
    <script src="node_modules/anychart/dist/anychart-bundle.min.js"></script>
    <script>
      System.import('app/main.js')
        .catch(function(err) { console.error(err); });
    </script>
    <!-- endbuild -->
  </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to