projekt/ng2-responsive 404 error

[p5hema2]

Your install guide didn't work in the first place with ng2-Final, typescript 2.0.2 for the Angular Get Started App.

I resolved the issue with adding
'responsive': 'npm:ng2-responsive',
and
'ng2-responsive': { main: './index.js', defaultExtension: 'js' }
to system.config.js.

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {MdCoreModule} from '@angular2-material/core';
import {MdSidenavModule} from '@angular2-material/sidenav';

import {Ng2BootstrapModule} from "ng2-bootstrap/ng2-bootstrap";

import {AppComponent} from "./app.component";
import {ResponsiveModule} from "ng2-responsive";

@NgModule({
    imports:      [
        BrowserModule,
        ResponsiveModule,
        Ng2BootstrapModule,
        MdCoreModule,
        MdSidenavModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap:    [
        AppComponent
    ]
})

export class AppModule { }

system.config.js

(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',

            '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js',
            '@angular2-material/sidenav': 'npm:@angular2-material/sidenav/sidenav.umd.js',
            // other libraries
            'rxjs':                       'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',

            'ng2-responsive': 'npm:ng2-responsive',

            'moment': 'node_modules/moment/moment.js'
        },
        // 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'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'ng2-responsive': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

[ManuCutillas]

It's great, thanks.

I have always tried the library with the demo and webpack project. I'll add an example configuration with Systemjs.

Thanks, p5hema2.

[lax20attack]

Is there an example configuration with SystemJS? I do not see a systemjs.config.js file anywhere.

I am getting the same 404's due to the assumed file paths in ngr-responsive/index.js.

For example, I believe this:
var bootstrap_1 = require('./bootstrap');

Should be:
var bootstrap_1 = require('./bootstrap/index.js');

[PickleyD]

I have the exact same configuration as the original post but I get a lot of 404s.

Has something changed since then?

[svondervoort]

Unfortunately I'm having the same problem as @lax20attack and @PickleyD.
Have everything set up like @p5hema2 but no luck.

[renooo]

@well-made you can try declare every path explicitely in your systemjs.config.js :

(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',
      //..
      // other 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'
      },
      //..........
      '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);

[ManuCutillas]

Ok! Let me see. ; )

[svondervoort]

@renooo thats a possibility but should be necessary of course :)

[ManuCutillas]

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

Thanks!