Angular 4 CLI cannot find name 'jasmine'

Question

I use the Angular 4 CLI (v.1.0.0), and to handle testing, I created some layouts that use jasmine to create a spy. In the IDE, everything looks fine, but in the terminal I get an error message "I can not find the name" jasmine ".

At first, I thought the problem was that jasmine was not added to the typings, but I see that package.json includes imports to determine the type of jasmine, so I'm not sure what is missing.

mocks.ts

export class MockAuthService { public login: Function = jasmine.createSpy('login'); } export class MockHttpService { public delete: Function = jasmine.createSpy('delete'); public get: Function = jasmine.createSpy('get'); public post: Function = jasmine.createSpy('post'); public put: Function = jasmine.createSpy('put'); } 

running ng serve returns the following terminal error messages.

ERROR in C: /Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (2,23): Unable to find the name "jasmine". C: /Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (6,24): Unable to find the name "jasmine". C: /Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (7,21): Unable to find the name "jasmine". C: /Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (8,22): Unable to find the name "jasmine". C: /Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (9,21): Unable to find the name "jasmine". webpack: Failed to compile.

tsconfig.json

 { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } } 

tsconfig.spec.json

 { "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "module": "commonjs", "target": "es5", "baseUrl": "", "types": [ "jasmine", "node" ] }, "files": [ "test.ts" ], "include": [ "**/*.spec.ts", "**/*.d.ts" ] } 

tsconfig.app.json

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

package.json

 { "name": "prod", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.0.2", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/flex-layout": "^2.0.0-beta.8", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/material": "^2.0.0-beta.3", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.0.0", "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.2.0" } } 

Answer 1

You get an error because TypeScript is trying to include mock in the app assembly, and the application (rightfully) does not know about Jasmine.

Exclude the layout from your compilation of the application by adding it to the exclude array in tsconfig.app.json :

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

Answer 2

I'm not sure you should create jasmine spies this way, but independently:

Problem with your file name

: tsconfig.spec.json has: "include": ["**/*.spec.ts","**/*.d.ts"]

and your file name is mocks.ts .

or change the file name to mocks.spec.ts

or add "**/*.mock.ts" and rename something like service.mock.ts

Hope this helps.