Angular 13.3.2 and Play 2.8.13

README.md

@@ -10,17 +10,17 @@ Read more @ http://bit.ly/2AStvhK
 
 ## Used Summary
 
-* [Play Framework: 2.8.0](https://www.playframework.com/documentation/2.8.x/Home)
-* [Angular: 8.x.x](https://angular.io/)
-* [Angular CLI: 8.3.9](https://cli.angular.io/)
+* [Play Framework: 2.8.13](https://www.playframework.com/documentation/2.8.x/Home)
+* [Angular: 13.3.2](https://angular.io/)
+* [Angular CLI: 13.3.2](https://cli.angular.io/)
 
 ## How to use it?
 
 ### Prerequisites
 
 * [Node.js](https://nodejs.org/) (version 10 or higher)
 * [JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) (recommend version 1.8 or higher)
-* [scala](https://www.scala-lang.org/download/)
+* [scala: 2.13](https://www.scala-lang.org/download/)
 
 ### Let's get started,
 

build.sbt

@@ -8,8 +8,8 @@ lazy val root = (project in file(".")).enablePlugins(PlayScala).settings(
 
 resolvers += Resolver.sonatypeRepo("snapshots")
 
-scalaVersion := "2.12.8"
+scalaVersion := "2.13.8"
 
 libraryDependencies += guice
-libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "4.0.2" % Test
+libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "5.1.0" % Test
 libraryDependencies += "com.h2database" % "h2" % "1.4.199"

project/plugins.sbt

@@ -1,2 +1,2 @@
 // The Play plugin
-addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.8.0")
+addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.8.13")

ui/.gitignore

@@ -29,6 +29,7 @@ speed-measure-plugin.json
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

ui/angular.json

@@ -25,7 +25,13 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -38,9 +44,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -49,10 +53,15 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -87,18 +96,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -118,15 +115,6 @@
               "devServerTarget": "scala-play-angular-seed:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

ui/e2e/tsconfig.e2e.json

@@ -3,11 +3,11 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",
       "node"
     ]
   }
-}
+}

ui/package.json

@@ -12,42 +12,42 @@
     "test:coverage": "ng test --watch=true --code-coverage=true",
     "test:coverage:ci": "ng test --watch=false --code-coverage=true --browsers ChromeHeadless",
     "build:dev": "ng build --progress --output-path ../public",
-    "build:prod": "ng build --progress --prod --output-path ../public"
+    "build:prod": "ng build --progress --configuration production --output-path ../public"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.10",
-    "@angular/common": "~8.2.10",
-    "@angular/compiler": "~8.2.10",
-    "@angular/core": "~8.2.10",
-    "@angular/forms": "~8.2.10",
-    "@angular/platform-browser": "~8.2.10",
-    "@angular/platform-browser-dynamic": "~8.2.10",
-    "@angular/router": "~8.2.10",
+    "@angular/animations": "~13.3.2",
+    "@angular/common": "~13.3.2",
+    "@angular/compiler": "~13.3.2",
+    "@angular/core": "~13.3.2",
+    "@angular/forms": "~13.3.2",
+    "@angular/platform-browser": "~13.3.2",
+    "@angular/platform-browser-dynamic": "~13.3.2",
+    "@angular/router": "~13.3.2",
     "core-js": "^3.1.4",
     "rxjs": "~6.5.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.9",
-    "@angular/cli": "~8.3.9",
-    "@angular/compiler-cli": "~8.2.10",
-    "@angular/language-service": "~8.2.10",
-    "@types/jasmine": "~3.3.13",
+    "@angular-devkit/build-angular": "~13.3.2",
+    "@angular/cli": "~13.3.2",
+    "@angular/compiler-cli": "~13.3.2",
+    "@angular/language-service": "~13.3.2",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.6",
-    "@types/node": "^12.6.8",
-    "codelyzer": "~5.1.0",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^4.2.0",
-    "karma-chrome-launcher": "^3.0.0",
-    "karma-coverage-istanbul-reporter": "~2.0.5",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.17",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~5.18.0",
-    "typescript": "~3.5.3"
+    "tslint": "~6.1.0",
+    "typescript": "~4.6.3"
   }
-}
+}

ui/src/app/app.component.html

@@ -5,7 +5,7 @@ <h1>
   </h1>
   <nav>
     <a [routerLink]="['scala']">
-      <img width="450" height="300" src="../assets/scala.png">
+      <img width="450" height="198" src="../assets/scala.png">
     </a>
     <a [routerLink]="['play']">
       <img width="400" height="300" src="../assets/play.svg">

ui/src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 
@@ -16,7 +16,7 @@ class FakeAppService extends AppService {
 }
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
@@ -33,17 +33,17 @@ describe('AppComponent', () => {
       }
     }).compileComponents();
   }));
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('Test content');
   }));
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

ui/src/app/app.module.ts

@@ -44,7 +44,7 @@ const routes: Routes = [
       cookieName: 'Csrf-Token',
       headerName: 'Csrf-Token',
     }),
-    RouterModule.forRoot(routes)
+    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
   ],
   providers: [
     AppService,

ui/src/app/route-example/route-example.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { RouteExampleComponent } from './route-example.component';
@@ -7,7 +7,7 @@ describe('RouteExampleComponent', () => {
   let component: RouteExampleComponent;
   let fixture: ComponentFixture<RouteExampleComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ RouteExampleComponent ],
       imports: [

ui/src/environments/environment.ts

@@ -12,4 +12,4 @@ export const environment = {
  * import the following file, but please comment it out in production mode
  * because it will have performance impact when throw error
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

ui/src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

ui/src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
@@ -12,7 +12,9 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

ui/src/tsconfig.app.json

@@ -4,8 +4,11 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

ui/tsconfig.json

@@ -6,9 +6,8 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2015",

ui/tslint.json

@@ -73,7 +73,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [