feat(@angular/create): add support for yarn create and npm init

With this change we add support to scaffold  an Angular workspace using `yarn create @angular` and `npm init @angular`. These shortcuts support all of the `ng-new` options.

Closes #10339 and closes #14292

Author: alan-agius4

.monorepo.json

@@ -14,6 +14,16 @@
       ],
       "snapshotRepo": "angular/cli-builds"
     },
+    "@angular/create": {
+      "name": "Angular Create",
+      "section": "Misc",
+      "links": [
+        {
+          "label": "README",
+          "url": "/packages/angular/create/README.md"
+        }
+      ]
+    },
     "@angular/pwa": {
       "name": "Angular PWA Schematics",
       "section": "Schematics",

CONTRIBUTING.md

@@ -212,6 +212,7 @@ The scope should be the name of the npm package affected as perceived by the per
 The following is the list of supported scopes:
 
 * **@angular/cli**
+* **@angular/create**
 * **@angular/pwa**
 * **@angular-devkit/architect**
 * **@angular-devkit/architect-cli**

README.md

@@ -164,18 +164,19 @@ This is a monorepo which contains many tools and packages:
 **Core** | [`@angular-devkit/core`](https://npmjs.com/package/@angular-devkit/core) | [![latest](https://img.shields.io/npm/v/%40angular-devkit%2Fcore/latest.svg)](https://npmjs.com/package/@angular-devkit/core) | [![README](https://img.shields.io/badge/README--green.svg)](/packages/angular_devkit/core/README.md) [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-devkit-core-builds)
 **Schematics** | [`@angular-devkit/schematics`](https://npmjs.com/package/@angular-devkit/schematics) | [![latest](https://img.shields.io/npm/v/%40angular-devkit%2Fschematics/latest.svg)](https://npmjs.com/package/@angular-devkit/schematics) | [![README](https://img.shields.io/badge/README--green.svg)](/packages/angular_devkit/schematics/README.md) [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-devkit-schematics-builds)
 
-#### Schematics
+#### Misc
 
 | Project | Package | Version | Links |
 |---|---|---|---|
-**Angular PWA Schematics** | [`@angular/pwa`](https://npmjs.com/package/@angular/pwa) | [![latest](https://img.shields.io/npm/v/%40angular%2Fpwa/latest.svg)](https://npmjs.com/package/@angular/pwa) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-pwa-builds)
-**Angular Schematics** | [`@schematics/angular`](https://npmjs.com/package/@schematics/angular) | [![latest](https://img.shields.io/npm/v/%40schematics%2Fangular/latest.svg)](https://npmjs.com/package/@schematics/angular) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/schematics-angular-builds)
+**Angular Create** | [`@angular/create`](https://npmjs.com/package/@angular/create) | [![latest](https://img.shields.io/npm/v/%40angular%2Fcreate/latest.svg)](https://npmjs.com/package/@angular/create) | [![README](https://img.shields.io/badge/README--green.svg)](/packages/angular/create/README.md)
+**Webpack Angular Plugin** | [`@ngtools/webpack`](https://npmjs.com/package/@ngtools/webpack) | [![latest](https://img.shields.io/npm/v/%40ngtools%2Fwebpack/latest.svg)](https://npmjs.com/package/@ngtools/webpack) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/ngtools-webpack-builds)
 
-#### Misc
+#### Schematics
 
 | Project | Package | Version | Links |
 |---|---|---|---|
-**Webpack Angular Plugin** | [`@ngtools/webpack`](https://npmjs.com/package/@ngtools/webpack) | [![latest](https://img.shields.io/npm/v/%40ngtools%2Fwebpack/latest.svg)](https://npmjs.com/package/@ngtools/webpack) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/ngtools-webpack-builds)
+**Angular PWA Schematics** | [`@angular/pwa`](https://npmjs.com/package/@angular/pwa) | [![latest](https://img.shields.io/npm/v/%40angular%2Fpwa/latest.svg)](https://npmjs.com/package/@angular/pwa) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-pwa-builds)
+**Angular Schematics** | [`@schematics/angular`](https://npmjs.com/package/@schematics/angular) | [![latest](https://img.shields.io/npm/v/%40schematics%2Fangular/latest.svg)](https://npmjs.com/package/@schematics/angular) |  [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/schematics-angular-builds)
 
 
 

packages/angular/create/BUILD.bazel

@@ -0,0 +1,41 @@
+# Copyright Google Inc. All Rights Reserved.
+#
+# Use of this source code is governed by an MIT-style license that can be
+# found in the LICENSE file at https://angular.io/license
+
+load("//tools:defaults.bzl", "pkg_npm", "ts_library")
+
+licenses(["notice"])  # MIT
+
+ts_library(
+    name = "create",
+    package_name = "@angular/create",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            # NB: we need to exclude the nested node_modules that is laid out by yarn workspaces
+            "node_modules/**",
+        ],
+    ),
+    deps = [
+        "//packages/angular/cli:angular-cli",
+        "@npm//@types/node",
+    ],
+)
+
+genrule(
+    name = "license",
+    srcs = ["//:LICENSE"],
+    outs = ["LICENSE"],
+    cmd = "cp $(execpath //:LICENSE) $@",
+)
+
+pkg_npm(
+    name = "npm_package",
+    visibility = ["//visibility:public"],
+    deps = [
+        ":README.md",
+        ":create",
+        ":license",
+    ],
+)

packages/angular/create/README.md

@@ -0,0 +1,19 @@
+# `@angular/create`
+
+# Create an Angular CLI workspace
+
+Scaffold an Angular CLI workspace without needing to install the Angular CLI globally. All of the [ng new](https://angular.io/cli/new) options and features are supported.
+
+# Usage
+
+NPM
+
+```
+npm init @angular@latest [project-name] -- [...options]
+```
+
+Yarn
+
+```
+yarn create @angular [project-name] [...options]
+```

packages/angular/create/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@angular/create",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Scaffold an Angular CLI workspace.",
+  "keywords": [
+    "angular",
+    "angular-cli",
+    "Angular CLI",
+    "code generation",
+    "schematics"
+  ],
+  "bin": {
+    "create": "./src/index.js"
+  },
+  "dependencies": {
+    "@angular/cli": "0.0.0-PLACEHOLDER"
+  }
+}

packages/angular/create/src/index.ts

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { spawnSync } from 'child_process';
+import { join } from 'path';
+
+const binPath = join(require.resolve('@angular/cli/package.json'), '../bin/ng.js');
+
+// Invoke ng new with any parameters provided.
+const { error } = spawnSync(process.execPath, [binPath, 'new', ...process.argv.slice(2)], {
+  stdio: 'inherit',
+});
+
+if (error) {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  process.exitCode = 1;
+}

tests/legacy-cli/e2e/tests/misc/create-angular.ts

@@ -0,0 +1,37 @@
+import { join, resolve } from 'path';
+import { expectFileToExist, rimraf } from '../../utils/fs';
+import { getActivePackageManager } from '../../utils/packages';
+import { silentNpm, silentYarn } from '../../utils/process';
+
+export default async function () {
+  const currentDirectory = process.cwd();
+  const newDirectory = resolve('../');
+
+  const projectName = 'test-project-create';
+
+  try {
+    process.chdir(newDirectory);
+    const packageManager = getActivePackageManager();
+
+    switch (packageManager) {
+      case 'npm':
+        await silentNpm('init', '@angular', projectName, '--', '--skip-install', '--style=scss');
+
+        break;
+      case 'yarn':
+        await silentYarn('create', '@angular', projectName, '--skip-install', '--style=scss');
+
+        break;
+      default:
+        throw new Error(`This test is not configured to use ${packageManager}.`);
+    }
+
+    await expectFileToExist(join(projectName, 'angular.json'));
+    // Verify styles was create with correct extension.
+    await expectFileToExist(join(projectName, 'src/styles.scss'));
+  } finally {
+    await rimraf(projectName);
+    // Change directory back
+    process.chdir(currentDirectory);
+  }
+}

tests/legacy-cli/e2e/utils/project.ts

@@ -39,7 +39,7 @@ export async function prepareProjectForE2e(name: string) {
   const argv: yargsParser.Arguments = getGlobalVariable('argv');
 
   await git('config', 'user.email', '[email protected]');
-  await git('config', 'user.name', 'Angular CLI E2e');
+  await git('config', 'user.name', 'Angular CLI E2E');
   await git('config', 'commit.gpgSign', 'false');
 
   if (argv['ng-snapshots'] || argv['ng-tag']) {

tests/legacy-cli/verdaccio.yaml

@@ -17,7 +17,7 @@ uplinks:
       maxFreeSockets: 8
 
 packages:
-  '@angular/{cli,pwa}':
+  '@angular/{create,cli,pwa}':
     access: $all
     publish: $all