Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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": "Misc",
"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
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)



Expand Down
41 changes: 41 additions & 0 deletions packages/angular/create/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -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",
],
)
19 changes: 19 additions & 0 deletions packages/angular/create/README.md
Original file line number Diff line number Diff line change
@@ -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]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Is @latest necessary?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, for NPM this is needed as otherwise if this command was previously used, the cached binary will be used.

```

Yarn

```
yarn create @angular [project-name] [...options]
```
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"
}
}
24 changes: 24 additions & 0 deletions packages/angular/create/src/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}
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