Error: 'ResponsiveModule' is not exported by node_modules/ng2-responsive/index.js

[rotsheide]

I would really like to use the ResponsiveModule in my Angular2 project but I can't get it to run.

If I run the project on my local server it will not pass the 'Loading' message without any helping error messages in the console.
But when I run my release script I see this:
Export 'ResponsiveConfig' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveConfigInterface' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveState' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveModule' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveModule' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveConfig' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
Export 'ResponsiveState' is not defined by '/Users/Bart/Documents/www/pegasus-ceRegistrar/bin-debug/aot/src/application/ApplicationModule.ngfactory.js'
'ResponsiveModule' is not exported by node_modules/ng2-responsive/index.js (imported by bin-debug/src/application/ApplicationModule.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
Error: 'ResponsiveModule' is not exported by node_modules/ng2-responsive/index.js (imported by bin-debug/src/application/ApplicationModule.js). For help fixing this error see https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

I've tried the solutions mentioned in issue #32 'projekt/ng2-responsive 404 error' but it's not working :-(

Could you please tell me what I'm doing wrong?

Below you can see my project config files.

package.json
{
"name": "pegasus-ceRegistrar",
"version": "0.0.1",
"dependencies": {
"@angular/common": "^2.4.1",
"@angular/compiler": "^2.4.1",
"@angular/compiler-cli": "^2.4.1",
"@angular/core": "^2.4.1",
"@angular/forms": "^2.4.1",
"@angular/http": "^2.4.1",
"@angular/material": "^2.0.0-beta.1",
"@angular/platform-browser": "^2.4.1",
"@angular/platform-browser-dynamic": "^2.4.1",
"@angular/platform-server": "^2.4.1",
"@angular/router": "^3.4.1",
"@angular/upgrade": "^2.4.1",
"@types/core-js": "^0.9",
"@types/hammerjs": "^2.0.34",
"@types/node": "^6.0.54",
"angular-in-memory-web-api": "^0.1",
"angular2-jwt": "^0.1.25",
"concurrently": "^3.0.0",
"core-js": "^2",
"grunt": "^1",
"grunt-contrib-clean": "^1",
"grunt-contrib-copy": "^1",
"grunt-shell": "^2",
"hammerjs": "^2.0.8",
"lite-server": "^2",
"load-grunt-tasks": "^3",
"ng2-responsive": "^0.6.6",
"reflect-metadata": "^0.1.9",
"rollup": "^0.36",
"rollup-plugin-commonjs": "^5",
"rollup-plugin-node-resolve": "^2",
"rollup-plugin-uglify": "^1",
"rxjs": "^5.0.2",
"systemjs": "^0.19",
"tslint": "^4.2.0",
"typescript": "2.0.10",
"zone.js": "^0.7.4"
}
}

systemjs.config.js
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
Application: 'bin-debug',

  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
  '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
  '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
  '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

  // response libraries
  'ng2-responsive/bootstrap': 'npm:ng2-responsive/bootstrap',
  'ng2-responsive/browsers': 'npm:ng2-responsive/browsers',
  'ng2-responsive/config': 'npm:ng2-responsive/config',
  'ng2-responsive/custom-sizes': 'npm:ng2-responsive/custom-sizes',
  'ng2-responsive/devices': 'npm:ng2-responsive/devices',
  'ng2-responsive/pixelratio': 'npm:ng2-responsive/pixelratio',
  'ng2-responsive/responsive': 'npm:ng2-responsive/responsive',
  'ng2-responsive/responsive-window': 'npm:ng2-responsive/responsive-window',
  'ng2-responsive/useragent': 'npm:ng2-responsive/useragent',
  'ng2-responsive': 'npm:ng2-responsive',

  // other libraries
  'rxjs': 'npm:rxjs'
},
packages: {
  Application: {
    main: './main.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/bootstrap': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/browsers': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/config': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/custom-sizes': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/devices': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/pixelratio': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/responsive': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/responsive-window': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/useragent': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive': {
    main: './index.js',
    defaultExtension: 'js'
  },
  rxjs: {
    defaultExtension: 'js'
  }
}

});
})(this);

[ManuCutillas]

Update to "ng2-responsive": "^0.6.7".

Set this config in your systemjs file:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        // response libraries
        'ng2-responsive/bootstrap': 'npm:ng2-responsive/bootstrap',
        'ng2-responsive/browsers': 'npm:ng2-responsive/browsers',
        'ng2-responsive/config': 'npm:ng2-responsive/config',
        'ng2-responsive/custom-sizes': 'npm:ng2-responsive/custom-sizes',
        'ng2-responsive/devices': 'npm:ng2-responsive/devices',
        'ng2-responsive/pixelratio': 'npm:ng2-responsive/pixelratio',
        'ng2-responsive/responsive': 'npm:ng2-responsive/responsive',
        'ng2-responsive/responsive-window': 'npm:ng2-responsive/responsive-window',
        'ng2-responsive/useragent': 'npm:ng2-responsive/useragent',
        'ng2-responsive': 'npm:ng2-responsive',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'ng2-responsive/bootstrap': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/browsers': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/config': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/custom-sizes': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/devices': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/pixelratio': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/responsive': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/responsive-window': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive/useragent': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'ng2-responsive': {
    main: './index.js',
    defaultExtension: 'js'
  }

    }
  });
})(this);

Tell me if that works! ; )

[rotsheide]

Hello Manuel,

It works!!!!!

Thanks for all the work. Really appreciate it!!

Bart

[brgrz]

After adding this I get the following error:

GET http://localhost/PromInfo/node_modules/rxjs/ 403 (Forbidden) (anonymous) @ zone.js:834 fetchFetch @ fetch.js:32 (anonymous) @ instantiate.js:167 ZoneDelegate.invoke @ zone.js:334 Zone.run @ zone.js:126 (anonymous) @ zone.js:713 ZoneDelegate.invokeTask @ zone.js:367 Zone.runTask @ zone.js:166 drainMicroTaskQueue @ zone.js:546 (index):63

[brgrz]

even after further debugging doesn't work..removing these lines and systemjs works again, so it must be something with ng2-responsive

[brgrz]

I was able to get past the zone error by modifying the systemjs config file from this

rxjs: { defaultExtension: 'js' }

to this

rxjs: { main:'./bundles/rx.min.js', defaultExtension: 'js' }

since you use require('rxjs') (you are not requiring subcomponents in a way this is typically done when starting from angular 2 quickstart templates)

but I'm now faced with error

"Unexpected directive 'XL' imported by the module 'LayoutModule' Evaluating http://localhost/spa/main.js Loading Spa/main.js"

Probably because the module also contains directives and those should be entered into declarations section.

[brgrz]

Ok, apparently in only works if you import the ng2-responsive module within the root app.module but not in other modules, don't know why.

HTH

[rotsheide]

After leaving the project for a couple of months, I found that I had the same problem. The solution suggested by brgrz does work with my project (Thanks brgrz!).
I also found that the ng2-responsive module is only working in the root app.module. But in my project I have another module where I can import the ng2-responsive module. When I do that I can make it work in my complete project.

[brgrz]

Well, for me the directives are not working correctly. I was able to import ng2-responsive and have it load without errors but when I appliy the directives to HTML tags those elements do not get rendered at all (no matter the breakpoints/orientiations/etc.)