feat(ng-update): implement ng update migration

Author: kyubisation

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 8.0.0-beta.1 (2019-07-14)
+
+### Features
+
+* Added additionalEnvironmentVariables to builder options
+* Implemented ng update migration
+
 # 8.0.0-beta.0 (2019-06-30)
 
 ### Features

README.md

@@ -1,7 +1,7 @@
 # angular-server-side-configuration
 
-![](https://img.shields.io/azure-devops/build/kyubisation/894749fe-3edd-41f8-818f-ba14e6a3cc22/1/master.svg)
-![](https://img.shields.io/azure-devops/coverage/kyubisation/angular-server-side-configuration/1/master.svg)
+![](https://img.shields.io/azure-devops/build/kyubisation/894749fe-3edd-41f8-818f-ba14e6a3cc22/2/master.svg)
+![](https://img.shields.io/azure-devops/coverage/kyubisation/angular-server-side-configuration/2/master.svg)
 ![](https://img.shields.io/npm/v/angular-server-side-configuration.svg)
 ![](https://img.shields.io/npm/l/angular-server-side-configuration.svg)
 
@@ -30,6 +30,10 @@ of this library can be used, as it is Angular version agnostic.
 ```
 ng add angular-server-side-configuration
 ```
+or, if you have a previous version of this library installed
+```
+ng update angular-server-side-configuration@latest
+```
 This will configure the appropriate files.
 
 Alternatively, if you want to configure the files yourself:
@@ -58,6 +62,7 @@ used environment variables and generate an [ngssc.json](#ngsscjson) in the defin
         "ngsscbuild": {
           "builder": "angular-server-side-configuration:ngsscbuild",
           "options": {
+            "additionalEnvironmentVariables": ["MANUAL_ENTRIES"],
             "aotSupport": true, // Set this to true, if you need to use
                                 // environment variables inside AoT contexts
                                 // (e.g. forRoot(...) or forChild(...))
@@ -79,6 +84,8 @@ used environment variables and generate an [ngssc.json](#ngsscjson) in the defin
 ...
 ```
 
+To run the ngssc build, run the command `ng run your-project-name:ngsscbuild:production`.
+
 ### environment.prod.ts
 angular-server-side-configuration supports two variants for using environment variables:
 process.env.* or NG_ENV.*  

builders/ngsscbuild/index.spec.ts

@@ -69,6 +69,7 @@ describe('Ngssc Builder', () => {
     addDummyBuildTarget({});
     try {
       await runNgsscbuild({
+        additionalEnvironmentVariables: [],
         aotSupport: true,
         browserTarget: 'dummy:build',
         ngsscEnvironmentFile: 'environment.prod.ts',
@@ -82,6 +83,7 @@ describe('Ngssc Builder', () => {
   it('should build with process variant', async () => {
     addDummyBuildTarget();
     const output = await runNgsscbuild({
+      additionalEnvironmentVariables: [],
       aotSupport: false,
       browserTarget: 'dummy:build',
       ngsscEnvironmentFile: 'environment.prod.ts',
@@ -94,9 +96,26 @@ describe('Ngssc Builder', () => {
     expect(ngssc.filePattern).toEqual('index.html');
   });
 
+  it('should aggregate environment variables', async () => {
+    const expected = 'OTHER_VARIABLE';
+    addDummyBuildTarget();
+    const output = await runNgsscbuild({
+      additionalEnvironmentVariables: [expected],
+      aotSupport: false,
+      browserTarget: 'dummy:build',
+      ngsscEnvironmentFile: 'environment.prod.ts',
+    });
+
+    expect(output.success).toBe(true);
+    expect(logger.includes('ngssc')).toBeTruthy();
+    const ngssc: Ngssc = JSON.parse(readFileSync(join(distDir, 'ngssc.json'), 'utf8'));
+    expect(ngssc.environmentVariables).toContain(expected);
+  });
+
   it('should build with aotSupport and process variant', async () => {
     addDummyBuildTarget();
     const output = await runNgsscbuild({
+      additionalEnvironmentVariables: [],
       aotSupport: true,
       browserTarget: 'dummy:build',
       ngsscEnvironmentFile: 'environment.prod.ts',

builders/ngsscbuild/models/options.ts

@@ -1,6 +1,7 @@
 import { JsonObject } from '@angular-devkit/core';
 
 export interface Options extends JsonObject {
+  additionalEnvironmentVariables: string[];
   aotSupport: boolean;
   browserTarget: string;
   ngsscEnvironmentFile: string;

builders/ngsscbuild/ngssc-builder.ts

@@ -48,7 +48,7 @@ export class NgsscBuilder {
   private async _safeRun() {
     const ngsscContext = await this._detectVariables();
     const rawOptions = await this._prepareBrowserOptions(ngsscContext);
-    const browserTarget = targetFromTargetString(this._options.browserTarget);
+    const browserTarget = this._browserTarget;
     const browserName = await this._context.getBuilderNameForTarget(browserTarget);
     const browserOptions = await this._context.validateOptions<BrowserOptions>(rawOptions, browserName);
     const scheduledTarget = await this._context.scheduleTarget(browserTarget, browserOptions);
@@ -100,7 +100,10 @@ export class NgsscBuilder {
   private async _buildNgsscJson(ngsscContext: NgsscContext, browserOptions: BrowserOptions) {
     const outputPath = join(this._context.workspaceRoot, browserOptions.outputPath);
     const ngssc: Ngssc = {
-      environmentVariables: ngsscContext.variables.map(m => m.variable),
+      environmentVariables: [
+        ...ngsscContext.variables.map(m => m.variable),
+        ...(this._options.additionalEnvironmentVariables || []),
+      ],
       filePattern: basename(browserOptions.index),
       variant: ngsscContext.variant,
     };

builders/ngsscbuild/schema.json

@@ -2,14 +2,21 @@
   "$schema": "http://json-schema.org/schema",
   "type": "object",
   "properties": {
-    "command": {
-      "type": "string"
-    },
-    "args": {
+    "additionalEnvironmentVariables": {
       "type": "array",
-      "items": {
-        "type": "string"
-      }
+      "description": "Additional environment variables that should be added to ngssc.json"
+    },
+    "aotSupport": {
+      "type": "boolean",
+      "description": "Whether variables are going to be used in AoT contexts (like forRoot(...) or forChild(...))"
+    },
+    "browserTarget": {
+      "type": "string",
+      "description": "The build target to execute"
+    },
+    "ngsscEnvironmentFile": {
+      "type": "string",
+      "description": "The ngssc environment file (usually src/environments/environment.prod.ts)"
     }
   }
 }

package.json

@@ -7,6 +7,9 @@
   },
   "builders": "./builders/builders.json",
   "schematics": "./schematics/collection.json",
+  "ng-update": {
+    "migrations": "./schematics/migration.json"
+  },
   "scripts": {
     "clean": "rimraf coverage dist {builders,models,schematics}/**/*.{d.ts,js} test/*.{d.ts,js} junit.xml",
     "build:node": "npm run clean && tsc",
@@ -80,10 +83,10 @@
     "coverageDirectory": "coverage",
     "coverageThreshold": {
       "global": {
-        "branches": 90,
-        "functions": 90,
-        "lines": 90,
-        "statements": 90
+        "branches": 85,
+        "functions": 95,
+        "lines": 95,
+        "statements": 95
       }
     }
   }

schematics/migration.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "migration-v8": {
+      "version": "8-beta",
+      "description": "Updates angular-server-side-configuration to v8",
+      "factory": "./ng-update/index#updateToV8"
+    }
+  }
+}

schematics/ng-add/index.spec.ts

@@ -1,4 +1,3 @@
-import { Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { Schema as ApplicationOptions, Style } from '@schematics/angular/application/schema';
 import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
@@ -91,6 +90,17 @@ describe('ng-add', () => {
     assertAppliedConfig(tree);
   });
 
+  it('should add ngssc content to correct files and split additional environment variables', async () => {
+    const expected = 'OTHER_VARIABLES,OTHER_VARIABLES2';
+    const tree = await runner
+      .runSchematicAsync('ng-add', { additionalEnvironmentVariables: expected }, appTree)
+      .toPromise();
+    assertAppliedConfig(tree);
+    const angularJson = JSON.parse(tree.readContent('angular.json'));
+    expect(angularJson.projects.dummy.architect.ngsscbuild.options.additionalEnvironmentVariables)
+      .toEqual(expected.split(','));
+  });
+
   it('should add ngssc content to correct files, with missing title tag', async () => {
     const htmlContent = appTree.readContent(htmlPath);
     appTree.overwrite(htmlPath, htmlContent.replace(/<title>[^<]+<\/title>/, ''));

schematics/ng-add/index.ts

@@ -27,6 +27,8 @@ function addNgsscTargetToWorkspace(options: Schema) {
     architect.ngsscbuild = {
       builder: 'angular-server-side-configuration:ngsscbuild',
       options: {
+        additionalEnvironmentVariables: options.additionalEnvironmentVariables
+          ? options.additionalEnvironmentVariables.split(',').map(e => e.trim()) : [],
         aotSupport: options.aotSupport,
         browserTarget: `${projectName}:build`,
         ngsscEnvironmentFile: options.ngsscEnvironmentFile,
@@ -94,7 +96,7 @@ function addNgsscToPackageScripts(options: Schema) {
       throw new SchematicsException('Could not find package.json');
     }
 
-    const pkg = JSON.parse(buffer.toString());
+    const pkg = { scripts: {}, ...JSON.parse(buffer.toString()) };
     if ('build:ngssc' in pkg.scripts) {
       context.logger.info(`Skipping adding script to package.json, as it already exists.`);
       return;

schematics/ng-add/schema.json

@@ -41,6 +41,11 @@
       "type": "boolean",
       "default": true,
       "x-prompt": "Are variables going to be used in AoT contexts (like forRoot(...) or forChild(...)):"
+    },
+    "additionalEnvironmentVariables": {
+      "description": "Additional environment variables that should be added to ngssc.json",
+      "type": "string",
+      "x-prompt": "Add additional environment variables (comma-separated):"
     }
   }
 }

schematics/ng-add/schema.ts

@@ -1,4 +1,5 @@
 export interface Schema {
+  additionalEnvironmentVariables: string;
   /** Name of the project. */
   project: string;
   variant: 'process' | 'NG_ENV';

schematics/ng-update/index.spec.ts

@@ -0,0 +1,122 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Schema as ApplicationOptions, Style } from '@schematics/angular/application/schema';
+import { Schema as WorkspaceOptions } from '@schematics/angular/workspace/schema';
+import { join } from 'path';
+
+const workspaceOptions: WorkspaceOptions = {
+  name: 'workspace',
+  newProjectRoot: 'projects',
+  version: '6.0.0',
+};
+
+const appOptions: ApplicationOptions = {
+  inlineStyle: false,
+  inlineTemplate: false,
+  name: 'dummy',
+  routing: false,
+  skipPackageJson: false,
+  skipTests: false,
+  style: Style.Css,
+};
+
+describe('ng-update', () => {
+  const collectionPath = join(__dirname, '../migration.json');
+  const envPath = 'projects/dummy/src/environments/environment.prod.ts';
+  const htmlPath = 'projects/dummy/src/index.html';
+  let runner: SchematicTestRunner;
+  let appTree: UnitTestTree;
+
+  beforeEach(async () => {
+    runner = new SchematicTestRunner('schematics', collectionPath);
+    appTree = await runner
+      .runExternalSchematicAsync('@schematics/angular', 'workspace', workspaceOptions)
+      .toPromise();
+    appTree = await runner
+      .runExternalSchematicAsync('@schematics/angular', 'application', appOptions, appTree)
+      .toPromise();
+  });
+
+  function assertAppliedConfig(
+    tree: UnitTestTree, importString = `import 'angular-server-side-configuration/process';`) {
+    const angularJson = JSON.parse(tree.readContent('angular.json'));
+    expect(angularJson.projects.dummy.architect.ngsscbuild.builder)
+      .toBe('angular-server-side-configuration:ngsscbuild');
+
+    const environmentContent = tree.readContent(envPath);
+    expect(environmentContent).toContain(importString);
+
+    const indexContent = tree.readContent(htmlPath);
+    expect(indexContent).toContain('<!--CONFIG-->');
+
+    const packageJson = JSON.parse(tree.readContent('package.json'));
+    expect(packageJson.scripts['build:ngssc']).toContain(':ngsscbuild:production');
+  }
+
+  it('should add ngssc content to correct files', async () => {
+    const tree = await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+    assertAppliedConfig(tree);
+  });
+
+  it('should migrate ng-env4 import', async () => {
+    const envContent = appTree.read(envPath)!.toString('utf8');
+    appTree.overwrite(
+      envPath,
+      envContent.replace(
+        /^/, `import { NG_ENV } from 'angular-server-side-configuration/ng-env4';\n`));
+    const tree = await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+    assertAppliedConfig(tree, `import { NG_ENV } from 'angular-server-side-configuration/ng-env';`);
+  });
+
+  it('should detect ng-env variant', async () => {
+    const envContent = appTree.read(envPath)!.toString('utf8');
+    appTree.overwrite(
+      envPath,
+      envContent.replace(
+        /^/, `import { NG_ENV } from 'angular-server-side-configuration/ng-env';\n`));
+    const tree = await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+    assertAppliedConfig(tree, `import { NG_ENV } from 'angular-server-side-configuration/ng-env';`);
+  });
+
+  it('should detect and remove ngssc.json', async () => {
+    const expected = 'OTHER_VARIABLES';
+    appTree.create('/ngssc.json', JSON.stringify({ environmentVariables: [expected] }));
+    const tree = await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+    assertAppliedConfig(tree);
+    const angularJson = JSON.parse(tree.readContent('angular.json'));
+    expect(angularJson.projects.dummy.architect.ngsscbuild.options.additionalEnvironmentVariables)
+      .toEqual([expected]);
+    expect(appTree.exists('/ngssc.json')).toBeFalsy();
+  });
+
+  it('should detect ngssc usage in package.json', async () => {
+    const packageJsonPath = '/package.json';
+    const pkg = JSON.parse(appTree.read(packageJsonPath)!.toString('utf8'));
+    pkg.scripts = { ...pkg.scripts, 'build:ngssc': 'ngssc ng build' };
+    appTree.overwrite(packageJsonPath, JSON.stringify(pkg));
+    const logs: string[] = [];
+    runner.logger.subscribe(m => logs.push(m.message));
+    await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+    expect(logs.some(l => l.includes('Please remove the ngssc usage from your scripts.')))
+      .toBeTruthy();
+  });
+
+  it('should not fail when no scripts are defined in package.json', async () => {
+    const packageJsonPath = '/package.json';
+    const pkg = JSON.parse(appTree.read(packageJsonPath)!.toString('utf8'));
+    delete pkg.scripts;
+    appTree.overwrite(packageJsonPath, JSON.stringify(pkg));
+    await runner
+      .runSchematicAsync('migration-v8', {}, appTree)
+      .toPromise();
+  });
+});