Importing angular2-cookie in angular2 rc5 project

Question

I'm trying to import the angular2 cookie module in angular2 rc5 project I just started.

I installed the module with npm

npm install angular2-cookie

edited my angular-cli-build.js file :

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
     'systemjs/dist/system-polyfills.js',
     'systemjs/dist/system.src.js',
     'zone.js/dist/**/*.+(js|js.map)',
     'es6-shim/es6-shim.js',
     'reflect-metadata/**/*.+(ts|js|js.map)',
     'rxjs/**/*.+(js|js.map)',
     '@angular/**/*.+(js|js.map)',
     'materialize-css/bin/materialize.css',
     'materialize-css/bin/materialize.js',
     'socket.io-client/socket.io.js',
     'angular2-cookie/**/*.+(ts|js|js.map)'
   ]
 });
};

ran ng build

the angular2-cookie folder is created in my dist/vendor folder

my system-config.ts looks like this

    "use strict";

      // SystemJS configuration file, see links for more information
      // https://github.com/systemjs/systemjs
      // https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

      /***********************************************************************************************
       * User Configuration.
       **********************************************************************************************/
      /** Map relative paths to URLs. */
      const map: any = {
      };

      /** User packages configuration. */
      const packages: any = {
      };

      ////////////////////////////////////////////////////////////////////////////////////////////////
      /***********************************************************************************************
       * Everything underneath this line is managed by the CLI.
       **********************************************************************************************/
      const barrels: string[] = [
        // Angular specific barrels.
        '@angular/core',
        '@angular/common',
        '@angular/compiler',
        '@angular/forms',
        '@angular/http',
        '@angular/router',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',

        // Thirdparty barrels.
        'rxjs',

        // App specific barrels.
        'app',
        'app/shared',
        /** @cli-barrel */
      ];

      const cliSystemConfigPackages: any = {};
      barrels.forEach((barrelName: string) => {
        cliSystemConfigPackages[barrelName] = { main: 'index' };
      });

      /** Type declaration for ambient System. */
      declare var System: any;

      // Apply the CLI SystemJS configuration.
      System.config({
        map: {
          '@angular': 'vendor/@angular',
          'rxjs': 'vendor/rxjs',
          'main': 'main.js',
          "socket.io-client": "node_modules/socket.io-client/socket.io.js",
          "angular2-cookie": 'vendor/angular2-cookie'
        },
        packages: cliSystemConfigPackages,
        "socket.io-client": {"defaultExtension": "js"},
      'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}
      });

      // Apply the user's configuration.
      System.config({ map, packages });

I managed to import it and add some code in my component file

import {CookieService} from 'angular2-cookie/core';

but for some reason when I try to ng serve the application , it failed to load with the following errors

             zone.js:101 GET http://localhost:4200/vendor/angular2-cookie/core 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM308:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
            2016-09-01 10:48:02.373 zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core
                    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
                    at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
                    at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
                    at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
                Error loading http://localhost:4200/vendor/angular2-cookie/core as "angular2-cookie/core" from http://localhost:4200/app/app.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
            2016-09-01 10:48:02.378 zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-cookie/core(…)

looks like the angular2 cookie folder is not accessible (or not properly served) , but can't find why.

my package.json dependencies :

                "dependencies": {
                        "@angular/common": "2.0.0-rc.5",
                        "@angular/compiler": "2.0.0-rc.5",
                        "@angular/core": "2.0.0-rc.5",
                        "@angular/forms": "0.3.0",
                        "@angular/http": "2.0.0-rc.5",
                        "@angular/platform-browser": "2.0.0-rc.5",
                        "@angular/platform-browser-dynamic": "2.0.0-rc.5",
                        "@angular/router": "3.0.0-rc.1",
                        "angular2-cookie": "^1.2.2",
                        "async": "^2.0.1",
                        "clone": "^1.0.2",
                        "es6-shim": "0.35.1",
                        "express": "^4.14.0",
                        "materialize-css": "^0.97.7",
                        "moment": "^2.14.1",
                        "redis": "^2.6.2",
                        "reflect-metadata": "0.1.3",
                        "rethinkdb": "^2.3.2",
                        "rxjs": "^5.0.0-beta.6",
                        "socket.io": "^1.4.8",
                        "socket.io-client": "^1.4.8",
                        "systemjs": "0.19.37",
                        "typings": "^1.3.1",
                        "zone.js": "0.6.17"
                        },
                        "devDependencies": {
                        "angular-cli": "1.0.0-beta.10",
                        "codelyzer": "0.0.20",
                        "ember-cli-inject-live-reload": "1.4.0",
                        "jasmine-core": "2.4.1",
                        "jasmine-spec-reporter": "2.5.0",
                        "karma": "0.13.22",
                        "karma-chrome-launcher": "0.2.3",
                        "karma-jasmine": "0.3.8",
                        "protractor": "3.3.0",
                        "ts-node": "0.5.5",
                        "tslint": "3.11.0",
                        "typescript": "1.8.10",
                        "typings": "1.3.1"
                        }
                    }

