Merge pull request #33 from formio/Update-to-Angular-12

FIO-2857: Upgrade to Angular 12
formio · Sep 15, 2022 · 54d2ebe · 54d2ebe
2 parents 0db3ed2 + e1ced0f
commit 54d2ebe
Show file tree

Hide file tree

Showing 18 changed files with 66 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -13,50 +13,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.14",
-    "@angular/common": "^7.2.14",
-    "@angular/compiler": "^7.2.14",
-    "@angular/core": "^7.2.14",
-    "@angular/elements": "^7.2.14",
-    "@angular/forms": "^7.2.14",
-    "@angular/http": "^7.2.15",
-    "@angular/platform-browser": "^7.2.14",
-    "@angular/platform-browser-dynamic": "^7.2.14",
-    "@angular/router": "^7.2.14",
-    "angular-formio": "^4.4.3",
-    "bootstrap": "^4.4.1",
-    "bootswatch": "^4.4.1",
-    "core-js": "^2.6.0",
+    "@angular/animations": "^12.0.0",
+    "@angular/common": "^12.0.0",
+    "@angular/compiler": "^12.0.0",
+    "@angular/core": "^12.0.0",
+    "@angular/elements": "^12.0.0",
+    "@angular/forms": "^12.0.0",
+    "@angular/platform-browser": "^12.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
+    "@angular/router": "^12.0.0",
+    "@formio/angular": "^5.0.0",
+    "bootstrap": "^4.5.3",
+    "bootswatch": "^4.5.3",
+    "core-js": "^3.8.1",
     "font-awesome": "^4.7.0",
-    "formiojs": "^4.8.0-rc.12",
-    "lodash": "^4.17.15",
-    "node-sass": "^4.13.0",
-    "rxjs": "^6.5.4",
-    "zone.js": "^0.10.2"
-  },
-  "browser": {
-    "vm": false
+    "formiojs": "^4.12.4",
+    "jquery": "^3.5.1",
+    "ngx-bootstrap": "^6.2.0",
+    "prism-themes": "^1.5.0",
+    "prismjs": "^1.22.0",
+    "rxjs": "^6.6.3",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.21",
-    "@angular/cli": "^7.3.9",
-    "@angular/compiler-cli": "^7.2.14",
-    "@angular/language-service": "^7.2.14",
-    "@types/jasmine": "^3.5.0",
+    "@angular-devkit/build-angular": "^12.0.0",
+    "@angular/cli": "^12.0.0",
+    "@angular/compiler-cli": "^12.0.0",
+    "@angular/language-service": "^12.0.0",
+    "@types/jasmine": "^3.6.2",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^10.12.12",
-    "codelyzer": "^4.5.0",
-    "jasmine-core": "^3.5.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^3.1.3",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-cli": "^2.0.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "^2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.1",
-    "protractor": "^5.4.2",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.20.1",
-    "typescript": "<3.2.0"
+    "@types/node": "^14.14.14",
+    "codelyzer": "^6.0.1",
+    "jasmine-core": "^3.6.0",
+    "jasmine-spec-reporter": "^6.0.0",
+    "karma": "^6.3.2",
+    "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": "^9.1.1",
+    "tslint": "^6.1.3",
+    "typescript": "~4.2.4"
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { FormioResources } from 'angular-formio/resource';
-import { FormioAuthService } from 'angular-formio/auth';
+import { FormioResources } from '@formio/angular/resource';
+import { FormioAuthService } from '@formio/angular/auth';
 
 @Component({
   selector: 'app-root',

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,10 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { FormioModule, FormioAppConfig } from 'angular-formio';
-import { FormManagerService, FormManagerConfig } from 'angular-formio/manager';
-import { FormioAuthService, FormioAuthConfig } from 'angular-formio/auth';
-import { FormioResources } from 'angular-formio/resource';
+import { FormioModule, FormioAppConfig } from '@formio/angular';
+import { FormManagerService, FormManagerConfig } from '@formio/angular/manager';
+import { FormioAuthService, FormioAuthConfig } from '@formio/angular/auth';
+import { FormioResources } from '@formio/angular/resource';
 import { AuthConfig, AppConfig } from '../config';
 
 import { AppComponent } from './app.component';
@@ -36,19 +36,19 @@ import { HeroComponent } from './hero/hero.component';
       },
       {
         path: 'auth',
-        loadChildren: './auth/auth.module#AuthModule'
+        loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule)
       },
       {
         path: 'form',
-        loadChildren: './form/form.module#FormModule'
+        loadChildren: () => import('./form/form.module').then(m => m.FormModule)
       },
       {
         path: 'event',
-        loadChildren: './event/event.module#EventModule'
+        loadChildren: () => import('./event/event.module').then(m => m.EventModule)
       },
       {
         path: 'employee',
-        loadChildren: './employee/employee.module#EmployeeModule'
+        loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule)
       }
     ], {useHash: true})
   ],

diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts
@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { LoginComponent } from './login/login.component';
-import { FormioModule } from 'angular-formio';
-import { FormioAuth, FormioAuthRoutes } from 'angular-formio/auth';
+import { FormioModule } from '@formio/angular';
+import { FormioAuth, FormioAuthRoutes } from '@formio/angular/auth';
 
 export const authRoutes = FormioAuthRoutes({
   login: LoginComponent

diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormioAuthLoginComponent } from 'angular-formio/auth';
+import { FormioAuthLoginComponent } from '@formio/angular/auth';
 @Component({
   templateUrl: './login.component.html'
 })

diff --git a/src/app/employee/employee.module.ts b/src/app/employee/employee.module.ts
@@ -6,7 +6,7 @@ import {
   FormioResourceConfig,
   FormioResourceRoutes,
   FormioResourceService
-} from 'angular-formio/resource';
+} from '@formio/angular/resource';
 
 @NgModule({
   imports: [

diff --git a/src/app/event/event-resource/event-resource.component.ts b/src/app/event/event-resource/event-resource.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormioResourceComponent } from 'angular-formio/resource';
+import { FormioResourceComponent } from '@formio/angular/resource';
 
 @Component({
   selector: 'app-event-resource',

diff --git a/src/app/event/event-view/event-view.component.ts b/src/app/event/event-view/event-view.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { FormioResourceViewComponent } from 'angular-formio/resource';
+import { FormioResourceViewComponent } from '@formio/angular/resource';
 
 @Component({
   selector: 'app-event-view',

diff --git a/src/app/event/event.module.ts b/src/app/event/event.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { FormioModule } from 'angular-formio';
+import { FormioModule } from '@formio/angular';
 import {
   FormioResource,
   FormioResourceConfig,
@@ -10,7 +10,7 @@ import {
   FormioResourceCreateComponent,
   FormioResourceEditComponent,
   FormioResourceDeleteComponent
-} from 'angular-formio/resource';
+} from '@formio/angular/resource';
 import { EventViewComponent } from './event-view/event-view.component';
 import { EventResourceComponent } from './event-resource/event-resource.component';
 

diff --git a/src/app/event/participant/participant.module.ts b/src/app/event/participant/participant.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { FormioModule } from 'angular-formio';
+import { FormioModule } from '@formio/angular';
 import {
   FormioResource,
   FormioResourceRoutes,
   FormioResourceConfig,
   FormioResourceService
-} from 'angular-formio/resource';
+} from '@formio/angular/resource';
 
 @NgModule({
   imports: [

diff --git a/src/app/form/form.module.ts b/src/app/form/form.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { FormioGrid } from 'angular-formio/grid';
-import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from 'angular-formio/manager';
+import { FormioGrid } from '@formio/angular/grid';
+import { FormManagerModule, FormManagerRoutes, FormManagerService, FormManagerConfig } from '@formio/angular/manager';
 
 @NgModule({
   imports: [

diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormioAuthService } from 'angular-formio/auth';
+import { FormioAuthService } from '@formio/angular/auth';
 
 @Component({
   selector: 'app-header',

diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html
@@ -12,7 +12,7 @@ <h2 class="title">Welcome to your &lt;<span class="text-blue">form</span>.<span
         <pre><code>&lt;formio src="https://examples.form.io/example"&gt;&lt;/formio&gt;</code></pre>
       </div>
       <p class="lead">Need Help?</p>
-      <a class="btn btn-lg btn-success" target="_blank" href="https://github.com/formio/angular-formio">Embedding</a>
+      <a class="btn btn-lg btn-success" target="_blank" href="https://github.com/formio/angular">Embedding</a>
       <a class="btn btn-lg btn-success" target="_blank" href="http://help.form.io">Documentation</a>
     </div>
   </div>

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormioAuthService } from 'angular-formio/auth';
+import { FormioAuthService } from '@formio/angular/auth';
 
 @Component({
   selector: 'app-home',

diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,5 @@
-import { FormioAppConfig } from 'angular-formio';
-import { FormioAuthConfig } from 'angular-formio/auth';
+import { FormioAppConfig } from '@formio/angular';
+import { FormioAuthConfig } from '@formio/angular/auth';
 
 export const AppConfig: FormioAppConfig = {
   appUrl: 'https://example.form.io',

diff --git a/src/styles.scss b/src/styles.scss
@@ -34,7 +34,7 @@ $dark:          $gray-800;
 @import "~bootswatch/dist/cosmo/_variables.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~bootswatch/dist/cosmo/_bootswatch.scss";
-$fa-font-path: '../node_modules/font-awesome/fonts';
+$fa-font-path: '~font-awesome/fonts';
 @import '~font-awesome/scss/font-awesome';
 
 .logo {

diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
@@ -2,8 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "module": "es2015",
     "types": ["node"]
   },
   "exclude": [

diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
@@ -2,9 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "baseUrl": "./",
-    "module": "commonjs",
-    "target": "es5",
     "types": [
       "jasmine",
       "node"