refactor: move libs

apps/angular/16-master-dependency-injection/.eslintrc.json

@@ -4,23 +4,16 @@
   "overrides": [
     {
       "files": ["*.ts"],
+      "rules": {},
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {}
+      ]
     },
     {
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": "error"
-      }
     }
   ]
 }

apps/angular/16-master-dependency-injection/README.md

@@ -1,7 +1,13 @@
-# angular-master-dependency-injection
+# Master Dependancy Injection
 
-This library was generated with [Nx](https://nx.dev).
+> author: thomas-laforge
 
-## Running unit tests
+### Run Application
 
-Run `nx test angular-master-dependency-injection` to execute the unit tests.
+```bash
+npx nx serve angular-master-dependency-injection
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/16-di/).

apps/angular/16-master-dependency-injection/jest.config.ts

@@ -1,23 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'angular-master-dependency-injection',
-  preset: '../../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory:
-    '../../../coverage/apps/angular/16-master-dependency-injection',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
-};

apps/angular/16-master-dependency-injection/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/apps/angular/16-master-dependency-injection",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

apps/angular/16-master-dependency-injection/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "angular-master-dependency-injection",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false
-}

apps/angular/16-master-dependency-injection/project.json

@@ -1,36 +1,77 @@
 {
   "name": "angular-master-dependency-injection",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
   "sourceRoot": "apps/angular/16-master-dependency-injection/src",
-  "prefix": "lib",
-  "tags": [],
-  "projectType": "library",
+  "prefix": "app",
   "targets": {
     "build": {
-      "executor": "@nx/angular:ng-packagr-lite",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "executor": "@angular-devkit/build-angular:browser",
+      "outputs": ["{options.outputPath}"],
       "options": {
-        "project": "apps/angular/16-master-dependency-injection/ng-package.json"
+        "outputPath": "dist/apps/angular/16-master-dependency-injection",
+        "index": "apps/angular/16-master-dependency-injection/src/index.html",
+        "main": "apps/angular/16-master-dependency-injection/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/angular/16-master-dependency-injection/src/favicon.ico",
+          "apps/angular/16-master-dependency-injection/src/assets"
+        ],
+        "styles": [
+          "apps/angular/16-master-dependency-injection/src/styles.scss"
+        ],
+        "scripts": []
       },
       "configurations": {
         "production": {
-          "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.lib.prod.json"
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
         },
         "development": {
-          "tsConfig": "apps/angular/16-master-dependency-injection/tsconfig.lib.json"
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
         }
       },
       "defaultConfiguration": "production"
     },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "angular-master-dependency-injection:build:production"
+        },
+        "development": {
+          "buildTarget": "angular-master-dependency-injection:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "jestConfig": "apps/angular/16-master-dependency-injection/jest.config.ts"
+        "buildTarget": "angular-master-dependency-injection:build"
       }
     },
     "lint": {
       "executor": "@nx/eslint:lint"
     }
-  }
+  },
+  "tags": []
 }

apps/angular/16-master-dependency-injection/src/app/app.component.ts

@@ -1,6 +1,6 @@
+import { TableComponent } from '@angular-challenges/shared/ui';
 import { AsyncPipe, NgFor } from '@angular/common';
 import { Component, Directive } from '@angular/core';
-import { TableComponent } from 'angular-master-dependency-injection';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';

apps/angular/16-master-dependency-injection/src/index.ts

@@ -1 +0,0 @@
-export { TableComponent } from './lib/table.component';

apps/angular/16-master-dependency-injection/src/lib/table.component.ts

@@ -1,29 +0,0 @@
-import { NgFor, NgTemplateOutlet } from '@angular/common';
-import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
-
-@Component({
-  selector: 'table',
-  standalone: true,
-  imports: [NgTemplateOutlet, NgFor],
-  template: `
-    <thead>
-      <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-    </thead>
-    <tbody *ngFor="let item of items">
-      <ng-container
-        *ngTemplateOutlet="
-          bodyTemplate;
-          context: { $implicit: item }
-        "></ng-container>
-    </tbody>
-  `,
-})
-export class TableComponent<T> {
-  @Input() items!: T[];
-
-  @ContentChild('header', { read: TemplateRef })
-  headerTemplate!: TemplateRef<void>;
-
-  @ContentChild('body', { read: TemplateRef })
-  bodyTemplate!: TemplateRef<{ $implicit: T }>;
-}

apps/angular/16-master-dependency-injection/src/test-setup.ts

@@ -1,8 +0,0 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-import 'jest-preset-angular/setup-jest';

apps/angular/16-master-dependency-injection/tsconfig.json

@@ -13,10 +13,10 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.lib.json"
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.spec.json"
+      "path": "./tsconfig.editor.json"
     }
   ],
   "extends": "../../../tsconfig.base.json",

apps/angular/16-master-dependency-injection/tsconfig.lib.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/**/*.spec.ts",
-    "src/test-setup.ts",
-    "jest.config.ts",
-    "src/**/*.test.ts"
-  ],
-  "include": ["src/**/*.ts"]
-}

apps/angular/16-master-dependency-injection/tsconfig.lib.prod.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {}
-}

apps/angular/16-master-dependency-injection/tsconfig.spec.json

@@ -1,16 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../dist/out-tsc",
-    "module": "commonjs",
-    "target": "es2016",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": [
-    "jest.config.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}

apps/angular/4-typed-context-outlet/README.md

@@ -5,7 +5,7 @@
 ### Run Application
 
 ```bash
-npx nx serve angular-context-outlet-type
+npx nx serve angular-typed-context-outlet
 ```
 
 ### Documentation and Instruction

apps/angular/4-typed-context-outlet/project.json

@@ -1,25 +1,25 @@
 {
-  "name": "angular-context-outlet-type",
+  "name": "angular-typed-context-outlet",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "sourceRoot": "apps/angular/context-outlet-type/src",
+  "sourceRoot": "apps/angular/4-typed-context-outlet/src",
   "prefix": "app",
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/angular/context-outlet-type",
-        "index": "apps/angular/context-outlet-type/src/index.html",
-        "main": "apps/angular/context-outlet-type/src/main.ts",
-        "polyfills": "apps/angular/context-outlet-type/src/polyfills.ts",
-        "tsConfig": "apps/angular/context-outlet-type/tsconfig.app.json",
+        "outputPath": "dist/apps/angular/4-typed-context-outlet",
+        "index": "apps/angular/4-typed-context-outlet/src/index.html",
+        "main": "apps/angular/4-typed-context-outlet/src/main.ts",
+        "polyfills": "apps/angular/4-typed-context-outlet/src/polyfills.ts",
+        "tsConfig": "apps/angular/4-typed-context-outlet/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
-          "apps/angular/context-outlet-type/src/favicon.ico",
-          "apps/angular/context-outlet-type/src/assets"
+          "apps/angular/4-typed-context-outlet/src/favicon.ico",
+          "apps/angular/4-typed-context-outlet/src/assets"
         ],
-        "styles": ["apps/angular/context-outlet-type/src/styles.scss"],
+        "styles": ["apps/angular/4-typed-context-outlet/src/styles.scss"],
         "scripts": []
       },
       "configurations": {
@@ -53,10 +53,10 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "buildTarget": "angular-context-outlet-type:build:production"
+          "buildTarget": "angular-typed-context-outlet:build:production"
         },
         "development": {
-          "buildTarget": "angular-context-outlet-type:build:development"
+          "buildTarget": "angular-typed-context-outlet:build:development"
         }
       },
       "defaultConfiguration": "development"
@@ -64,7 +64,7 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "buildTarget": "angular-context-outlet-type:build"
+        "buildTarget": "angular-typed-context-outlet:build"
       }
     },
     "lint": {

apps/angular/44-view-transition/project.json

@@ -3,24 +3,24 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "app",
-  "sourceRoot": "apps/angular/view-transition/src",
+  "sourceRoot": "apps/angular/44-view-transition/src",
   "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/angular/view-transition",
-        "index": "apps/angular/view-transition/src/index.html",
-        "browser": "apps/angular/view-transition/src/main.ts",
+        "outputPath": "dist/apps/angular/44-view-transition",
+        "index": "apps/angular/44-view-transition/src/index.html",
+        "browser": "apps/angular/44-view-transition/src/main.ts",
         "polyfills": ["zone.js"],
-        "tsConfig": "apps/angular/view-transition/tsconfig.app.json",
+        "tsConfig": "apps/angular/44-view-transition/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
-          "apps/angular/view-transition/src/favicon.ico",
-          "apps/angular/view-transition/src/assets"
+          "apps/angular/44-view-transition/src/favicon.ico",
+          "apps/angular/44-view-transition/src/assets"
         ],
-        "styles": ["apps/angular/view-transition/src/styles.scss"],
+        "styles": ["apps/angular/44-view-transition/src/styles.scss"],
         "scripts": []
       },
       "configurations": {

apps/angular/44-view-transition/src/styles.scss

@@ -1,4 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-

apps/angular/44-view-transition/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es2022",
     "useDefineForClassFields": false,
+    "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,

apps/angular/45-react-in-angular/jest.config.ts

@@ -3,7 +3,7 @@ export default {
   displayName: 'angular-react-in-angular',
   preset: '../../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../../coverage/apps/angular/react-in-angular',
+  coverageDirectory: '../../../coverage/apps/angular/45-react-in-angular',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/angular/45-react-in-angular/project.json

@@ -3,24 +3,24 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "app",
-  "sourceRoot": "apps/angular/react-in-angular/src",
+  "sourceRoot": "apps/angular/45-react-in-angular/src",
   "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/angular/react-in-angular",
-        "index": "apps/angular/react-in-angular/src/index.html",
-        "browser": "apps/angular/react-in-angular/src/main.ts",
+        "outputPath": "dist/apps/angular/45-react-in-angular",
+        "index": "apps/angular/45-react-in-angular/src/index.html",
+        "browser": "apps/angular/45-react-in-angular/src/main.ts",
         "polyfills": ["zone.js"],
-        "tsConfig": "apps/angular/react-in-angular/tsconfig.app.json",
+        "tsConfig": "apps/angular/45-react-in-angular/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
-          "apps/angular/react-in-angular/src/favicon.ico",
-          "apps/angular/react-in-angular/src/assets"
+          "apps/angular/45-react-in-angular/src/favicon.ico",
+          "apps/angular/45-react-in-angular/src/assets"
         ],
-        "styles": ["apps/angular/react-in-angular/src/styles.scss"],
+        "styles": ["apps/angular/45-react-in-angular/src/styles.scss"],
         "scripts": []
       },
       "configurations": {
@@ -73,7 +73,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/angular/react-in-angular/jest.config.ts"
+        "jestConfig": "apps/angular/45-react-in-angular/jest.config.ts"
       }
     }
   }

apps/angular/45-react-in-angular/src/app/react/ReactPost.tsx

@@ -0,0 +1,29 @@
+// import React from 'react';
+
+export default function ReactPost(props: {
+  title?: string;
+  description?: string;
+  pictureLink?: string;
+  selected?: boolean;
+  handleClick: () => void;
+}) {
+  return (
+    <div className={props.selected ? 'bg-blue-100' : 'bg-white'}>
+      <div className="max-w-sm overflow-hidden rounded shadow-lg">
+        <img
+          className="h-32 w-full object-cover"
+          src={props.pictureLink}
+          alt={props.title}></img>
+        <div className="flex flex-col gap-2 px-6 py-4">
+          <div className="mb-2 text-xl font-bold">{props.title}</div>
+          <p className="text-base text-gray-700">{props.description}</p>
+          <button
+            className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
+            onClick={props.handleClick}>
+            Select
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/angular/45-react-in-angular/tsconfig.json

@@ -8,26 +8,26 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
   },
   "files": [],
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.app.json",
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.spec.json",
+      "path": "./tsconfig.spec.json"
     },
     {
-      "path": "./tsconfig.editor.json",
-    },
+      "path": "./tsconfig.editor.json"
+    }
   ],
   "extends": "../../../tsconfig.base.json",
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-  },
+    "strictTemplates": true
+  }
 }

apps/angular/46-simple-animations/jest.config.ts

@@ -3,7 +3,7 @@ export default {
   displayName: 'angular-simple-animations',
   preset: '../../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../../coverage/apps/angular/simple-animations',
+  coverageDirectory: '../../../coverage/apps/angular/46-simple-animations',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [
       'jest-preset-angular',

apps/angular/46-simple-animations/project.json

@@ -3,24 +3,24 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "prefix": "app",
-  "sourceRoot": "apps/angular/simple-animations/src",
+  "sourceRoot": "apps/angular/46-simple-animations/src",
   "tags": [],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/angular/simple-animations",
-        "index": "apps/angular/simple-animations/src/index.html",
-        "browser": "apps/angular/simple-animations/src/main.ts",
+        "outputPath": "dist/apps/angular/46-simple-animations",
+        "index": "apps/angular/46-simple-animations/src/index.html",
+        "browser": "apps/angular/46-simple-animations/src/main.ts",
         "polyfills": ["zone.js"],
-        "tsConfig": "apps/angular/simple-animations/tsconfig.app.json",
+        "tsConfig": "apps/angular/46-simple-animations/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
-          "apps/angular/simple-animations/src/favicon.ico",
-          "apps/angular/simple-animations/src/assets"
+          "apps/angular/46-simple-animations/src/favicon.ico",
+          "apps/angular/46-simple-animations/src/assets"
         ],
-        "styles": ["apps/angular/simple-animations/src/styles.scss"],
+        "styles": ["apps/angular/46-simple-animations/src/styles.scss"],
         "scripts": []
       },
       "configurations": {
@@ -73,7 +73,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/angular/simple-animations/jest.config.ts"
+        "jestConfig": "apps/angular/46-simple-animations/jest.config.ts"
       }
     }
   }

apps/angular/46-simple-animations/tsconfig.json

@@ -8,26 +8,26 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": true
   },
   "files": [],
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.app.json",
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.spec.json",
+      "path": "./tsconfig.spec.json"
     },
     {
-      "path": "./tsconfig.editor.json",
-    },
+      "path": "./tsconfig.editor.json"
+    }
   ],
   "extends": "../../../tsconfig.base.json",
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true,
-  },
+    "strictTemplates": true
+  }
 }