feat: add support for Angular v11 (follow up) (#120)

* work in progress

* docs: keeping track of all the forks

* chore: migrate from `configuration` to `buildTarget`

- only unit tests are evaluated right now
- no real tests were done yet

* ci: bump node version to see if this fixes the break

cause it works on my machine (tm)

* Revert "ci: bump node version to see if this fixes the break"

This reverts commit b300026.

* tweaking dependencies / peerDependencies

as seen in angularfire: https://github.com/angular/angularfire/blob/2ce41aa0af8c5f42df65f5ac5b2b5a50fb6f4300/package.json#L41-L68

commander has some breaking changes, so let's risk nothing here and rollback

* fixing build and tests, cleanup

see angular-schule/ngx-deploy-starter#10

* minor: docs + removes astronaut emoij

... since 👨‍🚀 emoij is combined (🧑‍🚀) and breaks on some cmds

* docs: breaking change, 1.0.0-rc.1

* docs: suggestion from @fmalcher

* Apply suggestions from code review

many thanks to @fmalcher

Co-authored-by: Ferdinand Malcher <ferdinand@malcher.media>

Co-authored-by: Ferdinand Malcher <ferdinand@malcher.media>

Author: JohannesHoppe

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2019 Johannes Hoppe
+Copyright (c) 2017-2020 Johannes Hoppe
 Copyright (c) 2019 Minko Gechev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of

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)
@@ -36,7 +36,29 @@
 
 A detailed changelog is available in the [releases](https://github.com/angular-schule/angular-cli-ghpages/releases) section.
 
-With this latest release, **GitHub Actions** becomes a first citizen alongside Travis CI and CircleCi. The token `GITHUB_TOKEN` is now supported. Learn everything you need to know in the following article.
+**⚠️ BREAKING CHANGE (v1)**
+
+Starting with version 1 the option `--configuration` was renamed to `--build-target`.
+
+BEFORE (_does not work_):
+
+```
+ng deploy --configuration=test
+```
+
+NOW:
+
+```
+ng deploy --build-target=test
+```
+
+If you use the old syntax, you will probably receive the following error:
+
+> An unhandled exception occurred: Configuration 'test' is not set in the workspace.
+
+<br>
+
+**🐙 GitHub Actions** is now properly supported alongside Travis CI and CircleCi. The token `GITHUB_TOKEN` is also supported. Learn everything you need to know in the following article.
 
 [![Banner](https://angular-schule.github.io/website-articles/blog/2020-01-everything-github/everything-github.png)](https://angular.schule/blog/2020-01-everything-github)
 
@@ -49,15 +71,15 @@ In this article we show several tools from the GitHub universe to launch a websi
 This command has the following prerequisites:
 
 - Git 1.9 or higher (execute `git --version` to check your version)
-- Angular project created via [Angular CLI](https://github.com/angular/angular-cli) v8.3.0 or greater (execute `ng update @angular/cli @angular/core` to upgrade your project if necessary)
+- Angular project created via [Angular CLI](https://github.com/angular/angular-cli) v9.0.0 or greater (execute `ng update` to upgrade your project if necessary)
 - older Angular projects can still use the standalone program. See the documentation at [README_standalone](https://github.com/angular-schule/angular-cli-ghpages/blob/master/docs/README_standalone.md).
 
 ## 🚀 Quick Start (local development) <a name="quickstart-local"></a>
 
 This quick start assumes that you are starting from scratch.
 If you already have an existing Angular project on GitHub, skip step 1 and 2.
 
-1. Install the latest version of the Angular CLI (v8.3.0 or greater) globally
+1. Install the latest version of the Angular CLI globally
    and create a new Angular project.
 
    ```sh
@@ -98,7 +120,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 +194,36 @@ 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 built 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.
+
+This is equivalent to calling the command `ng build --configuration=XXX`.
+This command has no effect if the option `--no-build` is active.
+
+**⚠️ BREAKING CHANGE (v1)**
+
+This option was called `--configuration` in previous versions.
+
+BEFORE (_does not work_):
 
-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.
+```
+ng deploy --configuration=test
+```
+
+NOW:
+
+```
+ng deploy --build-target=test
+```
 
 #### --no-build <a name="no-build"></a>
 
@@ -196,7 +235,7 @@ This command has no effect if the option `--no-build` option is active.
 
 Skip build process during deployment.
 This can be used when you are sure that you haven't changed anything and want to deploy with the latest artifact.
-This command causes the `--configuration` setting to have no effect.
+This command causes the `--build-target` setting to have no effect.
 
 #### --repo <a name="repo"></a>
 
@@ -313,7 +352,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 +385,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
 
@@ -28,15 +27,19 @@ This may be useful when you want to try the latest non-published version of this
 
 Follow the instructions for [checking and updating the Angular CLI version](#angular-cli) and then link the package.
 
-### 1. Angular CLI
+### 1. Optional: Latest Angular version
 
-1. Install the next version of the Angular CLI.
+This builder requires the method `getTargetOptions()` from the Angular DevKit which was introduced [here](https://github.com/angular/angular-cli/pull/13825/files).
+All Angular projects with Angular 9 and greater are supposed to be compatible. (Actually it works with some versions of 8.x too, but you want to be up to date anyway, don't you?)
+Execute the next three steps, if your test project is still older.
+
+1. Install the latest version of the Angular CLI.
 
    ```sh
    npm install -g @angular/cli
    ```
 
-2. Run `ng version`, make sure you have installed Angular CLI v8.3.0 or greater.
+2. Run `ng version`, to make sure you have installed Angular v9.0.0 or greater.
 
 3. Update your existing project using the command:
 
@@ -154,16 +157,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 angular-cli-ghpages@0.6.0-rc.0 next
 ```
 
-## Usage of Prettier Formatter
+## Keeping track of all the forks
+
+[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 deprecated [ngx-gh demo](https://github.com/mgechev/ngx-gh).
+This project was a follow-up of the deploy schematics from the [angularfire](https://github.com/angular/angularfire/) project.
 
-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)
+To stay in sync with the stuff the Angular team is doing, you might want to keep an eye on the following files:
 
-We are still working on this, see https://github.com/angular-schule/ngx-deploy-starter/issues/10 .
+- [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)
   );