Unable to import toastr module with Angular 2

Question

I am creating an Angular 2 application with version 2.0.0-alpha.46 and I trying to import the toastr module.

I have downloaded the library and also downloaded the definitely typed file as well.

In my html page, I add a <script> tag for the .js file:

<script src="./src/libs/toastr/toastr.min.js"></script>

In Visual Studio Code, I try to import the module like so:

import * as toastr from 'toastr';

I am then able to call toastr.info('message') in my component - I even get intellisense; However, when i actually try to load the webpage I get a 404 /src/toastr not found error.

If I try to get explicit about finding the toastr definitely typed file:

import * as toastr from '../../definitions/toastr/toastr';

I will get "[full path to ts module] is not a module."

I have also tried adding ///<reference path="../../toastr.d.ts" /> to the top of the file I am using to import the module to no avail.

Does anyone have an idea of what may be happening? I am drawing a blank on what I may have wrong. Thanks in advance.

Answer 1

I think that the toastr.min.js file doesn't contain a module at all. My understanding is that TypeScript definition files help you to define the methods and structures used by the toastr library. This is helpful within your IDE for code completion. This definition file doesn't actually create a module that can be use at runtime...

This means that you can use directly the toastr object directly without having to import it like this: import * as toastr from '...';.

Here is the corresponding plunkr: https://plnkr.co/edit/wzdoisKBrZYTeSX8r7Nd?p=preview.

Hope that makes sense. Thierry