3rd party libs & angular2-toaster

[sysmat]

1. OS: Windows 7
2. ng --version
   angular-cli: 1.0.0-beta.1
   node: 5.9.1
   os: win32 x64
3. I'm trying to use angular2-toaster as 3rd party libs but with no luck

3.1 I installed by npm

3.2 In angular-cli-build.js I put:

return new Angular2App(defaults, { vendorNpmFiles: [ 'systemjs/dist/system-polyfills.js', 'systemjs/dist/system.src.js', 'zone.js/dist/*.js', 'es6-shim/es6-shim.js', 'reflect-metadata/*.js', 'rxjs/**/*.js', '@angular/**/*.js', '@angular2-material/**/*.js', 'angular2-toaster/**/*.js"' ] });

but in dist/vendor there is no angular2-toaster, but in my *.ts files I can do import

import {ToasterContainerComponent, ToasterService} from 'angular2-toaster/angular2-toaster';

3.3 I also try in system-config.ts for map, packages but still not working
4. LOG:
GET http://localhost:4200/node_modules/angular2-toaster/lib/toaster.css
zone.js:101 GET http://localhost:4200/vendor/angular2-toaster/angular2-toaster 404 (Not Found)
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/angular2-toaster/angular2-toaster

What I'm doing wrong?

Regards, Tomaž

[prashanthcvvp]

you are missing the css files in the vendor folder. replace
'angular2-toaster/*/.js with

'angular2-toaster/*/.+(js|css)' so it copies the css files also to the vendor folder.

[JSMike]

https://github.com/angular/angular-cli/wiki/3rd-party-libs

The following needs to be added to the vendorNpmFiles array in angular-cli-build.js

 'angular-toaster/**/*.+(js|js.map)'

The following needs to be added to your src/system-config.ts in order to specify the location and main file. (add the elements to pre-existing objects if they contain other items already)

const map: any = {
 'angular2-toaster': 'vendor/angular2-toaster'
};

const packages: any = {
 'angular2-toaster': {
 format: 'cjs',
 defaultExtension: 'js',
 main: 'angular2-toaster.js'
 }
}

[filipesilva]

I believe the answers by @prashanthcvvp and @JSMike should have solved your problem. Please tell me if that is not the case so I can reopen this issue.

[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.}