Updated crud-module and demo to Angular 16 (#55)

Co-authored-by: markoh <[email protected]>
manfredsteyer · Aug 17, 2023 · 4619628 · 4619628
1 parent 7b7f0a1
commit 4619628
Show file tree

Hide file tree

Showing 10 changed files with 269 additions and 1,160 deletions.
diff --git a/angular-crud/.npmignore b/angular-crud/.npmignore
@@ -0,0 +1,4 @@
+
+# Ignores TypeScript files, but keeps definitions.
+!*.ts
+!*.d.ts
diff --git a/angular-crud/package-lock.json b/angular-crud/package-lock.json
diff --git a/angular-crud/package.json b/angular-crud/package.json
@@ -18,21 +18,21 @@
   "author": "Manfred Steyer",
   "license": "MIT",
   "schematics": "./src/collection.json",
+  "dependencies": {
+    "@angular-devkit/core": "^16.1.8",
+    "@angular-devkit/schematics": "^16.1.8",
+    "@angular/cdk": "^16.1.7",
+    "@schematics/angular": "^16.1.8",
+    "json5": "^2.2.0",
+    "typescript": "~5.1.3"
+  },
   "devDependencies": {
-    "@types/jasmine": "^3.10.3",
+    "@types/jasmine": "~4.3.0",
     "@types/json5": "0.0.30",
-    "@types/node": "^17.0.15",
+    "@types/node": "^16.11.7",
     "chalk": "^4.1.2",
     "istanbul": "0.4.5",
-    "jasmine": "^4.0.2",
-    "typescript": "^4.5.5"
-  },
-  "dependencies": {
-    "json5": "^2.2.0",
-    "@angular-devkit/core": "^13.2.2",
-    "@angular-devkit/schematics": "^13.2.2",
-    "@angular/cdk": "^13.2.1",
-    "@schematics/angular": "^13.2.2"
+    "jasmine": "^4.0.0"
   },
   "repository": {
     "type": "git",

diff --git a/angular-crud/src/collection.json b/angular-crud/src/collection.json
@@ -1,10 +1,10 @@
 {
-    "schematics": {
-      "menu": {
-        "aliases": [ "crud-module" ],
-        "factory": "./crud-module/index#generate",
-        "description": "Generates a crud module",
-        "schema": "./crud-module/schema.json"
-      }
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "crud-module": {
+      "factory": "./crud-module/index#generate",
+      "description": "Generates a crud module",
+      "schema": "./crud-module/schema.json"
     }
-}
+  }
+}
diff --git a/angular-crud/src/crud-module/index_spec.ts b/angular-crud/src/crud-module/index_spec.ts
@@ -73,14 +73,14 @@ describe('Angular CRUD Schematics', () => {
     // add model file
     tree.create('/projects/crudtest/src/app/hotel/model.json', JSON.stringify(model));
 
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions, tree).toPromise();
-    appTree = await schematicRunner.runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree).toPromise();
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'workspace', workspaceOptions, tree);
+    appTree = await schematicRunner.runExternalSchematic('@schematics/angular', 'application', appOptions, appTree);
   });
 
   it('should create hotel-list component files', (done) => {
     const files = ['hotel-list.component.html', 'hotel-list.component.spec.ts', 'hotel-list.component.ts'];
     const hotelListPath = '/projects/crudtest/src/app/hotel/hotel-list/';
-    schematicRunner.runSchematicAsync('crud-module', defaultOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', defaultOptions, appTree).then(tree => {
       files.forEach(f => {
         const path = `${hotelListPath}${f}`;
         expect(tree.exists(path)).toEqual(true);
@@ -91,7 +91,7 @@ describe('Angular CRUD Schematics', () => {
 
   it('should use Bootstrap by default', (done) => {
     const hotelListPath = '/projects/crudtest/src/app/hotel/hotel-list/hotel-list.component.html';
-    schematicRunner.runSchematicAsync('crud-module', defaultOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', defaultOptions, appTree).then(tree => {
       const listTemplate = tree.readContent(hotelListPath);
       expect(listTemplate).toContain(`class="table table-centered table-hover mb-0"`);
       expect(listTemplate).toContain(`class="btn btn-primary"`);
@@ -102,7 +102,7 @@ describe('Angular CRUD Schematics', () => {
   it('should create hotel-edit component files', (done) => {
     const files = ['hotel-edit.component.html', 'hotel-edit.component.spec.ts', 'hotel-edit.component.ts'];
     const hotelListPath = '/projects/crudtest/src/app/hotel/hotel-edit/';
-    schematicRunner.runSchematicAsync('crud-module', defaultOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', defaultOptions, appTree).then(tree => {
       files.forEach(f => {
         const path = `${hotelListPath}${f}`;
         expect(tree.exists(path)).toEqual(true);
@@ -112,7 +112,7 @@ describe('Angular CRUD Schematics', () => {
   });
 
   it('should add routes', (done) => {
-    schematicRunner.runSchematicAsync('crud-module', defaultOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', defaultOptions, appTree).then(tree => {
       const routingModule = tree.readContent('/projects/crudtest/src/app/hotel/hotel.routes.ts');
       expect(routingModule).toContain(`path: 'hotels'`);
       expect(routingModule).toContain(`path: 'hotels/:id'`);
@@ -121,7 +121,7 @@ describe('Angular CRUD Schematics', () => {
   });
 
   it('should import the module in the app module file', (done) => {
-    schematicRunner.runSchematicAsync('crud-module', defaultOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', defaultOptions, appTree).then(tree => {
       const appModule = tree.readContent('/projects/crudtest/src/app/app.module.ts');
       expect(appModule).toMatch(/.\/hotel\/hotel.module/);
       expect(appModule).toMatch(/HotelModule/);
@@ -133,7 +133,7 @@ describe('Angular CRUD Schematics', () => {
     const bootstrapOptions = {...defaultOptions};
     bootstrapOptions.style = 'bootstrap';
 
-    schematicRunner.runSchematicAsync('crud-module', bootstrapOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', bootstrapOptions, appTree).then(tree => {
       const hotelList = tree.readContent('/projects/crudtest/src/app/hotel/hotel-list/hotel-list.component.html');
       expect(hotelList).toMatch(/<table class="table/);
 
@@ -147,7 +147,7 @@ describe('Angular CRUD Schematics', () => {
     const materialOptions = {...defaultOptions};
     materialOptions.style = 'material';
 
-    schematicRunner.runSchematicAsync('crud-module', materialOptions, appTree).toPromise().then(tree => {
+    schematicRunner.runSchematic('crud-module', materialOptions, appTree).then(tree => {
       const hotelList = tree.readContent('/projects/crudtest/src/app/hotel/hotel-list/hotel-list.component.html');
       expect(hotelList).toMatch(/<table mat-table/);
 

diff --git a/angular-crud/tsconfig.json b/angular-crud/tsconfig.json
@@ -1,10 +1,8 @@
 {
   "compilerOptions": {
     "baseUrl": "tsconfig",
-    "lib": [
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2018", "dom"],
+    "declaration": true,
     "module": "commonjs",
     "moduleResolution": "node",
     "noEmitOnError": true,
@@ -19,15 +17,8 @@
     "sourceMap": true,
     "strictNullChecks": true,
     "target": "es6",
-    "types": [
-      "jasmine",
-      "node"
-    ]
+    "types": ["jasmine", "node"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/*/files/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/*/files/**/*"]
 }
diff --git a/demo/angular.json b/demo/angular.json
@@ -101,6 +101,5 @@
         }
       }
     }
-  },
-  "defaultProject": "demo"
+  }
 }
diff --git a/demo/package.json b/demo/package.json
@@ -10,22 +10,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.0",
-    "@angular/common": "~12.2.0",
-    "@angular/compiler": "~12.2.0",
-    "@angular/core": "~12.2.0",
-    "@angular/forms": "~12.2.0",
-    "@angular/platform-browser": "~12.2.0",
-    "@angular/platform-browser-dynamic": "~12.2.0",
-    "@angular/router": "~12.2.0",
+    "@angular/animations": "^16.1.8",
+    "@angular/common": "^16.1.8",
+    "@angular/compiler": "^16.1.8",
+    "@angular/core": "^16.1.8",
+    "@angular/forms": "^16.1.8",
+    "@angular/platform-browser": "^16.1.8",
+    "@angular/platform-browser-dynamic": "^16.1.8",
+    "@angular/router": "^16.1.8",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.0",
-    "@angular/cli": "~12.2.0",
-    "@angular/compiler-cli": "~12.2.0",
+    "@angular-devkit/build-angular": "^16.1.8",
+    "@angular/cli": "^16.1.8",
+    "@angular/compiler-cli": "^16.1.8",
     "@types/jasmine": "~3.8.2",
     "@types/node": "^16.4.13",
     "jasmine-core": "~3.8.0",
@@ -34,6 +34,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "typescript": "~4.3.5"
+    "typescript": "~4.9.5"
   }
-}
+}
diff --git a/demo/src/test.ts b/demo/src/test.ts
@@ -7,19 +7,8 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting()
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -14,12 +14,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,6 +101,5 @@ @@
             }
           }
         }
-      },
-      "defaultProject": "demo"
+      }
     }