title: Angular 4 + ngx-datatable: @swimlane/ngx-datatable 404 (Not Found)
body: <p>I'm very new to Angular. I ran this to get my project started:
  <code>git clone https://github.com/angular/quickstart appName</code></p>
  
  <p>I updated it to Angular 4, everything should be good to go. Here's the output from running <code>ng -v</code>:</p>
  
  <pre><code>@angular/cli: 1.1.3
  node: 6.11.0
  os: darwin x64
  @angular/common: 4.0.3
  @angular/compiler: 4.0.3
  @angular/core: 4.0.3
  @angular/forms: 4.0.3
  @angular/http: 4.0.3
  @angular/platform-browser: 4.0.3
  @angular/platform-browser-dynamic: 4.0.3
  @angular/router: 4.0.3
  @angular/cli: 1.1.3
  </code></pre>
  
  <p>I need a highly configurable table module <code>ngx-datatable</code> is a nice choice. I followed instructions on these pages: </p>
  
  <p><a href="https://swimlane.gitbooks.io/ngx-datatable/introduction/installing.html" rel="nofollow noreferrer">https://swimlane.gitbooks.io/ngx-datatable/introduction/installing.html</a>
  <a href="https://swimlane.gitbooks.io/ngx-datatable/introduction/getting-started.html" rel="nofollow noreferrer">https://swimlane.gitbooks.io/ngx-datatable/introduction/getting-started.html</a></p>
  
  <p>I can run <code>npm start</code> and it loads up the app, but my browser encounters an error that breaks the app:</p>
  
  <p><code>GET http://localhost:3006/@swimlane/ngx-datatable 404 (Not Found)</code></p>
  
  <p><a href="https://i.stack.imgur.com/ElUUI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElUUI.jpg" alt="enter image description here"></a></p>
  
  <p>Here's my <strong>app.module.ts</strong>:</p>
  
  <pre><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
  import { BrowserModule }                         from '@angular/platform-browser';
  import { HttpModule }                            from '@angular/http' ;
  import { NgxDatatableModule }                    from '@swimlane/ngx-datatable';
  
  import { AppComponent }                          from './app.component';
  
  @NgModule({
    imports:      [ BrowserModule, HttpModule, NgxDatatableModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Part of my <strong>package.json</strong>:</p>
  
  <pre><code>"dependencies": {
      "@angular/common": "~4.0.0",
      "@angular/compiler": "~4.0.0",
      "@angular/core": "~4.0.0",
      "@angular/forms": "~4.0.0",
      "@angular/http": "~4.0.0",
      "@angular/platform-browser": "~4.0.0",
      "@angular/platform-browser-dynamic": "~4.0.0",
      "@angular/router": "~4.0.0",
      "angular-in-memory-web-api": "~0.3.0",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@angular/cli": "^1.1.3",
      "@types/jasmine": "2.5.36",
      "@types/node": "^6.0.46",
      "canonical-path": "0.0.2",
      "concurrently": "^3.2.0",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.16.4",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "tslint": "^3.15.1",
      "typescript": "^2.2.0"
    }
  </code></pre>
  
  <p>My <strong>systemjs.config.js</strong>:</p>
  
  <pre><code>(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'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          defaultExtension: 'js',
          meta: {
            './*.js': {
              loader: 'systemjs-angular-loader.js'
            }
          }
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>
  
  <p>Spent the whole day working on this and I'm in the same spot. What's wrong with my setup?</p>