Angular-cli: One of the dependencies is resolved as undefined in test environment (ng test)

[sharikovvladislav]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

sharikovvlad:ng2-diary-book svlad$ ng --version
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.3.0
node: 8.3.0
os: darwin x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5
sharikovvlad:ng2-diary-book svlad$

Repro steps.

1. git clone [email protected]:sharikovvladislav/ng2-diary-book.git
2. git checkout repro
3. git fetch
4. yarn install
5. yarn test:repro

The log given by the failure.

You will get:

LOG: 'markdown in MarkdownPipe', undefined
Chrome 60.0.3112 (Mac OS X 10.12.6): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chrome 60.0.3112 (Mac OS X 10.12.6) MyDairyPageComponent  FAILED
        TypeError: Cannot read property 'makeHtml' of undefined
            at MarkdownPipe.transform (webpack:////Users/svlad/dev/ng2-diary-book/src/app/shared/pipes/markdown.ts?:17:37)
            at checkAndUpdatePureExpressionInline (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:11848:38)
            at checkAndUpdateNodeInline (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12549:17)
            at checkAndUpdateNode (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12482:16)
            at debugCheckAndUpdateNode (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13343:59)
            at debugCheckRenderNodeFn (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13322:13)
            at Object.eval [as updateRenderer] (ng:///CoreModule/EntryListItemComponent.ngfactory.js:66:52)
            at Object.debugUpdateRenderer [as updateRenderer] (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13307:21)
            at checkAndUpdateView (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12454:14)
            at callViewAction (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12814:21)
Chrome 60.0.3112 (Mac OS X 10.12.6): Executed 1 of 3 (1 FAILED) (0 secs / 1.071 secs)
Chrome 60.0.3112 (Mac OS X 10.12.6) MyDairyPageComponent  FAILED
        TypeError: Cannot read property 'makeHtml' of undefined
            at MarkdownPipe.transform (webpack:////Users/svlad/dev/ng2-diary-book/src/app/shared/pipes/markdown.ts?:17:37)
            at checkAndUpdatePureExpressionInline (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:11848:38)
            at checkAndUpdateNodeInline (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12549:17)
            at checkAndUpdateNode (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12482:16)
            at debugCheckAndUpdateNode (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13343:59)
            at debugCheckRenderNodeFn (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13322:13)
            at Object.eval [as updateRenderer] (ng:///CoreModule/EntryListItemComponent.ngfactory.js:66:52)
            at Object.debugUpdateRenderer [as updateRenderer] (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:13307:21)
            at checkAndUpdateView (webpack:////Users/svlad/dev/ng2-diary-book/node_modules/@angular/core/@angular/core.es5.js?:12454:14)
Chrome 60.0.3112 (Mac OS X 10.12.6): Executed 1 of 3 (1 FAILED) (skipped 2) ERROR (1.094 secs / 1.071 secs)
error Command failed with exit code 1.
sharikovvlad:ng2-diary-book svlad$ 

This problem exists only in test environment. If you run ng serve and open localhost:4200 you will see markdown is working fine: you will see <p><em>abc</em></p> on the page and also you will see something like this in the console.

Of course I have markdown-js in the node_modules.

Desired functionality.

Import must work in any environment.

[filipesilva]

I cloned your repo and used the repro branch , but it doesn't seem to have a test:repro npm script to run. Can you update either your repro or instructions please?

[filipesilva]

Also, I noticed you're doing import markdown from 'markdown-js';, but this can mean different things with different module formats in tsconfig. The app tsconfig uses es2015, but specs use commonjs because the pipeline for karma/code coverage needs it.

So I'd suggest you try doing import * as markdown from 'markdown-js'; instead, maybe that's it.

See http://2ality.com/2014/09/es6-modules-final.html for differences between each type of import.

[sharikovvladislav]

I cloned your repo and used the repro branch , but it doesn't seem to have a test:repro npm script to run. Can you update either your repro or instructions please?

Uhm. Here is my package.json in my repo in repro branch: https://github.com/sharikovvladislav/ng2-diary-book/blob/repro/package.json#L13. Here is test:repro task.

So I'd suggest you try doing import * as markdown from 'markdown-js'; instead, maybe that's it.

Give me 5 minutes.

[sharikovvladislav]

@filipesilva Ok, my bad. -b made a problem. I fixed steps. By this steps you created new local branch repro but not checkout existing remote.

Let me check * as x

[sharikovvladislav]

import * as markdown from 'markdown-js'; fixed the problem.

Thank you very much! Closing this one. Thank you that you pointed me to article which explain that. Sry for the time :(

[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._}