fabric8-ui webpack config ignores nested node_module packages

[christianvogt]

The current webpack configuration is setup to resolve node_modules only at the root level in fabric8-ui. This means that when libraries that depend on another library, fabric8-ui must also ensure it has an equivalent dependency so that it gets installed at the root (unless it's the only library of that version in the install). This means that a library cannot depend a version of a library that differs in version from fabric8-ui because the one defined by fabric8-ui will be forced to be used. This may have runtime consequences such as incompatible API.

Changing the current module resolution will impact:

• bundle size if multiple versions of libraries are defined in components and their package.json dependencies aren't specified correctly with ranges
• npm link for testing downstream components within fabric8-ui

The bundle size, although important to keep small, can be addressed as we find dependency discrepancies. We should aim to ensure that we correctly use ranges for dependencies so that libraries can be shared correctly.

Linking libraries for inclusion into fabric8-ui for development must continue to work.

• Create PRs for all projects to use peer dependencies
• Merge all PRs that update project peer dependencies
• All projects that depend on other project(s) whose dependencies are moving to peer dependencies should update their dependency versions to point to the latest.
• Update fabric8-ui with latest versions of related projects
• Merge fabric8-ui webpack changes

[christianvogt]

After investigating this issue and making the necessary webpack changes, how we define our dependencies on angular in downstream components now is a cause for breakage with npm link.

All dependencies on angular must be defined as peer dependencies and not a direct dependency. There should only ever be a single instance of angular modules in the system and as such libraries should depend on angular as a peer. The libraries can add angular as a dev dependency for tests.

We should be updating all downstream components to use peer dependencies on angular:

• fabric8-planner
• ngx-widgets
• ngx-forge / ngx-launcher
• ngx-login-client
• ngx-fabric8-wit
• fabric8-recommender
• ngx-base
• fabric8-analytics-dependency-editor
• Did I miss any?

When using npm link all dev dependencies get installe, resulting in angular appearing in the library node_modules directory which breaks running fabric8-ui with linked projects. Instead when linking, I found that libraries should be linked with npm link --only=production to avoid installing dev dependencies. This aligns correctly with how npm install works when pulling dependencies from the registry and installing them. I tested building planner and linking their dist directory with npm link --only=production and everything worked as expected.

[christianvogt]

Adding others for visibility
@joshuawilson @corinnekrych @michaelkleinhenz @sanbornsen @edewit @jyasveer @arunkumars08

@arunkumars08 with the changes I'm proposing I don't think you'll need to do those work arounds in fabric8-ui to get npm link to work as part of your PR fabric8-ui/fabric8-ui#2962

[arunkumars08]

@christianvogt Sure Christian, let me check that.
Also, one thing to note - "fabric8-analytics-dependency-editor" appears as a 2nd level dependency to "fabric8-ui".
It sits inside "ngx-forge" which in turn sits inside "fabric8-ui".

[arunkumars08]

Sorry, accidentally closed the issue.

[christianvogt]

@arunkumars08 by fixing our webpack config, you should no longer need to add the alias in fabric8-ui to point to the nested fabric8-analytics-dependency-editor.

I'll start posting PRs. Unfortunately there are 8 of them because of all the different repos where dependencies need to be updated.

[arunkumars08]

@christianvogt Thanks, Christian. I understand there are many places to be updated.
Just curious to know when this all will be ready?
Because the PR of mine will introduce a new feature inside fabric8-ui which is highly critical for a few other sprint related items of "Getting Started" to proceed.

[joshuawilson]

@christianvogt if you are confident in the npm link change, please update the README files for each lib. There should be a section describing how to do that.

Changing to use peer deps is good, thanks for figuring it out.

[christianvogt]

@joshuawilson I'll update the README files.

I installed and linked (npm link --production) the 8 libraries above into fabric8-ui and I was able to successfully run a local dev server.

@michaelkleinhenz I did not try running standalone planner (never ran it before). I may want to do a screen share with you and run through confirm the change is working with standalone planner.

@arunkumars08 I'll start posting the PRs tonight. Unfortunately there'll be 9 PRs in different repos to merge to complete the task.