feat: challenge 42

docs/src/content/docs/challenges/forms/41-control-value-accessor.md

@@ -6,7 +6,6 @@ challengeNumber: 41
 command: forms-control-value-accessor
 sidebar:
   order: 1
-  badge: New
 ---
 
 ## Information

docs/src/content/docs/challenges/nx/42-static-dynamic-import.md

@@ -0,0 +1,30 @@
+---
+title: 🟢 Static vs Dynamic Import
+description: Challenge 42 is about understanding and fixing the eslint rule - Static imports of lazy-loaded libraries are forbidden.
+author: thomas-laforge
+challengeNumber: 42
+command: nx-static-dynamic-import
+sidebar:
+  order: 15
+  badge: New
+---
+
+## Information
+
+If you are using **Nx**, you might have encountered this error:
+
+```ts
+Static imports of lazy-loaded libraries are forbidden.
+
+Library "users" is lazy-loaded in these files:
+
+- apps/nx/static-dynamic-import/src/app/app.config.ts eslint@nx/enforce-module-boundaries
+```
+
+This error is part of the ESLint rule embedded by Nx to prevent people from mixing lazy-loading and eagerly-loading code from the same library. Although this error will not break at runtime or build time, it can lead to consequences for bundle size. The lazy-loaded code will end up in the main bundle, nullifying all the benefits of lazy-loading a library.
+
+## Statement
+
+The goal of this challenge is to improve the code architecture to eliminate this ESLint error.
+
+You will learn how to create a library and how to rearrange code.

docs/src/content/docs/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Go to the latest Challenge
-      link: /challenges/forms/41-control-value-accessor/
+      link: /challenges/nx/42-static-dynamic-import/
       icon: rocket
     - text: Give a star
       link: https://github.com/tomalaforge/angular-challenges
@@ -25,8 +25,8 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 import MyIcon from '../../components/MyIcon.astro';
 
 <CardGrid>
-<Card title="41 Challenges">
-    This repository gathers 41 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="42 Challenges">
+    This repository gathers 42 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>