Can a set UI component be moved to devDependencies?

[zmpo]

DevExtreme is a set UI component, it can be used in angular with devextreme-angular.

There is a simple demo

1 NO

If Devextreme/devextreme-angular is added to dependencies, npm run start:all will get this error:

[2] X [ERROR] Could not resolve "stream"
[2]
[2]     node_modules/inferno-server/dist/index.esm.js:2:25:
[2]       2 │ import { Readable } from 'stream';
[2]         ╵                          ~~~~~~~~
[2]
[2]   The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
[2]
[0] X [ERROR] Could not resolve "stream"
[0]
[0]     node_modules/inferno-server/dist/index.esm.js:2:25:
[0]       2 │ import { Readable } from 'stream';
[0]         ╵                          ~~~~~~~~
[0]
[0]   The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
[0]
[0] 0 of 5 warnings and 1 error shown (disable the message limit with --log-limit=0)
[0]  ERR!  Error bundling shared npm package
[0]  ERR!  Build failed with 1 error:
 ERR!  node_modules/inferno-server/dist/index.esm.js:2:25: ERROR: Could not resolve "stream"
[0]  ERR!  For more information, run in verbose mode
[0]  NOTE
[0]  NOTE
[0]  NOTE  ** Important Information: ***
[0]  NOTE  The error message above shows an issue with bundling a node_module.
[0]  NOTE  In most cases this is because you (indirectly) shared a Node.js package,
[0]  NOTE  while Native Federation builds for the browser.
[0]  NOTE  You can move such packages into devDependencies or skip them in your federation.config.js.
[0]  NOTE
[0]  NOTE  More Details: https://bit.ly/nf-issue
[0]  NOTE
[0]  NOTE
[2] 0 of 5 warnings and 1 error shown (disable the message limit with --log-limit=0)
[2]  ERR!  Error bundling shared npm package
[2]  ERR!  Build failed with 1 error:
[2]  ERR!  node_modules/inferno-server/dist/index.esm.js:2:25: ERROR: Could not resolve "stream"

2 YES

skipping them in your federation.config.js is not work. Try to move them to devDependencies.

npm run start:all success. In projects\mfe2\src\app\home\home.component.ts

When i try to call this.dataGrid In NavbarComponent imported from @my-library, it is undefined. If NavbarComponent is imported from '../navbar/navbar.component', it's ok.

I suspect that moving the dependency to devDependencies caused the ContentChild to fail.

Question:

Can I move Devextreme to devDependencies?

[zmpo]

There is another set of components, ng-zorro-antd, which also has a demo. Switch to the branch with-routing-2 . If I put it in the dependencies, after installing the dependencies and running start:mfe2, I get the following error:

X [ERROR] Could not resolve "cron-parser"

    node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-cron-expression.mjs:9:32:
      9 │ import { parseExpression } from 'cron-parser';
        ╵                                 ~~~~~~~~~~~~~

  You can mark the path "cron-parser" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.

1 of 7 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package 
 ERR!  Build failed with 7 errors:
 ERR!  node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-cron-expression.mjs:9:32: ERROR: Could not resolve "cron-parser"
 ERR!  node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-graph.mjs:7:46: ERROR: Could not resolve "d3-shape"
 ERR!  node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-graph.mjs:8:21: ERROR: Could not resolve "d3-drag"
 ERR!  node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-graph.mjs:9:32: ERROR: Could not resolve "d3-selection"
 ERR!  node_modules/ng-zorro-antd/fesm2022/ng-zorro-antd-graph.mjs:10:50: ERROR: Could not resolve "d3-zoom"
 ERR!  ...
 ERR!  For more information, run in verbose mode

As i konw cron-parser is a commonjs library , Can I move it to devDependencies? This way, there won't be any errors, but I'm not sure if there might be potential issues, like the one mentioned earlier with Devextreme. this.dataGrid results in undefined. It's called within NavbarComponent, which is imported from @my-library.@manfredsteyer

[zmpo]

@asollberger Hi, could you help me check if the answer to this question is Yes or No?

[zmpo]

Duplicate #533