feat(ionic): update deps for angular 12 and cap 3

README.md

@@ -83,7 +83,13 @@ nx g app sample
 Develop in browser with:
 
 ```
-nx run ionic-sample:serve
+nx serve ionic-sample
+```
+
+Build Ionic app:
+
+```
+nx build ionic-sample
 ```
 
 A. **Capacitor iOS** - Prepare for development

packages/ionic-angular/src/schematics/application/_files/__dot__browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

packages/ionic-angular/src/schematics/application/_files/__dot__gitignore

@@ -3,31 +3,29 @@
 
 *~
 *.sw[mnpcod]
-*.log
+.tmp
 *.tmp
 *.tmp.*
-log.txt
 *.sublime-project
 *.sublime-workspace
-.vscode/
-npm-debug.log*
-
-.idea/
-.sourcemaps/
-.sass-cache/
-.tmp/
-.versions/
-coverage/
-www/
-node_modules/
-tmp/
-temp/
-platforms/
-plugins/
-plugins/android.json
-plugins/ios.json
-$RECYCLE.BIN/
-
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
+$RECYCLE.BIN/
+
+*.log
+log.txt
+npm-debug.log*
+
+/.idea
+/.ionic
+/.sass-cache
+/.sourcemaps
+/.versions
+/.vscode
+/coverage
+/dist
+/node_modules
+/platforms
+/plugins
+/www

packages/ionic-angular/src/schematics/application/_files/capacitor.config.ts__tmpl__

@@ -0,0 +1,10 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: '<%= utils.sanitize(appname) %>',
+  webDir: 'www',
+  bundledWebRuntime: false
+};
+
+export default config;

packages/ionic-angular/src/schematics/application/_files/karma.conf.js

@@ -9,16 +9,28 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
-      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/ngv'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -27,5 +39,6 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
+    restartOnFileChange: true
   });
 };

packages/ionic-angular/src/schematics/application/_files/package.json

@@ -3,17 +3,20 @@
   "license": "SEE LICENSE IN <your-license-filename>",
   "version": "0.0.0",
   "scripts": {
-    "cap.add.ios": "npx ionic capacitor add ios",
-    "cap.add.android": "npx ionic capacitor add android",
-    "cap.ios": "npx ionic capacitor open ios",
-    "cap.android": "npx ionic capacitor open android",
-    "cap.copy": "npx ionic capacitor copy",
-    "cap.update": "npx ionic capacitor update"
+    "cap.add.ios": "npx ionic cap add ios",
+    "cap.add.android": "npx ionic cap add android",
+    "cap.ios": "npx ionic cap open ios",
+    "cap.android": "npx ionic cap open android",
+    "cap.sync": "npx ionic cap sync"
   },
   "dependencies": {
+    "@capacitor/app": "<%= capacitorPluginsVersion %>",
     "@capacitor/android": "<%= capacitorVersion %>",
     "@capacitor/core": "<%= capacitorVersion %>",
-    "@capacitor/ios": "<%= capacitorVersion %>"
+    "@capacitor/haptics": "<%= capacitorPluginsVersion %>",
+    "@capacitor/ios": "<%= capacitorVersion %>",
+    "@capacitor/keyboard": "<%= capacitorPluginsVersion %>",
+    "@capacitor/status-bar": "<%= capacitorPluginsVersion %>"
   },
   "devDependencies": {
     "@capacitor/cli": "<%= capacitorVersion %>"

packages/ionic-angular/src/schematics/application/_files/src/app/app.component.ts__tmpl__

@@ -1,33 +1,11 @@
 import { Component } from '@angular/core';
-import { Platform } from '@ionic/angular';
-import { Plugins, StatusBarStyle } from '@capacitor/core';
-const { StatusBar } = Plugins;
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar as NgxStatusBar } from '@ionic-native/status-bar/ngx';
 
 @Component({
   selector: '<%= prefix %>-root',
-  templateUrl: 'app.component.html'
+  templateUrl: 'app.component.html',
 })
 export class AppComponent {
-  constructor(
-    private platform: Platform,
-    private splashScreen: SplashScreen,
-    private statusBar: NgxStatusBar
-  ) {
-    this.initializeApp();
-  }
-
-  initializeApp() {
-    this.platform.ready().then(() => {
-      if (this.platform.is('capacitor')) {
-        StatusBar.setStyle({
-          style: StatusBarStyle.Dark
-        });
-      } else {
-        this.statusBar.styleDefault();
-        this.splashScreen.hide();
-      }
-    });
-  }
+  constructor() {}
 }
+
+

packages/ionic-angular/src/schematics/application/_files/src/index.html

@@ -1,23 +1,26 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Ionic + Nx + xplat</title>
 
-    <base href="/" />
+<head>
+  <meta charset="utf-8" />
+  <title>Ionic + Nx + xplat</title>
 
-    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="format-detection" content="telephone=no" />
-    <meta name="msapplication-tap-highlight" content="no" />
+  <base href="/" />
 
-    <link rel="icon" type="image/png" href="assets/icon/favicon.png">
+  <meta name="color-scheme" content="light dark" />
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="msapplication-tap-highlight" content="no" />
 
-    <!-- add to homescreen for ios -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  </head>
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <body>
-    <<%= prefix %>-root></<%= prefix %>-root>
-  </body>
-</html>
+  <!-- add to homescreen for ios -->
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+  <<%= prefix %>-root></<%= prefix %>-root>
+</body>
+
+</html>

packages/ionic-angular/src/schematics/application/_files/src/polyfills.ts__tmpl__

@@ -18,7 +18,7 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/** IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /**
@@ -35,15 +35,15 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
  * The following flags will work for all browsers.
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
@@ -52,12 +52,11 @@
  *
  */
 
-import './zone-flags.ts';
+import './zone-flags';
 
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 

packages/ionic-angular/src/schematics/application/_files/src/test.ts__tmpl__

@@ -7,7 +7,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

packages/ionic-angular/src/schematics/application/_files/src/zone-flags.ts__tmpl__

@@ -2,4 +2,5 @@
  * Prevents Angular change detection from
  * running with certain Web Component callbacks
  */
+// eslint-disable-next-line no-underscore-dangle
 (window as any).__Zone_disable_customElements = true;

packages/ionic-angular/src/schematics/application/_files/tsconfig.app.json

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

packages/ionic-angular/src/schematics/application/_files/tsconfig.spec.json

@@ -4,6 +4,12 @@
     "outDir": "./out-tsc/spec",
     "types": ["jasmine", "node"]
   },
-  "files": ["src/test.ts", "src/zone-flags.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
 }