Circular dependency warnings after upgrading Angular CLI

Posted by: montyoverzero on 21 September 2017, 4:53 pm EST

  • Posted 21 September 2017, 4:53 pm EST

    I’m using Wijmo 5.20172.334 in an Angular project, and after upgrading my [url=https://github.com/angular/angular-cli]Angular CLI version, I get a series of warnings every time I run it. This happens with 1.3.0-rc.5 (presumably it would also happen in rc.4, but that was a bad release so I can’t test it) and subsequent versions including the latest release and beta, but not with 1.2.7. I’m importing it into package.json like this:

    "wijmo": "file:///Users/johnmontgomery/Downloads/Wijmo5/NpmImages/wijmo-amd-min"
    

    and npm install works fine, but when I run npm start I get these warnings:

    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.detail.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.detail.js
    
    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.filter.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.filter.js
    
    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.grouppanel.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.grouppanel.js
    
    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.grid.js
    
    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.input.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.input.js
    
    WARNING in Circular dependency detected:
    ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.js -> ../../../Downloads/Wijmo5/NpmImages/wijmo-amd-min/wijmo.js
    

    Is this a known issue? Is there anything I can do to bypass it? Everything still works fine as far as I can tell, but the warnings show up in the terminal and the browser console every time I rebuild the project and it’s getting really annoying.

  • Posted 21 September 2017, 4:56 pm EST

    Ok, what went wrong with the formatting, and where is the edit button?

  • Posted 22 September 2017, 10:53 am EST

    Hi,

    We are looking into the issue.

    Thanks,

    Manish Kumar Gupta

  • Posted 25 September 2017, 4:01 am EST

    Hi,

    Please try with the stable release of Angular and let us know if it does not work.

    The sample with Ng 4.4.0-RC.0 is working fine with Wijmo 5.20172.334, please have a look:

    http://plnkr.co/edit/fhjrO9?p=preview

    Thanks,

    Manish Kumar Gupta

  • Posted 25 September 2017, 11:50 am EST

    The problem is with Angular CLI, which that sample isn’t using. In any case, I downgraded my Angular version to 4.4.0-RC.0 (I was on 4.4.3), and it didn’t make a difference.

  • Posted 26 September 2017, 3:32 am EST

    Hi,

    We are sorry, we are unable to replicate the issue with 4.4.3 angular version with Wijmo5.20172.334.

    Please refer to the attached sample for the same.

    Thanks,

    Manish Kumar Gupta

    FlexGrid_Ng4_4_3_wijmo334.zip

  • Posted 26 September 2017, 1:23 pm EST

    That sample is using Angular CLI 1.0.0. As I said, the problem started happening in 1.3.0.

    After some further testing, it seems to also be related to the package being linked locally. I was able to reproduce the warnings in the sample, but only after changing both of those things.

  • Posted 27 September 2017, 7:45 am EST

    Hi,

    We are sorry, we are unable to replicate the issue at our end with Angular CLI 1.3.0 and package installed locally.

    Please refer to the attached image for the same.

    Also, could you please try with replacing packages after deleting wijmo folder from node_modules and install using

    npm install --save ***file-location***
    

    Thanks,

    Manish Kumar Gupta

  • Posted 27 September 2017, 5:48 pm EST

    Deleting node_modules and running that command didn’t make any difference.

    Some more information that may be related: I changed the package source to use wijmo-amd-src instead of wijmo-amd-min. This causes a new set of warnings in addition to the previous ones:

    …/Wijmo5/NpmImages/wijmo-amd-src/wijmo.angular2.grid.ts

    1135:27-44 "export ‘detail’ (imported as ‘wjcGrid’) was not found in ‘wijmo/wijmo.grid’ client:43

    …/Wijmo5/NpmImages/wijmo-amd-src/wijmo.angular2.grid.ts

    1135:48-65 "export ‘detail’ (imported as ‘wjcGrid’) was not found in ‘wijmo/wijmo.grid’ client:43

    …/Wijmo5/NpmImages/wijmo-amd-src/wijmo.angular2.grid.ts

    1136:36-53 "export ‘detail’ (imported as ‘wjcGrid’) was not found in ‘wijmo/wijmo.grid’

    Additionally, it causes a runtime error and the app fails to load:

    TypeError: setting getter-only property “culture” main.bundle.js:14152:1

    …/…/…/…/…/…/Wijmo5/NpmImages/wijmo-amd-src/wijmo.ts http://localhost:4200/main.bundle.js:14152:1

    webpack_require bootstrap%20ecf1ce526844ed03c931:54

    …/…/…/…/…/src/app/app.component.ts http://localhost:4200/main.bundle.js:26150:70

    webpack_require bootstrap%20ecf1ce526844ed03c931:54

    …/…/…/…/…/src/app/app.module.ts http://localhost:4200/main.bundle.js:26204:73

    webpack_require bootstrap%20ecf1ce526844ed03c931:54

    …/…/…/…/…/src/main.ts http://localhost:4200/main.bundle.js:26264:74

    webpack_require bootstrap%20ecf1ce526844ed03c931:54

    [0] http://localhost:4200/main.bundle.js:26402:18

    webpack_require bootstrap%20ecf1ce526844ed03c931:54

    webpackJsonpCallback bootstrap%20ecf1ce526844ed03c931:25

    http://localhost:4200/main.bundle.js:1:1

  • Posted 29 September 2017, 4:23 am EST

    Hi,

    We are trying to replicate the issue at our end. We will let you know once we are able to replicate the issue at our end.

    Also, please refer to the following link this may be helpful.

    https://github.com/angular/angular-cli/issues/7705

    Thanks,

    Manish Kumar Gupta

  • Posted 3 October 2017, 7:13 am EST

    Hi,

    We are sorry, we tried to replicate the issue with Ng4.4.4 and CLI 1.4.4 but we were unable to replicate the issue at our end.

    Please refer to the updated sample and please let us know if you are able to replicate the issue at your end.

    Thanks,

    Manish Kumar Gupta

    Wijmo_ng4.4.4_cli_1.4.4.zip

  • Posted 9 October 2017, 6:43 am EST

    I had same warnings about “circular dependencies” (using cli 1.4.5 & angular 4.4.1) and find a way to resolve it.

    In my package.json I use it like that:

    "wijmo": "./vendor/wijmo-334/wijmo-amd-min",
    

    And when I run ‘npm install’ on Windows, I found that it creates a shortcut/alias ‘./node_modules/wijmo’ > ‘./vendor/wijmo-334/wijmo-amd-min’

    This is what ~angular-cli/webpack/angular don’t like, if you just copy files into a real folder ‘./node_modules/wijmo’, warnings disappear!

  • Posted 10 October 2017, 12:52 am EST

    Hi ,

    We investigate with the team and found that with angular cli 1.4.4 or higher and Wijmo 5.20172.359 build. You will not get circular dependency warning.

    Please try with latest build 5.20172.359 and NG CLI 1.4.4. You can get licensed latest build from My Licenses section in your account.

    Thanks,

    Manish Kr Gupta

  • Posted 19 October 2017, 4:20 am EST

    Had the same issue with the “circular dependencies”, in my case it broke the application in run-time

    angular/cli: 1.4.7

    angular:4.4.5

    Wijmo 5.20172.359

    Resolve as “bertrandgaillard” suggested

  • Posted 8 November 2017, 7:34 pm EST

    Same circular dependencies issue here:

    angular/cli: 1.4.4

    angular:4.4.4

    wijmo 5.20172.359

    On MacOS, unable to resolve using “bertrandgaillard” approach.

    This issue clearly needs some quality support work from Wijmo that has been lacking to date.

  • Posted 8 November 2017, 7:34 pm EST

    Same circular dependencies issue here:

    angular/cli: 1.4.4

    angular:4.4.4

    wijmo 5.20172.359

    On MacOS, unable to resolve using “bertrandgaillard” approach.

    This issue clearly needs some quality support work from Wijmo that has been lacking to date.

  • Posted 8 November 2017, 8:38 pm EST

    In my case at least, problem seems to be first line in the following:

    import * as wjcCore from ‘wijmo/wijmo’;

    import { WjChartModule } from ‘wijmo/wijmo.angular2.chart’;

    I get circular dependency warnings only when wjcCore is imported (which I want in order to access wjcCore.ObservableArray). Does this point to a solution?

  • Posted 16 November 2017, 7:42 pm EST

    The following steps reproduce this issue.

    1. ng new CircularReferenceIssue

    2. cd CircularReferenceIssue

    3. Copy wijmo bits to \CircularReferenceIssue\wijmo-amd-min

    4. npm i -S file:wijmo-amd-min

    5. Copy styles to \CircularReferenceIssue\src\styles\vendor\wijmo.min.css

    6. Add @import ‘styles/vendor/wijmo.min.css’; to styles.css

    7. Add import { WjGridModule } from ‘wijmo/wijmo.angular2.grid’;

      to app.module.ts and include in the imports array

    8. ng build
      or
      ng serve
      (reports circular dependency warnings)

      WARNING in Circular dependency detected:

      wijmo-amd-min\wijmo.grid.js → wijmo-amd-min\wijmo.grid.js

      WARNING in Circular dependency detected:

      wijmo-amd-min\wijmo.js → wijmo-amd-min\wijmo.js

    9. Comment WjGridModule in the imports array in app.module.ts

    10. ng build
      or
      ng serve
      (succeeds; no warnings)

    My setup:

    Angular CLI: 1.5.1

    Node: 6.11.4

    OS: win32 x64 (Windows 10)

    Wijmo Library 5.20172.359

  • Posted 27 November 2017, 10:22 pm EST

    Angular CLI 1.5.4

    Angular 5.0.3

    Node: 8.2.1

    OS: OS X Sierra 10.12.6

    Wijmo: 20173.380 amd-src

    WARNING in Circular dependency detected:

    libs/wijmo/wijmo.chart.ts → libs/wijmo/wijmo.chart.ts

    WARNING in Circular dependency detected:

    libs/wijmo/wijmo.gauge.ts → libs/wijmo/wijmo.gauge.ts

    WARNING in Circular dependency detected:

    libs/wijmo/wijmo.grid.ts → libs/wijmo/wijmo.grid.ts

    WARNING in Circular dependency detected:

    libs/wijmo/wijmo.input.ts → libs/wijmo/wijmo.input.ts

    WARNING in Circular dependency detected:

    libs/wijmo/wijmo.ts → libs/wijmo/wijmo.ts

    I’m just gonna rant for a bit, don’t bother replying if all you have to say is “sorry we can’t replicate the issue here’s an example that uses different versions / build tools and doesn’t come close to resembling a practical project structure”.

    A. I’ve had this product for almost 1 year, every time I go to use it I run into problems that all sum up to the fact that the way it is packaged is not at all standard or commonplace and as such never plays nice with anything else other than your sandbox in which you ‘cannot replicate the issue’

    B. From my first attempt to use Wijmo through the very latest release there has ALWAYS been a difference in amd-src vs amd-min! Does not matter whether I’m using webpack or ngcli, I get errors in src that I don’t see in min… it’s infuriating!

    C. The project structure of each and every example/sample you provide is horrid, and it should be embarrassing. You only have app.ts and treat it like component, module, barrel, and sometimes even service. Often times the specific topic of an example will not even include critical logic in the showcase component because it’s buried somewhere else in the samples package as a base class/component which is extended by, and is convulated with logic to accommodate, every single other component in the samples library. Many of your examples ship pre-transpiled and rely on the js for the example to actually work - if I delete the js and let the compiler do its thing the sample won’t recover. All of this and you’d imagine it can’t get much worse - but to ice the cake I’ll mention that even though the samples double as the component explorer (meant to showcase ease of use!) they are so poorly formatted and contain so few comments in code that it’s a chore to understand whether each method, property, etc of the super base component is pertinent to your desired functionality or whether it’s there for something unrelated to what you’re after.

    D. It’s a bit disingenuous to continue touting world-class angular support, easiest ever components with declarative blah blah who gives a damn when it takes my otherwise well behaved projects and litters the console with warnings (at best) and, if this particular Wijmo release feels like it, errors which prevent build completion. I’ve mentioned this is another post a long while ago but your chosen method of releasing the commercially licensed code is not at all sufficient. Take a page from Telerik’s book and adopt the same methods they use to expose commercially licensed code… it works MUCH better and while their components aren’t quite to the same marketed level as yours they have one significant advantage… I CAN USE IT!

    E. Hire a developer and ask him to build some good example projects with your components using nothing but wijmo-docs, wijmo-examples, and this very forum. … Now, when he quits after a couple of weeks because he can’t build a damn thing, take one of your ninjas from your dev team and make it his mission to simply build cool shit with the wijmo library using the same dev environments and build tools the rest of the world uses. Hopefully he’ll get pissed off enough to change the way you do things and he’ll be equipped to do so because of his previous experience on the dark side. If he asks to use your home-baked sandbox that apparently produces never-ending flawless builds regardless of ngcli/webpack/angular/wijmo/typescript version then fire him immediately and try again with someone else. If he tries to shortcut 75% of the value from example code by not annotating with notes/comments or by wiring 65 separate examples together with one ridiculously impractical base component then conjure up some really comical creative way to fire him because he deserves it.

    You guys make some bad ass components, I REALLY want to use them in every project I’m doing but every single time I try I lose a week of productivity wrestling around with just getting it to integrate without breaking the rest of the project. You need to start releasing those bad ass components in a more consumable manner, and you don’t have to re-invent the wheel to do it… start here with any of the following…

    "

  • Posted 25 December 2017, 9:36 am EST - Updated 3 October 2022, 5:39 pm EST

    You have described my opinion. I could not say it better…

  • Posted 31 January 2018, 2:48 pm EST

    As a previous poster already suggested, the warnings are caused by the symlink from node_modules to the actual files. I was able to install wijmo without symlinks by doing the following:

    npm pack <path to wijmo source directory>
    

    This will create a .tgz file. Place the file wherever you’d like.

    npm install <path to .tgz file>
    

    If you have wijmo source files commited to your repo you can now remove those files and just keep the .tgz file.

    Now wijmo will be installed into node_modules like normal and the circular dependency warnings should go away!

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels