Getting Started Angular2 RC5 with ng-bootstrap 404 Error

Question

I followed the installation instructions on the ng-bootstrap website with fresh git Angular2, but I get a 404 error when the NgbModule is in the import array @NgModule.

Error scenario: 404 Error loading @ ng-bootstrap

Steps:

• Cloned Angular2 quickstart git repo github.com/angular/quickstart

• Change app.module.tsto 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 { }
  

• Make sure bootstrap@4.0.0-alpha.3ng-bootstrap and Angular2 RC5 are installed

• Add bootstrap.css and .js script tags to index.html
• npm start creates a Loading page ... and nothing else, can see a 404 error in the web console

The same thing happens when you try to set the import path explicitly through node_module, for example. import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";

Any help was appreciated.

Update 1:

​​ @ng-bootstrap systemjs.config.js. 404 .

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);

2

index.js systemjs.config.js, screencap :

systemjs.config.js()

 //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

. systemjs.config.js. , .

Angular2 system.js

Answer 2

, @ng-bootstrap systemjs,

@ng-bootstrap systemjs.config.js

, !