#StackBounty: #angular #lazy-loading #codemirror Where do I put imports that would normally go in main.ts, when I am doing lazy module …

Bounty: 100

In my Angular app, I would like to use the library CodeMirror inside a Lazily Loaded module.

The trouble I am having is that the CodeMirror documentation tell me to

In your main.ts or at the root of your application, see documentation:

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';

Import the base css file and your

@import '~codemirror/lib/codemirror'; @import '~codemirror/theme/material';

However I would prefer this code NOT be imported throughout my app since it is only used by one lazy module.

What can I do so that this is imported correctly only when needed?

Get this bounty!!!

#StackBounty: #javascript #reactjs #webpack #lazy-loading #server-side-rendering React Router v5 accompanied with Code Splitting, and D…

Bounty: 100

I have a project where use react-router v3 only for one reason. The reason is the need of server side rendering with data prefetching and the most convenient way to do this is to keep centralized route config in an object or array and loop over the matching elements to fetch the data from the API on the server side. The data later is going to be passed to the client with the response HTML and stored in variable of JSON format string.

Also application uses code splitting, however with the use of babel-plugin-transform-ensure-ignore on sever side I can directly fetch the components instead of lazy loading and the native import method will be used only on client side.

Nevertheless, above-mentioned structure isn’t working with react-router v5, as it’s little bit difficult, since I can’t use @loadable/components, as react-router official documentation suggests. Per my observation @loadable/components just generates the HTML on the server side instead of giving me the components in which I implement the fetch method responsible for server side logic.

Therefore, I would like to ask you the good structure for webpack + react-router v5 + ssr + data prefetch + redux + code splitting

I see it’s quite complicated and no universal solution, however I may be wrong.

Any direction or suggestion is appreciated.

Get this bounty!!!