From d5aae2d958b7fe6641566323edeca260bae38c3c Mon Sep 17 00:00:00 2001 From: Richard Park Date: Wed, 13 Nov 2019 11:48:39 +0900 Subject: [PATCH] support of ie11 is added --- angular.json | 7 +- config/enviroment.ts | 2 +- package-lock.json | 12 +++ package.json | 3 + .../src/polyfills-es5.ts | 92 +++++++++++++++++++ .../tsconfig-es5.app.json | 6 ++ .../src/lib/config/url.config.ts | 13 ++- .../lib/notification/notification.service.ts | 5 +- .../src/lib/translate/browser-loader.ts | 4 + .../src/lib/translate/electron-loader.ts | 4 + tsconfig.json | 2 +- 11 files changed, 141 insertions(+), 9 deletions(-) create mode 100644 projects/ucap-webmessenger-app/src/polyfills-es5.ts create mode 100644 projects/ucap-webmessenger-app/tsconfig-es5.app.json diff --git a/angular.json b/angular.json index 79569837..beec10fe 100644 --- a/angular.json +++ b/angular.json @@ -41,6 +41,8 @@ "with": "projects/ucap-webmessenger-app/src/environments/environment-browser.dev.ts" } ], + "polyfills": "projects/ucap-webmessenger-app/src/polyfills-es5.ts", + "tsConfig": "projects/ucap-webmessenger-app/tsconfig-es5.app.json", "optimization": false, "outputHashing": "all", "sourceMap": true, @@ -70,6 +72,8 @@ "with": "projects/ucap-webmessenger-app/src/environments/environment-browser.prod.ts" } ], + "polyfills": "projects/ucap-webmessenger-app/src/polyfills-es5.ts", + "tsConfig": "projects/ucap-webmessenger-app/tsconfig-es5.app.json", "optimization": true, "outputHashing": "all", "sourceMap": false, @@ -155,7 +159,8 @@ "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { - "browserTarget": "ucap-webmessenger-app:build" + "browserTarget": "ucap-webmessenger-app:build", + "disableHostCheck": true }, "configurations": { "browser-development": { diff --git a/config/enviroment.ts b/config/enviroment.ts index a1d8751a..d7219673 100644 --- a/config/enviroment.ts +++ b/config/enviroment.ts @@ -13,6 +13,6 @@ export function getEnviroments() { __DEV__: channel === 'development', 'process.platform': s(process.platform), 'process.env.NODE_ENV': s(process.env.NODE_ENV || 'development'), - 'process.env.TEST_ENV': s(process.env.TEST_ENV) + 'process.env.TEST_ENV': s(process.env.TEST_ENV), }; } diff --git a/package-lock.json b/package-lock.json index 53a09073..1cf3217b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4184,6 +4184,12 @@ } } }, + "classlist.js": { + "version": "1.1.20150312", + "resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz", + "integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=", + "dev": true + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -15387,6 +15393,12 @@ "minimalistic-assert": "^1.0.0" } }, + "web-animations-js": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz", + "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA==", + "dev": true + }, "webdriver-js-extender": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz", diff --git a/package.json b/package.json index e6c3d28d..b22e17ca 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "start:main": "wait-on http-get://localhost:4200/ && npm run build:main:development && electron --nolazy --inspect-brk=9229 .", "start:renderer": "cross-env UCAP_ENV_RUNTIME=ELECTRON ng serve -c renderer-development", "start:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng serve -c browser-development -o", + "build": "npm-run-all -p build:renderer build:main:production", "build:renderer": "cross-env NODE_ENV=production ng build --base-href ./", "build:browser": "cross-env UCAP_ENV_RUNTIME=BROWSER ng build -c browser-development", "build:main:development": "cross-env NODE_ENV=development TS_NODE_PROJECT='./config/tsconfig.webpack.json' parallel-webpack --config=config/main.webpack.config.ts", @@ -62,6 +63,7 @@ "@types/webpack-node-externals": "^1.6.3", "awesome-node-loader": "^1.1.1", "awesome-typescript-loader": "^5.2.1", + "classlist.js": "^1.1.20150312", "clean-webpack-plugin": "^3.0.0", "copy-webpack-plugin": "^5.0.4", "codelyzer": "^5.0.0", @@ -107,6 +109,7 @@ "tslint": "~5.15.0", "typescript": "~3.5.3", "wait-on": "^3.3.0", + "web-animations-js": "^2.3.2", "webpack": "4.39.2", "webpack-cli": "^3.3.7", "webpack-node-externals": "^1.7.2", diff --git a/projects/ucap-webmessenger-app/src/polyfills-es5.ts b/projects/ucap-webmessenger-app/src/polyfills-es5.ts new file mode 100644 index 00000000..35c5a63b --- /dev/null +++ b/projects/ucap-webmessenger-app/src/polyfills-es5.ts @@ -0,0 +1,92 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** + * BROWSER POLYFILLS + */ +/** IE9, IE10 and IE11 requires all of the following polyfills. */ +// import 'core-js/es/symbol'; +// import 'core-js/es/object'; +// import 'core-js/es/function'; +// import 'core-js/es/parse-int'; +// import 'core-js/es/parse-float'; +// import 'core-js/es/number'; +// import 'core-js/es/math'; +// import 'core-js/es/string'; +// import 'core-js/es/date'; +// import 'core-js/es/array'; +// import 'core-js/es/regexp'; +// import 'core-js/es/map'; +// import 'core-js/es/weak-map'; +// import 'core-js/es/set'; + +if (!Element.prototype.matches) { + Element.prototype.matches = + (Element.prototype as any).matchesSelector || + (Element.prototype as any).mozMatchesSelector || + (Element.prototype as any).msMatchesSelector || + (Element.prototype as any).oMatchesSelector || + (Element.prototype as any).webkitMatchesSelector || + function(s) { + const matches = (this.document || this.ownerDocument).querySelectorAll(s); + let i = matches.length; + while (--i >= 0 && matches.item(i) !== this) {} + return i > -1; + }; +} + +/** 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 + * because those flags need to be set before `zone.js` being loaded, and webpack + * 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'; + * + * 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__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 + * + * (window as any).__Zone_enable_cross_context_check = true; + * + */ + +/*************************************************************************************************** + * Zone JS is required by default for Angular itself. + */ +import 'zone.js/dist/zone'; // Included with Angular CLI. + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ diff --git a/projects/ucap-webmessenger-app/tsconfig-es5.app.json b/projects/ucap-webmessenger-app/tsconfig-es5.app.json new file mode 100644 index 00000000..7ecef674 --- /dev/null +++ b/projects/ucap-webmessenger-app/tsconfig-es5.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "target": "es5" + } +} diff --git a/projects/ucap-webmessenger-core/src/lib/config/url.config.ts b/projects/ucap-webmessenger-core/src/lib/config/url.config.ts index b7124842..ecd34e78 100644 --- a/projects/ucap-webmessenger-core/src/lib/config/url.config.ts +++ b/projects/ucap-webmessenger-core/src/lib/config/url.config.ts @@ -14,11 +14,14 @@ export abstract class UrlConfig { } private static getUrl(hotConfig: HostConfig, pathname: string): string { - const url = new URL( - `${hotConfig.protocol}://${hotConfig.domain}:${String(hotConfig.port)}` - ); - url.pathname = pathname; + // const url = new URL( + // `${hotConfig.protocol}://${hotConfig.domain}:${String(hotConfig.port)}` + // ); + // url.pathname = pathname; - return url.href; + // return url.href; + return `${hotConfig.protocol}://${hotConfig.domain}:${String( + hotConfig.port + )}${pathname}`; } } diff --git a/projects/ucap-webmessenger-native-browser/src/lib/notification/notification.service.ts b/projects/ucap-webmessenger-native-browser/src/lib/notification/notification.service.ts index 1e1aa425..e1101d21 100644 --- a/projects/ucap-webmessenger-native-browser/src/lib/notification/notification.service.ts +++ b/projects/ucap-webmessenger-native-browser/src/lib/notification/notification.service.ts @@ -21,9 +21,12 @@ export class NotificationService { } notify(noti: NotificationRequest, click?: () => void) { + if (!this.isSupported()) { + return; + } const notification = new Notification(noti.title, { body: noti.contents, - icon: noti.image || 'assets/images/img_nophoto_50.png' + icon: noti.image || 'assets/images/img_nophoto_50.png', }); notification.onclick = e => { console.log('notification.onclick'); diff --git a/projects/ucap-webmessenger-native-browser/src/lib/translate/browser-loader.ts b/projects/ucap-webmessenger-native-browser/src/lib/translate/browser-loader.ts index 3e5382f8..0024d8a9 100644 --- a/projects/ucap-webmessenger-native-browser/src/lib/translate/browser-loader.ts +++ b/projects/ucap-webmessenger-native-browser/src/lib/translate/browser-loader.ts @@ -2,7 +2,11 @@ import { TranslateLoader } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { NativeService } from '@ucap-webmessenger/native'; import { take, map } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; +@Injectable({ + providedIn: 'root', +}) export class TranslateLoaderService implements TranslateLoader { constructor( private nativeService: NativeService, diff --git a/projects/ucap-webmessenger-native-electron/src/lib/translate/electron-loader.ts b/projects/ucap-webmessenger-native-electron/src/lib/translate/electron-loader.ts index 92a89571..1195ae26 100644 --- a/projects/ucap-webmessenger-native-electron/src/lib/translate/electron-loader.ts +++ b/projects/ucap-webmessenger-native-electron/src/lib/translate/electron-loader.ts @@ -2,7 +2,11 @@ import { TranslateLoader } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { NativeService } from '@ucap-webmessenger/native'; import { take, map } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; +@Injectable({ + providedIn: 'root', +}) export class TranslateLoaderService implements TranslateLoader { constructor( private nativeService: NativeService, diff --git a/tsconfig.json b/tsconfig.json index b51156af..16f61b0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ "module": "esnext", "moduleResolution": "node", "importHelpers": true, - "target": "es5", + "target": "es2015", "typeRoots": ["node_modules/@types"], "lib": ["es2018", "dom"], "paths": {