How to include angular2-material to angular2 app

[micronyks]

What if I don't use Angular Cli. How can I integrate angular2-material with quick-start app of angular2.

I added @angular2-material/core package. Then I installed other angular2-material components like @angular2-material/button, @angular2-material/card and so on.

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',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    '@angular2-material':         'node_modules/@angular2-material', 
    // <--------------added this above line----------------------
  };
  // 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',
  ];

  //<------------------added this below part--------------------------------
var materialPackages=[
    'core',
    //'button',
    //'card',
    'list',
  ];
  materialPackages.forEach(function(pkgName) {
    packages['@angular2-material/'+pkgName] = { format: 'cjs', defaultExtension: 'js'};
  });
 //<----------------------till here---------------------------------


  // 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);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

When I run my app I following error,

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/sidenav/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/toolbar/ Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:16 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular2-material/button(…)(anonymous function) @ localhost/:16 http://localhost:3000/node_modules/@angular2-material/card/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/input/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/checkbox/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/radio/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/icon/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/node_modules/@angular2-material/list/ Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)
angular2 npm angular2-material

[frankcalise]

In your materialPackages.forEach, for each package did you try calling out the main: with pkgName? See https://github.com/kara/puppy-love/blob/master/src/system-config.ts

[micronyks]

@frankcalise - I tried this also but also it is not working.

NOTE: I don't use angular cli.

(function(global) {

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

        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs',

        '@angular2-material/core': 'node_modules/@angular2-material/core',
        '@angular2-material/button': 'node_modules/@angular2-material/button',
        '@angular2-material/card': 'node_modules/@angular2-material/card',
        '@angular2-material/slide-toggle': 'node_modules/@angular2-material/slide-toggle',
        '@angular2-material/toolbar': 'node_modules/@angular2-material/toolbar'


    };

    // 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'
        },



        '@angular2-material/core': {
            main: 'core.js'
        },
        '@angular2-material/card': {
            main: 'card.js'
        },
        '@angular2-material/button': {
            main: 'button.js'
        },
        '@angular2-material/toolbar': {
            main: 'toolbar.js'
        },
        '@angular2-material/slide-toggle': {
            main: 'slide-toggle.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);

[jelbourn]

Without using the angular CLI, it's up to you to both copy the files to the appropriate directory for serving configure whatever module loader you're using to be able to then load those files. These are going to be specific to your app / build process / environment, so there's no universal "this is what you do".

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}