How Should I Add Toastr to my Angular 2/MVC Application

I am developing a project using Steve Sanderson's excellent template as a starting point (Angular Template for Visual Studio). I want to add Toastr functionality (Toastr) but every time I try and use it I get an error that "toastr is not defined".

I went about the following:

1. Added a dependency for "toastr": "2.1.2" to my package.json file.
2. Added both "toastr" (for the javascript) and "toastr/build/toastr.min.css" (for the css) to my webpack.config.vendor.json file.
3. From the command line ran webpack --config webpack.config.vendor.js.

I checked inside my vendor.css and could clearly see toastr styles. I checked inside my vendor.js and could see toastr methods. My application references both my vendor.css and vendor.js files. In fact Angular and Bootstrap styling all works fine so the references should be good.

To test Toastr functionality I wrote a very simple script

and placed it after the but I got a console error in, Chrome F12, that toastr was not defined. I also tried to run the script within a click handler in an Angular component but received the same error.

Update

In my simple toastr.service.ts file which I created I added an import statement as follows: import * as toastr from "toastr"; and to prevent Typescript errors I then added: declare let toastr: any;.

The good news is My toastr service works. Frustratingly I have an error on my import statement saying "cannot find module toastr". Close.

Any suggestions why I am getting the warning and how to solve it very welcome.