feat: challenge 42

2026-02-10 04:43:03 -05:00 · 2024-01-02 09:51:18 +01:00
parent 68178c6d76
commit e619bc403b
31 changed files with 656 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f

 ## Challenges

-Check [all 41 challenges](https://angular-challenges.vercel.app/)
+Check [all 42 challenges](https://angular-challenges.vercel.app/)

 ## Contributors ✨

--- a/apps/nx/static-dynamic-import/.eslintrc.json
+++ b/apps/nx/static-dynamic-import/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/apps/nx/static-dynamic-import/README.md
+++ b/apps/nx/static-dynamic-import/README.md
@@ -0,0 +1,13 @@
+# Static vs Dynamic Import
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve nx-static-dynamic-import
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/nx/42-static-dynamic-import/).
--- a/apps/nx/static-dynamic-import/project.json
+++ b/apps/nx/static-dynamic-import/project.json
@@ -0,0 +1,73 @@
+{
+  "name": "nx-static-dynamic-import",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/nx/static-dynamic-import/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/nx/static-dynamic-import",
+        "index": "apps/nx/static-dynamic-import/src/index.html",
+        "browser": "apps/nx/static-dynamic-import/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/nx/static-dynamic-import/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/nx/static-dynamic-import/src/favicon.ico",
+          "apps/nx/static-dynamic-import/src/assets"
+        ],
+        "styles": ["apps/nx/static-dynamic-import/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "nx-static-dynamic-import:build:production"
+        },
+        "development": {
+          "buildTarget": "nx-static-dynamic-import:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "nx-static-dynamic-import:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}
--- a/apps/nx/static-dynamic-import/src/app/app.component.ts
+++ b/apps/nx/static-dynamic-import/src/app/app.component.ts
@@ -0,0 +1,26 @@
+import {
+  UserPipe,
+  type User,
+} from '@angular-challenges/static-dynamic-import/users';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [UserPipe, RouterOutlet],
+  selector: 'app-root',
+  template: `
+    Author: {{ author | user }}
+    <router-outlet />
+  `,
+  host: {
+    class: 'flex flex-col',
+  },
+})
+export class AppComponent {
+  author: User = {
+    name: 'Thomas',
+    lastname: 'Laforge',
+    country: 'France',
+  };
+}
--- a/apps/nx/static-dynamic-import/src/app/app.config.ts
+++ b/apps/nx/static-dynamic-import/src/app/app.config.ts
@@ -0,0 +1,14 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter([
+      {
+        path: '',
+        loadComponent: () =>
+          import('@angular-challenges/static-dynamic-import/users'),
+      },
+    ]),
+  ],
+};
--- a/apps/nx/static-dynamic-import/src/assets/.gitkeep
+++ b/apps/nx/static-dynamic-import/src/assets/.gitkeep
--- a/apps/nx/static-dynamic-import/src/favicon.ico
+++ b/apps/nx/static-dynamic-import/src/favicon.ico
--- a/apps/nx/static-dynamic-import/src/index.html
+++ b/apps/nx/static-dynamic-import/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>nx-static-dynamic-import</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/apps/nx/static-dynamic-import/src/main.ts
+++ b/apps/nx/static-dynamic-import/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);
--- a/apps/nx/static-dynamic-import/src/styles.scss
+++ b/apps/nx/static-dynamic-import/src/styles.scss
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */
--- a/apps/nx/static-dynamic-import/tailwind.config.js
+++ b/apps/nx/static-dynamic-import/tailwind.config.js
@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/apps/nx/static-dynamic-import/tsconfig.app.json
+++ b/apps/nx/static-dynamic-import/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
--- a/apps/nx/static-dynamic-import/tsconfig.editor.json
+++ b/apps/nx/static-dynamic-import/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": []
+  }
+}
--- a/apps/nx/static-dynamic-import/tsconfig.json
+++ b/apps/nx/static-dynamic-import/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
 {
-  "total": 41,
-  "🟢": 14,
+  "total": 42,
+  "🟢": 15,
  "🟠": 120,
  "🔴": 207
 }
--- a/docs/src/content/docs/challenges/forms/41-control-value-accessor.md
+++ b/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
--- a/docs/src/content/docs/challenges/nx/42-static-dynamic-import.md
+++ b/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.
--- a/docs/src/content/docs/index.mdx
+++ b/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>