s.alem · Accepted Answer · 2016-09-02T09:39:04.317

1

You need to set map and packages in these objects. Do not modify anything below these lines.

/** Map relative paths to URLs. */
const map: any = {
  'angular2-cookie': 'vendor/angular2-cookie'
};

/** User packages configuration. */
const packages: any = {
  'angular2-cookie': {main: 'core.js', defaultExtension: 'js'},
};

Note that currently angular2-cookie doesn't work with rc6, but the new version is on the way. I think it will be released today or tomorrow.

edited Sep 02 '16 at 09:39

answered Sep 02 '16 at 09:12

s.alem

12,579
9
44
72

This is the exact config that I have in my system-config.ts , check my question, for some reason it s working for me and I have not able to figure out why. – Nico AD Sep 02 '16 at 10:32
It is not exact config. Your map and packages objects are empty. Also, you shouldn't edit anything below the line says `Everything underneath this line is managed by the CLI.`. – s.alem Sep 02 '16 at 11:59
ok finally got it ! . waaooh so much time lost for a misconfiguration on a module loader. I miss the old time of linking external deps with – Nico AD Sep 02 '16 at 13:34
This is the downside of working with pre-release bleeding edge libraries. But I also think that these kind of breaking changes shouldn't be in release candidates but only in alpha and betas. I have only checked the getting started page of the aurelia, it looks nice. I think the most important thing is, how will the community support (3rd party libraries, SO user, etc) grow around aurelia and to see this, we just need to wait. – s.alem Sep 02 '16 at 15:17
you are right , I've been on my previous project (on angular 1.x) for more than 2 years and was very happy about it.now I m starting a new one , as I saw angular2 was not in beta anymore , I thought I could use it (I can accept minor issues/glitches) but I m not super fan of breaking changes in RC state :) . I hope it will be better after the official release. – Nico AD Sep 02 '16 at 15:40

score 0 · Answer 2 · answered Sep 01 '16 at 10:27

0

You did mapping in your config file "angular2-cookie": 'vendor/angular2-cookie', so you need to call import {CookieService} from 'angular2-cookie';

Should work, otherwise check this folder /vendor/angular2-cookie/, and check is there a core.js file which you setted as default for this module in the System.config 'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'}.

answered Sep 01 '16 at 10:27

Kanso Code

7,479
5
34
49

sure, there is a core.js file in the dist/vendor/angular2-cookie folder. and yes I can call import {CookieService} from 'angular2-cookie'; without any issue (the typescript file compiles file), the issue is only @ execution. – Nico AD Sep 01 '16 at 11:09
so what is the log, when you do `import {CookieService} from 'angular2-cookie';` ? – Kanso Code Sep 01 '16 at 11:22
nothing special , the ts file compile into .js , there is only a problem at execution - screenshot of my component file in visual studio code : no errors . http://accessdev.s3.amazonaws.com/temp/angular-cookie.png – Nico AD Sep 01 '16 at 11:35
@NicoAD, try to remove `/core` at the end of import, because you setted already it in mapping – Kanso Code Sep 01 '16 at 11:39
now I get a TypeScript error Error: Typescript found the following errors: /mypath/tmp/broccoli_type_script_compiler-input_base_path-gkTiv8yF.tmp/0/src/app/app.component.ts (4, 29): Cannot find module 'angular2-cookie'. – Nico AD Sep 01 '16 at 11:42
I noticed the call to http://localhost:4200/vendor/angular-cookie/core is missing the .js extension, If I add this to the mapping : "angular2-cookie/core": 'vendor/angular2-cookie/core.js' the core.js fill is able to load, but it fails on http://localhost:4200/vendor/angular2-cookie/services , obsiously something is wrong with System.config map/package but according to the docs (https://www.npmjs.com/package/angular2-cookie) my setup looks correct. weird , and the error reporting does not help that much. – Nico AD Sep 01 '16 at 12:35
@NicoAD, try to do, what you just did, but remove `main: 'core.js'` this property in system.config.ts 'angular2-cookie' : { defaultExtension: 'js',main: 'core.js'} here – Kanso Code Sep 01 '16 at 12:46

Importing angular2-cookie in angular2 rc5 project

2 Answers2