2

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' },
  };
Nelson
  • 414
  • 3
  • 17

2 Answers2

3

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

Nelson
  • 414
  • 3
  • 17
1

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

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • Hi @madhu-ranjan, I added a line in the map array. This produced the same 404 error. The new line in my systemjs.config.js map array is `'@ng-bootstrap': 'node_modules/@ng-bootstrap',` – Nelson Aug 22 '16 at 13:06
  • Please Add your system config in your question for reference. – Madhu Ranjan Aug 22 '16 at 13:08
  • @Nelson Include the main file in the packages as well for ng2-bootstrap. – Madhu Ranjan Aug 22 '16 at 13:34
  • I've added this line to the packages `'@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' },` and now it's struggling to load the individual components, Carousel, Buttons etc. Updated original post with screencap – Nelson Aug 22 '16 at 14:02
  • Still 404 not found, see screencap http://i.stack.imgur.com/kn5vl.png. From what I can see it seems require is trying to fetch modules from the @ng-bootstrap/ng-bootstrap folder instead of looking into the relevant children folders...? – Nelson Aug 22 '16 at 14:14