Angular-cli: Karma throws errors when using custom source directory

[kucharzyk]

Karma throws errors when using custom source directory

• Tests can't find jasmine methods when using custom source directory.
• Tests run well with default source directory.

My cli version (running under Windows 10)

C:\>ng version
angular-cli: 1.0.0-beta.14
node: 6.6.0
os: win32 x64

Error log:

C:\demo>ng test
18 09 2016 22:44:34.517:WARN [karma]: No captured browser, open http://localhost:9876/

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:6:0
Cannot find name 'describe'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:7:2
Cannot find name 'beforeEach'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:15:2
Cannot find name 'it'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:18:4
Cannot find name 'expect'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:21:2
Cannot find name 'it'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:24:4
Cannot find name 'expect'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:27:2
Cannot find name 'it'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.spec.ts:31:4
Cannot find name 'expect'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.ts:5:12
Cannot find name 'require'.

ERROR in [default] C:\demo\aaa\bbb\ccc\app\app.component.ts:6:11
Cannot find name 'require'.
18 09 2016 22:44:34.538:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
18 09 2016 22:44:34.538:INFO [launcher]: Launching browser Chrome with unlimited concurrency
18 09 2016 22:44:34.554:INFO [launcher]: Starting browser Chrome
18 09 2016 22:44:35.985:INFO [Chrome 53.0.2785 (Windows 10 0.0.0)]: Connected on socket /#yDvYLk6xqHJ7A9jPAAAA with id 65295348
Chrome 53.0.2785 (Windows 10 0.0.0): Executed 3 of 3 SUCCESS (0.211 secs / 0.192 secs)

How to reproduce:

C:\>ng new -sd aaa/bbb/ccc demo
installing ng2
  create README.md
  create aaa\bbb\ccc\app\app.component.css
  create aaa\bbb\ccc\app\app.component.html
  create aaa\bbb\ccc\app\app.component.spec.ts
  create aaa\bbb\ccc\app\app.component.ts
  create aaa\bbb\ccc\app\app.module.ts
  create aaa\bbb\ccc\app\index.ts
  create aaa\bbb\ccc\app\shared\index.ts
  create aaa\bbb\ccc\environments\environment.prod.ts
  create aaa\bbb\ccc\environments\environment.ts
  create aaa\bbb\ccc\favicon.ico
  create aaa\bbb\ccc\index.html
  create aaa\bbb\ccc\main.ts
  create aaa\bbb\ccc\polyfills.ts
  create aaa\bbb\ccc\styles.css
  create aaa\bbb\ccc\test.ts
  create aaa\bbb\ccc\tsconfig.json
  create aaa\bbb\ccc\typings.d.ts
  create angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.

C:\>cd demo

C:\demo>ng test

[andrewda]

I'm getting something similar when running the app:

ERROR in [default] /Users/.../my-project/src/app/app.component.ts:5:12 
Cannot find name 'require'.

ERROR in [default] /Users/.../my-project/src/app/app.component.ts:6:11 
Cannot find name 'require'.

Seems to be working despite the issues, though.

[kucharzyk]

Yes. It seems to be working despite errors.

Maybe they come from tslint

[kvn]

@andrewda: you can temporary add the following to src/typings.d.ts as a workaround:

declare var require: any;
declare var module: any;

[kucharzyk]

Temporary solution that works for me is adding following declarations to typings.d.ts

declare var describe: any;
declare var expect: any;
declare var beforeEach: any;
declare var it: any;
declare var require: any;

[kucharzyk]

Now I know what caused this errors.

tsconfig.json generated by angular-cli is incorrect.
"typeRoots" and "outDir" paths are wrong.

Just fix "typeRoots" path in your projects and everything will works without errors.

[eamell]

Hi @kucharzyk,

What should the values of typeRoots and outDir be?

Thanks!

[eamell]

Hi @kucharzyk,

The only issue I am seeing if the two warnings that you saw, I do not getting any errors. For reference the warnings are:

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
45:15 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
57:15 Critical dependency: the request of a dependency is an expression

It works fine; I just as a rule try to get rid of errors and warnings as they often are results of bigger issues (even if that doesn't seem to be the case here).

Thanks!

[filipesilva]

Thanks for the investigation work @kucharzyk! https://github.com/angular/angular-cli/issues/2206#issuecomment-248025535 does seem like a bug when we generate a project.

[thorsten]

Anyone working on this issue?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}