Getting started Angular2 RC5 with ng-bootstrap 404 Error

Question

I have followed the instructions for installation on the ng-bootstrap website with a fresh git clone of Angular2, but receive a 404 Error when NgbModule is in the import array of @NgModule.

Screencap of error: 404 Error loading @ng-bootstrap

Steps:

1. Cloned Angular2's quickstart git repo github.com/angular/quickstart

2. Edit app.module.ts to the following:

   import { NgModule }      from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppComponent }  from './app.component';
   import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
   
   @NgModule({
     imports: [ NgbModule, BrowserModule ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
   })
   export class AppModule { }
   

3. Make sure bootstrap@4.0.0-alpha.3, ng-bootstrap and angular2 RC5 are installed

4. Add bootstrap .css and .js script tags to index.html
5. npm start produces Loading... page and nothing else, can see 404 error in web console

The same occurs when trying to set the import path explicitly through node_module eg. import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";

Any help appreciated.

Update 1:

Added @ng-bootstrap line to project root file systemjs.config.js. Similar 404 error in browser console.

systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {

  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',

    '@ng-bootstrap':              'node_modules/@ng-bootstrap',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };

  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade'
  ];

  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }

  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }

  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);

  // No umd for router yet
  packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };

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

  System.config(config);

})(this);

Update 2

Added the index.js file to the packages in systemjs.config.js and am receiving errors on the individual files as per screencap here:

systemjs.config.js (excerpt)

 //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' },
  };

Answer 1

Found a solution. Problem indeed lies in systemjs.config.js. Followed instructions and now the issue is fixed. Thanks

How can I add bootstrap to Angular2 via system.js

Answer 2

It seems you have not added the path of @ng-bootstrap in the systemjs configuration,

Add path for @ng-bootstrap in systemjs.config.js

Hope this helps!!