From afc7bfd4f6a219c2ea0c42dabbb3198f656df7c5 Mon Sep 17 00:00:00 2001 From: Danilo Hoffmann Date: Wed, 24 Feb 2021 18:23:25 +0100 Subject: [PATCH] build: consistently set service-worker activation with custom webpack build (#569) --- angular.json | 6 ++++- docs/concepts/configuration.md | 3 +-- e2e/test-schematics.sh | 1 - .../customization/service-worker/index.js | 23 ------------------- scripts/init-local-environment.js | 1 - src/app/core/core.module.ts | 4 +--- src/environments/environment.model.ts | 4 ---- src/typings.d.ts | 2 ++ templates/webpack/webpack.custom.ts | 17 ++++++++++---- tslint.json | 2 +- 10 files changed, 23 insertions(+), 40 deletions(-) diff --git a/angular.json b/angular.json index 039efa35a8..89fae9c350 100644 --- a/angular.json +++ b/angular.json @@ -235,7 +235,11 @@ "aot": false, "styles": ["src/styles/themes/default/style.scss"], "assets": [ - { "glob": "**/*", "input": "src/assets/", "output": "/assets/" } + { + "glob": "**/*", + "input": "src/assets/", + "output": "/assets/" + } ], "scripts": [], "fileReplacements": [ diff --git a/docs/concepts/configuration.md b/docs/concepts/configuration.md index 003089e552..f33f703dd6 100644 --- a/docs/concepts/configuration.md +++ b/docs/concepts/configuration.md @@ -97,8 +97,7 @@ This provides the most flexible way of configuring the application at runtime. ### Build Settings -One example for a build time configuration is the property `serviceWorker`, which is managed in the _environment.ts_ and used to activate the `ServiceWorker` module. -Another example of such a build setting is the property `production` as multiple debug modules are only compiled into the application when running in development mode. +One example for a build time configuration is the property `serviceWorker`, which is managed in the _angular.json_ configurations and used to activate the [service worker](./progressive-web-app.md#service-worker). In general, properties available at build time can only be supplied by Angular CLI environments (see above). diff --git a/e2e/test-schematics.sh b/e2e/test-schematics.sh index f8679978b3..5c4f6f1f07 100644 --- a/e2e/test-schematics.sh +++ b/e2e/test-schematics.sh @@ -133,7 +133,6 @@ node scripts/init-local-environment -f node schematics/customization/service-worker false grep '"serviceWorker": false' angular.json -grep 'serviceWorker: false' src/environments/environment.local.ts git add -A npm run clean diff --git a/schematics/customization/service-worker/index.js b/schematics/customization/service-worker/index.js index fcb3153d3a..5e39d1c7ef 100644 --- a/schematics/customization/service-worker/index.js +++ b/schematics/customization/service-worker/index.js @@ -29,26 +29,3 @@ Object.keys(build.configurations).forEach(key => { fs.writeFileSync('./angular.json', stringify(angularJson, null, 2)); execSync('npx prettier --write angular.json'); - -// replace in environments -const tsMorphProject = new Project(); -tsMorphProject.addSourceFilesAtPaths('src/environments/environment*.ts'); - -tsMorphProject - .getSourceFiles() - .filter(file => !file.getBaseName().endsWith('.model.ts') && file.getBaseName() !== 'environment.ts') - .forEach(file => { - file - .forEachDescendantAsArray() - .filter(stm => stm.getKind() == ts.SyntaxKind.VariableDeclaration && stm.getName() === 'environment') - .map(stm => stm.getInitializer()) - .forEach(objectLiteralExpression => { - const property = objectLiteralExpression.getProperty('serviceWorker'); - if (property) { - property.setInitializer(`${enable}`); - } - }); - }); - -tsMorphProject.saveSync(); -execSync('npx prettier --write src/environments/*.*'); diff --git a/scripts/init-local-environment.js b/scripts/init-local-environment.js index a3fc20c859..1951f9d78c 100644 --- a/scripts/init-local-environment.js +++ b/scripts/init-local-environment.js @@ -38,7 +38,6 @@ const extraFeatures: typeof environment.features = export const environment: Environment = { ...ENVIRONMENT_DEFAULTS, - serviceWorker: false, defaultDeviceType: 'desktop', icmBaseURL: 'https://pwa-ish-demo.test.intershop.com', diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 522833fe37..b3c3e2da6c 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -5,8 +5,6 @@ import { ServiceWorkerModule } from '@angular/service-worker'; import { TranslateModule } from '@ngx-translate/core'; import { BrowserCookiesModule } from 'ngx-utils-cookies-port'; -import { environment } from '../../environments/environment'; - import { AppearanceModule } from './appearance.module'; import { ConfigurationModule } from './configuration.module'; import { ExtrasModule } from './extras.module'; @@ -29,7 +27,7 @@ import { DefaultErrorhandler } from './utils/default-error-handler'; HttpClientModule, IdentityProviderModule, InternationalizationModule, - ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.serviceWorker }), + ServiceWorkerModule.register('ngsw-worker.js', { enabled: SERVICE_WORKER }), StateManagementModule, ], providers: [ diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts index 1af3a1fb14..5d16ec670f 100644 --- a/src/environments/environment.model.ts +++ b/src/environments/environment.model.ts @@ -73,9 +73,6 @@ export interface Environment { // default device type used for initial page responses defaultDeviceType: DeviceType; - // enable or disable service worker - serviceWorker: boolean; - // configuration of the available locales - hard coded for now locales: Locale[]; @@ -111,7 +108,6 @@ export const ENVIRONMENT_DEFAULTS: Environment = { features: ['compare', 'recently', 'rating', 'wishlists'], /* PROGRESSIVE WEB APP CONFIGURATIONS */ - serviceWorker: false, smallBreakpointWidth: 576, mediumBreakpointWidth: 768, largeBreakpointWidth: 992, diff --git a/src/typings.d.ts b/src/typings.d.ts index 246f1f08ab..a1faa88691 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -7,4 +7,6 @@ interface NodeModule { declare var PRODUCTION_MODE: boolean; +declare var SERVICE_WORKER: boolean; + declare var PWA_VERSION: string; diff --git a/templates/webpack/webpack.custom.ts b/templates/webpack/webpack.custom.ts index f3360e559b..ed51547399 100644 --- a/templates/webpack/webpack.custom.ts +++ b/templates/webpack/webpack.custom.ts @@ -9,9 +9,12 @@ const log = (...txt) => { console.log('Custom Webpack:', ...txt); }; -export default (config: webpack.Configuration, _: CustomWebpackBrowserSchema, targetOptions: TargetOptions) => { +export default ( + config: webpack.Configuration, + angularJsonConfig: CustomWebpackBrowserSchema, + targetOptions: TargetOptions +) => { const configurations = targetOptions.configuration.split(','); - const production = configurations.includes('production'); const specificConfigurations = configurations.filter(x => x !== 'production'); if (specificConfigurations.length > 1) { console.warn('cannot handle multiple configurations, ignoring', specificConfigurations.slice(1)); @@ -29,16 +32,22 @@ export default (config: webpack.Configuration, _: CustomWebpackBrowserSchema, ta log('deactivated directTemplateLoading'); } - // set production mode + // set production mode and service-worker + const production = configurations.includes('production'); + const serviceWorker = !!angularJsonConfig.serviceWorker; config.plugins.push( new webpack.DefinePlugin({ PWA_VERSION: JSON.stringify( - `${require('../../package.json').version} built ${new Date()} - production:${production}` + `${require('../../package.json').version} built ${new Date()} - configuration:${ + targetOptions.configuration + } service-worker:${serviceWorker}` ), PRODUCTION_MODE: production, + SERVICE_WORKER: serviceWorker, }) ); log('setting production:', production); + log('setting serviceWorker:', serviceWorker); if (production) { // splitChunks not available for SSR build diff --git a/tslint.json b/tslint.json index 16580ffb87..4005662961 100644 --- a/tslint.json +++ b/tslint.json @@ -377,7 +377,7 @@ { "import": ".*", "from": ".*environments/environment.*", - "filePattern": "^.*/app/((?!(module|core/store/core/configuration/configuration\\.reducer|core/utils/state-transfer/state-properties\\.service|injection-keys)\\.ts).)*$", + "filePattern": "^.*/app/((?!(app(.server)?.module|core/store/core/configuration/configuration\\.reducer|core/utils/state-transfer/state-properties\\.service|injection-keys)\\.ts).)*$", "message": "Importing environment is not allowed. Inject needed properties instead." }, {