--- a/libs/static-dynamic-import/users/.eslintrc.json
+++ b/libs/static-dynamic-import/users/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "sdi",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "sdi",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/libs/static-dynamic-import/users/README.md
+++ b/libs/static-dynamic-import/users/README.md
@@ -0,0 +1,3 @@
+# users
+
+This library was generated with [Nx](https://nx.dev).
--- a/libs/static-dynamic-import/users/project.json
+++ b/libs/static-dynamic-import/users/project.json
@@ -0,0 +1,14 @@
+{
+  "name": "users",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/static-dynamic-import/users/src",
+  "prefix": "sdi",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}
--- a/libs/static-dynamic-import/users/src/index.ts
+++ b/libs/static-dynamic-import/users/src/index.ts
@@ -0,0 +1,3 @@
+export type { User } from './lib/user.model';
+export { UserPipe } from './lib/user.pipe';
+export { default } from './lib/users.component';
--- a/libs/static-dynamic-import/users/src/lib/user.model.ts
+++ b/libs/static-dynamic-import/users/src/lib/user.model.ts
@@ -0,0 +1,5 @@
+export interface User {
+  name: string;
+  lastname: string;
+  country: string;
+}
--- a/libs/static-dynamic-import/users/src/lib/user.pipe.ts
+++ b/libs/static-dynamic-import/users/src/lib/user.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { User } from './user.model';
+
+@Pipe({
+  name: 'user',
+  standalone: true,
+})
+export class UserPipe implements PipeTransform {
+  transform(user: User): string {
+    return `${user.name} ${user.lastname} - ${user.country}`;
+  }
+}
--- a/libs/static-dynamic-import/users/src/lib/users.component.ts
+++ b/libs/static-dynamic-import/users/src/lib/users.component.ts
@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+import { randCountry, randFirstName, randLastName } from '@ngneat/falso';
+import type { User } from './user.model';
+import { UserPipe } from './user.pipe';
+
+export const randUser = (): User => ({
+  name: randFirstName(),
+  lastname: randLastName(),
+  country: randCountry(),
+});
+
+@Component({
+  selector: 'sdi-users',
+  standalone: true,
+  imports: [UserPipe],
+  template: `
+    <h1 class="mt-4 text-xl">List of Users</h1>
+    @for (user of users; track user) {
+      <div>{{ user | user }}</div>
+    }
+  `,
+  host: {
+    class: 'flex flex-col',
+  },
+})
+export default class UsersComponent {
+  users = [
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+    randUser(),
+  ];
+}
--- a/libs/static-dynamic-import/users/tsconfig.json
+++ b/libs/static-dynamic-import/users/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/libs/static-dynamic-import/users/tsconfig.lib.json
+++ b/libs/static-dynamic-import/users/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,6 +94,7 @@
        "prettier": "^3.1.0",
        "prettier-plugin-organize-imports": "^3.2.4",
        "prettier-plugin-tailwindcss": "^0.5.9",
+        "source-map-explorer": "^2.5.3",
        "testing-library-selector": "^0.3.1",
        "ts-jest": "29.1.0",
        "ts-node": "10.9.1",
@@ -11438,6 +11439,18 @@
        "node-int64": "^0.4.0"
      }
    },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "dev": true,
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/buffer": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -15900,6 +15913,21 @@
      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/handle-thing": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -26463,6 +26491,174 @@
        "node": ">= 8"
      }
    },
+    "node_modules/source-map-explorer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.3.tgz",
+      "integrity": "sha512-qfUGs7UHsOBE5p/lGfQdaAj/5U/GWYBw2imEpD6UQNkqElYonkow8t+HBL1qqIl3CuGZx7n8/CQo4x1HwSHhsg==",
+      "dev": true,
+      "dependencies": {
+        "btoa": "^1.2.1",
+        "chalk": "^4.1.0",
+        "convert-source-map": "^1.7.0",
+        "ejs": "^3.1.5",
+        "escape-html": "^1.0.3",
+        "glob": "^7.1.6",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "open": "^7.3.1",
+        "source-map": "^0.7.4",
+        "temp": "^0.9.4",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "sme": "bin/cli.js",
+        "source-map-explorer": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/source-map-explorer/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -27367,6 +27563,31 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "devOptional": true
    },
+    "node_modules/temp": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz",
+      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
+      "dev": true,
+      "dependencies": {
+        "mkdirp": "^0.5.1",
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/temp/node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
    "node_modules/terser": {
      "version": "5.24.0",
      "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
    "prettier": "^3.1.0",
    "prettier-plugin-organize-imports": "^3.2.4",
    "prettier-plugin-tailwindcss": "^0.5.9",
+    "source-map-explorer": "^2.5.3",
    "testing-library-selector": "^0.3.1",
    "ts-jest": "29.1.0",
    "ts-node": "10.9.1",
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -76,6 +76,9 @@
      ],
      "@tomalaforge/ngrx-callstate-store": [
        "libs/shared/ngrx-callstate-store/src/index.ts"
+      ],
+      "@angular-challenges/static-dynamic-import/users": [
+        "libs/static-dynamic-import/users/src/index.ts"
      ]
    }
  },