Skip to content

Commit

Permalink
feat(@angular/create): add support for yarn create and npm init
Browse files Browse the repository at this point in the history
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 angular#10339 and closes angular#14292
  • Loading branch information
alan-agius4 committed Jul 4, 2022
1 parent 5319428 commit 1e537a4
Show file tree
Hide file tree
Showing 10 changed files with 159 additions and 2 deletions.
10 changes: 10 additions & 0 deletions .monorepo.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,16 @@
],
"snapshotRepo": "angular/cli-builds"
},
"@angular/create": {
"name": "Angular Create",
"section": "Tooling",
"links": [
{
"label": "README",
"url": "/packages/angular/create/README.md"
}
]
},
"@angular/pwa": {
"name": "Angular PWA Schematics",
"section": "Schematics",
Expand Down
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ This is a monorepo which contains many tools and packages:
| Project | Package | Version | Links |
|---|---|---|---|
**Angular CLI** | [`@angular/cli`](https://npmjs.com/package/@angular/cli) | [![latest](https://img.shields.io/npm/v/%40angular%2Fcli/latest.svg)](https://npmjs.com/package/@angular/cli) | [![README](https://img.shields.io/badge/README--green.svg)](/packages/angular/cli/README.md) [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/cli-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) [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/create-builds)
**Architect CLI** | [`@angular-devkit/architect-cli`](https://npmjs.com/package/@angular-devkit/architect-cli) | [![latest](https://img.shields.io/npm/v/%40angular-devkit%2Farchitect-cli/latest.svg)](https://npmjs.com/package/@angular-devkit/architect-cli) | [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-devkit-architect-cli-builds)
**Schematics CLI** | [`@angular-devkit/schematics-cli`](https://npmjs.com/package/@angular-devkit/schematics-cli) | [![latest](https://img.shields.io/npm/v/%40angular-devkit%2Fschematics-cli/latest.svg)](https://npmjs.com/package/@angular-devkit/schematics-cli) | [![snapshot](https://img.shields.io/badge/snapshot--blue.svg)](https://github.com/angular/angular-devkit-schematics-cli-builds)

Expand Down
42 changes: 42 additions & 0 deletions packages/angular/create/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# 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

package(default_visibility = ["//visibility:public"])

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",
"@npm//@types/node",
],
)

genrule(
name = "license",
srcs = ["//:LICENSE"],
outs = ["LICENSE"],
cmd = "cp $(execpath //:LICENSE) $@",
)

pkg_npm(
name = "npm_package",
deps = [
":README.md",
":create",
":license",
],
)
21 changes: 21 additions & 0 deletions packages/angular/create/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# `@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]
```

**Note:** Use `.` as the project name to scaffold in the current working directory.
18 changes: 18 additions & 0 deletions packages/angular/create/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
27 changes: 27 additions & 0 deletions packages/angular/create/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
#!/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 cli from '@angular/cli';
import path from 'path';

// Invoke ng new with any parameters provided.
const args = process.argv.slice(2);
if (args[0] === '.') {
args[0] = path.basename(process.cwd());
}

void cli({ cliArgs: ['new', ...args] })
.then((exitCode) => {
process.exitCode = exitCode;
})
.catch((e) => {
// eslint-disable-next-line no-console
console.error(e);
process.exitCode = 1;
});
37 changes: 37 additions & 0 deletions tests/legacy-cli/e2e/tests/misc/create-angular.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
2 changes: 1 addition & 1 deletion tests/legacy-cli/e2e/utils/project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']) {
Expand Down
2 changes: 1 addition & 1 deletion tests/legacy-cli/verdaccio.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ uplinks:
maxFreeSockets: 8

packages:
'@angular/{cli,pwa}':
'@angular/{create,cli,pwa}':
access: $all
publish: $all

Expand Down

0 comments on commit 1e537a4

Please sign in to comment.