CODEWITHSUNDEEP
angularcompiler-errorsloading
Maryam Gharibi
Maryam Gharibi

Reputation: 571

error loading in ng2-material-select angular2

I am trying to use ng2-material-select component in my application. I added it in systemjs.config.js and module.ts :

Module.ts:

this is module.ts:

import { NgModule, ApplicationRef, ModuleWithProviders } from '@angular/core';
// Ahead of Time compile
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
// import { PLATFORM_DIRECTIVES, PLATFORM_PIPES, provide, enableProdMode } from '@angular/core';
import {   enableProdMode } from '@angular/core';

import { Ng2Select } from 'ng2-material-select';
import { Ng2SelectModule } from 'ng2-material-select';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Ng2SelectModule 
  ],

  exports: [
    Ng2SelectModule,
  ],

  providers: [],

  declarations: [
    app_App,
    app__COMPONENTS,
    app__DIRECTIVES,
    app__PIPES,
    Ng2Select
  ],

  entryComponents: [
    App
  ],

  bootstrap: [App]
})

and this is the map in my systemjsconfig.js:

  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',
    'reflect-metadata': '/node_modules/reflect-metadata',
    'Ng2Select': '/node_modules/ng2-material-select',
    };
 var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'reflect-metadata': { defaultExtension: 'js' },
    'Ng2Select': { defaultExtension: 'js' },
  };

It seems everything is ok. but when I run the application I get following error:

(SystemJS) XHR error (404 Not Found) loading http://localhost:3002/ng2-material-select patchProperty/desc.set/wrapFn@http://localhost:3002/node_modules/zone.js/dist/zone.js:647:26 ZoneDelegate.prototype.invokeTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:236:23 Zone.prototype.runTask@http://localhost:3002/node_modules/zone.js/dist/zone.js:136:28 ZoneTask/this.invoke@http://localhost:3002/node_modules/zone.js/dist/zone.js:304:28 Error loading http://localhost:3002/ng2-material-select as "ng2-material-select" from http://localhost:3002/app/module.js"

what is wrong in this config?

thanks in advance.

Upvotes: 0

Views: 526

Answers (1)

Supamiu
Supamiu

Reputation: 8731

Your systemjs.config.js is wrong, you have to set the path for the library name, not the element you want to import in this library:

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',
    'reflect-metadata': '/node_modules/reflect-metadata',
    'ng2-material-select': '/node_modules/ng2-material-select',
  };
var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'reflect-metadata': { defaultExtension: 'js' },
    'ng2-material-select': { defaultExtension: 'js' },
};

Upvotes: 0

Related Questions