Adding Angular2-wizard package to a project

Question

I'm starting an Angular project from Angular Quickstart seed. I've been creating my own components and now I want to add the Angular2-wizard npm package

I've installed the package using the following command

$ npm install angular2-wizard --save

as it states in its install section and then tried to use the component following all the suggested steps. I can see a folder named after the plugin under node_modules folder of my project.

When I run the project using npm start I this 404 error

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-wizard

The project has a working demo (angular2-wizard-demo) but doesn't seem to use SystemJS. I've also tried the suggestion of this answer adding the line

'angular2-wizard':           'npm:angular2-wizard/dist/index.js'

under the map config but now I get this 404 errors when the package loads its components

Error loading http://localhost:3000/node_modules/angular2-wizard/dist/src/wizard.component as "./src/wizard.component" from http://localhost:3000/node_modules/angular2-wizard/dist/index.js Stacktrace: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-wizard/dist/src/wizard.component

This is the app.module.ts

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

import { AppComponent }  from './app.component';

import { FormWizardModule } from 'angular2-wizard';

import { PizzaService } from './services/pizza.service'

@NgModule({
  imports:      [
                  BrowserModule,
                  FormsModule,
                  FormWizardModule
                ],
  declarations: [ AppComponent ],
  providers:    [ PizzaService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Any hint on how to add this package to my project?

Can you post your `src/app/app.module.ts` – bhantol Jun 11 '17 at 00:55 — bhantol, Jun 11 '17 at 00:55
I've edited the post with the file contents – maureyes Jun 11 '17 at 14:27 — maureyes, Jun 11 '17 at 14:27

score 2 · Accepted Answer · answered Jun 11 '17 at 22:09

That 404 is because it is trying to access node_modules/angular2-wizard/dist/src/wizard.component which does not exist.

This is because the compiled index.js inside angular2-wizard is trying to perform require('./src/wizard.component'). I believe their distribution is not fail proof for this however SystemJS provides you the following:-

..inside system.config.js look for

// packages tells the System loader how to load when no filename and/or no

Add the following to your systemjs.config.js in 'packages`:

  'node_modules/angular2-wizard/dist/src/': {
    defaultExtension: 'js'
  }

Now your systemjs.config.js should look as below:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(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',
      'angular2-wizard':           'npm:angular2-wizard/dist/index.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'
      },
      'node_modules/angular2-wizard/dist/src/': {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Additionally I will suggest that you go for angular-cli instead of SystemJS for faster development. — bhantol, Jun 11 '17 at 22:11
It worked following your suggestion. I'm starting with Angular so I'll try angular-cli as you said. Thanks a lot! — maureyes, Jun 11 '17 at 22:47

Adding Angular2-wizard package to a project

1 Answers1