feat: add support for Angular v11 (follow up)

README.md

@@ -16,7 +16,7 @@
 4. [🚀 Continuous Delivery](#continuous-delivery)
 5. [📦 Options](#options)
    - [--base-href](#base-href)
-   - [--configuration](#configuration)
+   - [--build-target](#build-target)
    - [--no-build](#no-build)
    - [--repo](#repo)
    - [--message](#message)
@@ -98,7 +98,7 @@ If you already have an existing Angular project on GitHub, skip step 1 and 2.
    ```sh
    ng deploy your-angular-project --base-href=/<repositoryname>/
    ```
-   
+
    Please be aware of the `--base-href` option. It is necessary when your project will be deployed to a non-root folder. See more details below.
 
 5. Your project should be available at `https://<username>.github.io/<repositoryname>`.  
@@ -172,19 +172,20 @@ ng deploy --cname=example.org
 
 See the option [--cname](#cname) for more information!
 
-#### --configuration <a name="configuration"></a>
+#### --build-target <a name="build-target"></a>
 
 - **optional**
-- Alias: `-c`
-- Default: `production` (string)
+- Default: `undefined` (string)
 - Example:
-  - `ng deploy` – Angular project is build in production mode
-  - `ng deploy --configuration=test` – Angular project is using the configuration `test` (this configuration must exist in the `angular.json` file)
+  - `ng deploy` – Angular project is build in `production` mode
+  - `ng deploy --build-target=test` – Angular project is using the build configuration `test` (this configuration must exist in the `angular.json` file)
+
+If no buildTarget is set, the `production` build of the default project will be chosen.
+The `buildTarget` simply points to an existing build configuration for your project, as specified in the `configurations` section of `angular.json`.
+Most projects have a default configuration and a production configuration (commonly activated by using the `--prod` flag) but it is possible to specify as many build configurations as needed.
 
-A named build target, as specified in the `configurations` section of `angular.json`.
-Each named target is accompanied by a configuration of option defaults for that target.
-Same as `ng build --configuration=XXX`.
-This command has no effect if the option `--no-build` option is active.
+This is equivalent as calling the command `ng build --configuration=XXX`."  
+This command has no effect if the option `--no-build` is active.
 
 #### --no-build <a name="no-build"></a>
 
@@ -313,7 +314,7 @@ This can be very useful because it outputs what would happen without doing anyth
 To avoid all these command-line cmd options, you can write down your configuration in the `angular.json` file in the `options` attribute of your deploy project's architect. Just change the kebab-case to lower camel case. This is the notation of all options in lower camel case:
 
 - baseHref
-- configuration
+- buildTarget
 - noBuild
 - repo
 - message
@@ -346,20 +347,21 @@ becomes
 }
 ```
 
-And just run `ng deploy` 😄.
+Now you can just run `ng deploy` without all the options in the command line! 😄
 
 > **ℹ️ Hint**
 >
 > You can always use the [--dry-run](#dry-run) option to verify if your configuration is right.
+> The project will build but not deploy.
 
 ## 🌍 Environments <a name="environments"></a>
 
 We have seen `angular-cli-ghpages` running on various environments, like Travis CI, CircleCi or Github Actions.
 Please share your knowledge by writing an article about how to set up the deployment.
 
 1. [GitHub Actions](https://github.com/angular-schule/angular-cli-ghpages/blob/master/docs/README_environment_github_actions.md) by [Dharmen Shah](https://github.com/shhdharmen)
-2. TODO: Travis CI
-3. TODO: CircleCI
+2. Travis CI
+3. CircleCI
 
 ## ⁉️ FAQ <a name="faq"></a>
 

docs/README_contributors.md

@@ -8,7 +8,6 @@
   - [4. Testing](#4-testing)
 - [Testing the standalone CLI](#testing-the-standalone-cli)
 - [Publish to NPM](#publish-to-npm)
-- [Usage of Prettier Formatter](#usage-of-prettier-formatter)
 
 ## How to start
 
@@ -154,16 +153,20 @@ Use VSCode and debug the task `Launch Standalone Program`.
 
 ```
 cd angular-cli-ghpages/src
-npx prettier --write '**/*'
+npm run prettier
 npm run build
 npm run test
 npm publish dist
 npm dist-tag add [email protected] next
 ```
 
-## Usage of Prettier Formatter
+## Keeping track of all the forks
 
-Just execute `npx prettier --write '**/*'` and the code is formated automatically.
-Please ignore the errors for now. ([error] No parser could be inferred for file)
+[ngx-deploy-starter](https://github.com/angular-schule/ngx-deploy-starter/) and
+[angular-cli-ghpages](https://github.com/angular-schule/angular-cli-ghpages/) (both developed by Johannes Hoppe) are follow-up projects of the depcrecated [ngx-gh demo](https://github.com/mgechev/ngx-gh).
+This project was a follow-up of the deploy shematics from the [angularfire](https://github.com/angular/angularfire/) project.
 
-We are still working on this, see https://github.com/angular-schule/ngx-deploy-starter/issues/10 .
+To stay in sync with the stuff that the Angular team is doing, we want to keep an eye on the following files
+
+- [builder.ts](https://github.com/angular/angularfire/blob/master/src/schematics/deploy/builder.ts)
+- [actions.ts](https://github.com/angular/angularfire/blob/master/src/schematics/deploy/actions.ts)

src/.prettierignore

@@ -0,0 +1 @@
+dist

src/.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }

src/angular-cli-ghpages

@@ -74,7 +74,7 @@ var consoleLogger = {
 
 var dir = path.join(process.cwd(), commander.dir);
 
-engine.run(dir, commander, consoleLogger).catch(function(error) {
+engine.run(dir, commander, consoleLogger).catch(function (error) {
   consoleLogger.error('❌ An error occurred when trying to deploy:');
   consoleLogger.error(error.message);
   process.exit(1);

src/deploy/actions.spec.ts

@@ -6,20 +6,24 @@ import {
   Target
 } from '@angular-devkit/architect/src';
 import { JsonObject, logging } from '@angular-devkit/core';
+import { BuildTarget } from 'interfaces';
 
 import deploy from './actions';
 
 let context: BuilderContext;
 const mockEngine = { run: (_: string, __: any, __2: any) => Promise.resolve() };
 
 const PROJECT = 'pirojok-project';
+const BUILD_TARGET: BuildTarget = {
+  name: `${PROJECT}:build:production`
+};
 
 describe('Deploy Angular apps', () => {
   beforeEach(() => initMocks());
 
   it('should invoke the builder', async () => {
     const spy = spyOn(context, 'scheduleTarget').and.callThrough();
-    await deploy(mockEngine, context, 'host', {});
+    await deploy(mockEngine, context, BUILD_TARGET, {});
 
     expect(spy).toHaveBeenCalledWith(
       {
@@ -33,7 +37,7 @@ describe('Deploy Angular apps', () => {
 
   it('should invoke the builder with the baseHref', async () => {
     const spy = spyOn(context, 'scheduleTarget').and.callThrough();
-    await deploy(mockEngine, context, 'host', { baseHref: '/folder' });
+    await deploy(mockEngine, context, BUILD_TARGET, { baseHref: '/folder' });
 
     expect(spy).toHaveBeenCalledWith(
       {
@@ -47,16 +51,16 @@ describe('Deploy Angular apps', () => {
 
   it('should invoke engine.run', async () => {
     const spy = spyOn(mockEngine, 'run').and.callThrough();
-    await deploy(mockEngine, context, 'host', {});
+    await deploy(mockEngine, context, BUILD_TARGET, {});
 
-    expect(spy).toHaveBeenCalledWith('host', {}, context.logger);
+    expect(spy).toHaveBeenCalledWith('dist/some-folder', {}, context.logger);
   });
 
   describe('error handling', () => {
     it('throws if there is no target project', async () => {
       context.target = undefined;
       try {
-        await deploy(mockEngine, context, 'host', {});
+        await deploy(mockEngine, context, BUILD_TARGET, {});
         fail();
       } catch (e) {
         expect(e.message).toMatch(/Cannot execute the build target/);
@@ -73,7 +77,7 @@ describe('Deploy Angular apps', () => {
           result: Promise.resolve(createBuilderOutputMock(false))
         } as BuilderRun);
       try {
-        await deploy(mockEngine, context, 'host', {});
+        await deploy(mockEngine, context, BUILD_TARGET, {});
         fail();
       } catch (e) {
         expect(e.message).toEqual('Error while building the app.');
@@ -102,7 +106,10 @@ const initMocks = () => {
     validateOptions: _ => Promise.resolve({} as any),
     getBuilderNameForTarget: () => Promise.resolve(''),
     analytics: null as any,
-    getTargetOptions: (_: Target) => Promise.resolve({}),
+    getTargetOptions: (_: Target) =>
+      Promise.resolve({
+        outputPath: 'dist/some-folder'
+      }),
     reportProgress: (_: number, __?: number, ___?: string) => {},
     reportStatus: (_: string) => {},
     reportRunning: () => {},
@@ -112,7 +119,7 @@ const initMocks = () => {
       Promise.resolve({
         result: Promise.resolve(createBuilderOutputMock(true))
       } as BuilderRun)
-  };
+  } as any;
 };
 
 const createBuilderOutputMock = (success: boolean): BuilderOutput => {

src/deploy/actions.ts

@@ -1,6 +1,6 @@
 import {
   BuilderContext,
-  targetFromTargetString,
+  targetFromTargetString
 } from '@angular-devkit/architect';
 import { json, logging } from '@angular-devkit/core';
 
@@ -19,35 +19,32 @@ export default async function deploy(
   buildTarget: BuildTarget,
   options: Schema
 ) {
+  // 1. BUILD
   if (options.noBuild) {
     context.logger.info(`📦 Skipping build`);
   } else {
     if (!context.target) {
       throw new Error('Cannot execute the build target');
     }
 
-    const configuration = options.configuration
-      ? options.configuration
-      : 'production';
+    // baseHref (from @angular-devkit/build-angular:browser)
+    // can be overriden here directly from the deployment builder options,
+    // since this feature is the most important switch when deploying the github
     const overrides = {
-      ...(options.baseHref && { baseHref: options.baseHref }),
+      ...(options.baseHref && { baseHref: options.baseHref })
     };
 
-    context.logger.info(
-      `📦 Building "${
-        context.target.project
-      }". Configuration: "${configuration}".${
-        options.baseHref ? ' Your base-href: "' + options.baseHref + '"' : ''
-      }`
-    );
+    context.logger.info(`📦 Building "${context.target.project}"`);
+    context.logger.info(`📦 Build target "${buildTarget.name}"`);
+
+    // options.baseHref ? ' Your base-href: "' + options.baseHref + '"' : ''
 
     const build = await context.scheduleTarget(
+      targetFromTargetString(buildTarget.name),
       {
-        target: 'build',
-        project: context.target.project,
-        configuration,
-      },
-      overrides as json.JsonObject
+        ...buildTarget.options,
+        ...overrides
+      }
     );
     const buildResult = await build.result;
 
@@ -56,6 +53,7 @@ export default async function deploy(
     }
   }
 
+  // 2. DEPLOYMENT
   const buildOptions = await context.getTargetOptions(
     targetFromTargetString(buildTarget.name)
   );

src/deploy/builder.ts

@@ -1,7 +1,7 @@
 import {
   BuilderContext,
   BuilderOutput,
-  createBuilder,
+  createBuilder
 } from '@angular-devkit/architect';
 
 import * as engine from '../engine/engine';
@@ -17,7 +17,7 @@ export default createBuilder(
     }
 
     const buildTarget = {
-      name: `${context.target.project}:build:production`,
+      name: options.buildTarget || `${context.target.project}:build:production`
     };
 
     try {

src/deploy/schema.json

@@ -7,11 +7,9 @@
       "type": "string",
       "description": "Base url for the application being built. Same as `ng build --base-href=/XXX/`."
     },
-    "configuration": {
+    "buildTarget": {
       "type": "string",
-      "default": "production",
-      "description": "A named build target, as specified in the `configurations` section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Same as `ng build --configuration=XXX`.",
-      "alias": "c"
+      "description": "A named build target, as specified in the `configurations` section of angular.json . Each named target is accompanied by a configuration of option defaults for that target. This is equivalent as calling the command `ng build --configuration=XXX`."
     },
     "noBuild": {
       "type": "boolean",

src/engine/engine.ts

@@ -54,7 +54,7 @@ export async function prepareOptions(
     let debuglog = util.debuglog;
     util.debuglog = set => {
       if (set === 'gh-pages') {
-        return function() {
+        return function () {
           let message = util.format.apply(util, arguments);
           logger.info(message);
         };

src/ng-add.spec.ts

@@ -129,7 +129,7 @@ describe('ng-add', () => {
 
 function generateAngularJson() {
   return {
-    defaultProject: PROJECT_NAME,
+    defaultProject: PROJECT_NAME as string | undefined,
     projects: {
       [PROJECT_NAME]: {
         projectType: 'application',

src/ng-add.ts

@@ -2,13 +2,13 @@ import { JsonParseMode, parseJson } from '@angular-devkit/core';
 import {
   SchematicContext,
   SchematicsException,
-  Tree,
+  Tree
 } from '@angular-devkit/schematics';
 import { Workspace } from './interfaces';
 
 function getWorkspace(host: Tree): { path: string; workspace: Workspace } {
   const possibleFiles = ['/angular.json', '/.angular.json'];
-  const path = possibleFiles.filter((path) => host.exists(path))[0];
+  const path = possibleFiles.filter(path => host.exists(path))[0];
 
   const configBuffer = host.read(path);
   if (configBuffer === null) {
@@ -25,7 +25,7 @@ function getWorkspace(host: Tree): { path: string; workspace: Workspace } {
 
   return {
     path,
-    workspace,
+    workspace
   };
 }
 interface NgAddOptions {
@@ -74,7 +74,7 @@ export const ngAdd = (options: NgAddOptions) => (
 
   project.architect['deploy'] = {
     builder: 'angular-cli-ghpages:deploy',
-    options: {},
+    options: {}
   };
 
   tree.overwrite(workspacePath, JSON.stringify(workspace, null, 2));