@types not working in Angular 4 TypeScript app

2
votes

I have a small Angular 4 app written with TypeScript, which also uses Webpack, and the Jasmine testing framework.

I have installed @types packages for Jasmine and Node, e.g: @types/jasmine and @types/node, and can seem them there in the node_modules folder.

However, when I build the app I see errors in the command line window such as:

ERROR in [at-loader] ./app/welcome/app.welcome.spec.ts:4:1 TS2304: Cannot find name 'describe'.

The app itself still seems to work, it's just annoying seeing these errors.

My package.json file is as follows:

{
    "name": "ng4-ts-demo",
    "version": "1.0.0",
    "description": "An Angular4 with TypeScript demo",
    "main": "main.ts",
    "scripts": {
        "test": "karma start",
        "build": "webpack --config webpack.config.js"
     },
     "author": "Dan",
     "license": "MIT",
     "devDependencies": {
         "@types/jasmine": "^2.5.52",
         "@types/node": "^7.0.31",
         "angular2-template-loader": "^0.6.2",
         "awesome-typescript-loader": "^3.1.3",
         "clean-webpack-plugin": "^0.1.16",
         "css-loader": "^0.28.1",
         "html-loader": "^0.4.5",
         "html-webpack-plugin": "^2.28.0",
         "jasmine-core": "^2.6.1",
         "karma": "^1.6.0",
         "karma-chrome-launcher": "^2.1.0",
         "karma-coverage": "^1.1.1",
         "karma-jasmine": "^1.1.0",
         "karma-sourcemap-loader": "^0.3.7",
         "karma-webpack": "^2.0.3",
         "node-sass": "^4.5.2",
         "sass-loader": "^6.0.3",
         "style-loader": "^0.17.0",
         "typescript": "^2.3.4",
         "webpack": "^2.4.1"
     },
     "dependencies": {
         "@angular/cli": "^1.0.2",
         "@angular/common": "^4.1.0",
         "@angular/compiler": "^4.1.0",
         "@angular/core": "^4.1.0",
         "@angular/platform-browser": "^4.1.0",
         "@angular/platform-browser-dynamic": "^4.1.0",
         "core-js": "^2.4.1",
         "moment": "^2.18.1",
         "reflect-metadata": "^0.1.10",
         "rxjs": "^5.3.1",
         "zone.js": "^0.8.9"
     }
}

Edit

I've fixed the Jasmine issues by importing the types module in my test-main.ts file:

import '@types/jasmine';

However, importing the Node types in my main.ts file does not resolve the issue. It does remove the errors such as:

ERROR in [at-loader] ./test-main.ts:16:18 TS2304: Cannot find name 'require'.

But instead I see the error:

ERROR in ./main.ts Module not found: Error: Can't resolve '@types/node'

And in the browser's console I see a similar message

Uncaught Error: Cannot find module "@types/node"

Edit 2

The Jasmine errors were only fixed when doing a regular build. When actually running the tests (with Karma), I see:

Module not found: Error: Can't resolve '@types/jasmine'

I've been using the official Angular/Webpack docs, and this does not mention these errors, or do any importing of @types anywhere, and from what I have seen everywhere, the @types should just work once they are installed..?

The .tsconfig file is located at the root of the project (same level as node_modules) and is as follows:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}
1
angulartypescriptjasminetypescript-typings
How are you importing it? - Saravana
Aha, that was the issue. I wasn't. Have fixed with import '@types/jasmine'; in my test-main.ts. This is my first attempt at typeScript, I must've missed that part in the examples...Many thanks :) - danwellman
Did you heard of 'Angular CLI'? You can use it to generate basic template for your project. It also has Webpack under the hood. And it will configure unit-testing for you with Jasmine by default. - oliverfrost
I did see that, but have not looked into it much yet, I probably should do, thanks - danwellman
Interestingly, this doesn't seem to work for @types/node - when I add import '@types/node'; in my main.ts file, all of the errors about require, and process, etc, go, but I see Module not found: Error: Can't resolve '@types/node' instead? - danwellman

1 Answers

0
votes

For reference, this appeared to be an issue with the awesome-typescript-loader. I uninstalled this and switch to the ts-loader and these issues went away.

I confirm that installing @types/node, @types/jasmine, and @types/webpack-envis enough without any additional special configuration in webpack.conf.js or .tsconfig at all.