Types not found

Question

I just updated angular-cli (v1.1) and created a new project using ng new MyProj. Then I added and installed two dependencies to the project.json file:

"dependencies": {
 ...
 "toastr": "2.1.2",
 "spin": "0.0.1"
 },
 "devDependencies": {
 ...
 "@types/toastr": "2.1.32",
 "@types/spin": "2.3.30",
 ...
 "typescript": "~2.3.3"
 }

Then I updated the autogenerated app.component.ts adding this constructor:

constructor() {
 toastr.success('Hi')
}

The IDE (visual studio code) do not return any error but when I serve the application using ng serve I get the following error:

ERROR in ../A/src/app/app.component.ts (15,5): C annot find name 'toastr'.

I really cannot figure out what is wrong with that.

Thanks a lot

• Mahesh Singh Chouhan: have you install this dependencies using npm install command?
• Mahesh Singh Chouhan: also in angular you need to import and inject your npm modules first, follow angular2-toastr documentation for more info
• user3471528: Yes, I did use npm install. I'm not using Angular2.toastr. I'm just using the "original" js library, so it is not a module, it is just a js file.
• Mahesh Singh Chouhan: if it is only js library then you need to include js and css in index.html file, then you can use toaster inside any component, without including it would not work
• jlang: I have the same problem, are there any updates by now? :(

Answer 1

I solved the problem removing types from tsconfig.app.json. This is the new configuration:

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
 "outDir": "../out-tsc/app",
 "module": "es2015",
 "baseUrl": ""
 },
 "exclude": [
 "test.ts",
 "**/*.spec.ts"
 ]
}

Answer 2

Try doing import * as toastr from 'toastr' or import toastr from 'toastr' - the latter is if it has a default export.