@schematics/angular 14.1.0-next.4 → 14.1.1

package/app-shell/schema.json

@@ -5,7 +5,6 @@
   "type": "object",
   "description": "Generates an application shell for running a server-side version of an app.",
   "additionalProperties": false,
-  "long-description": "./app-shell-long.md",
   "properties": {
     "project": {
       "type": "string",

package/application/other-files/app.component.html.template

@@ -367,7 +367,7 @@
     </a>
 
     <a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
-      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 179.2 192.7"><path fill="#ffa726" d="M89.4 0 0 32l13.5 118.4 75.9 42.3 76-42.3L179.2 32 89.4 0z"/><path fill="#fb8c00" d="M89.4 0v192.7l76-42.3L179.2 32 89.4 0z"/><path fill="#ffe0b2" d="m102.9 146.3-63.3-30.5 36.3-22.4 63.7 30.6-36.7 22.3z"/><path fill="#fff3e0" d="M102.9 122.8 39.6 92.2l36.3-22.3 63.7 30.6-36.7 22.3z"/><path fill="#fff" d="M102.9 99.3 39.6 68.7l36.3-22.4 63.7 30.6-36.7 22.4z"/></svg>
       <span>Angular Material</span>
       <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
     </a>

package/e2e/index.js

@@ -65,7 +65,10 @@ function default_1(options) {
                 }),
                 (0, schematics_1.move)(e2eRootPath),
             ])),
-            ...E2E_DEV_DEPENDENCIES.map((name) => (0, utility_1.addDependency)(name, latest_versions_1.latestVersions[name], { type: utility_1.DependencyType.Dev })),
+            ...E2E_DEV_DEPENDENCIES.map((name) => (0, utility_1.addDependency)(name, latest_versions_1.latestVersions[name], {
+                type: utility_1.DependencyType.Dev,
+                existing: utility_1.ExistingBehavior.Skip,
+            })),
             addScriptsToPackageJson(),
         ]);
     });

package/e2e/schema.json

@@ -5,7 +5,6 @@
   "type": "object",
   "additionalProperties": false,
   "description": "Generates a new, generic end-to-end test definition for the given or default project.",
-  "long-description": "e2e-long.md",
   "properties": {
     "rootSelector": {
       "description": "The HTML selector for the root component of the test app.",

package/library/schema.json

@@ -4,7 +4,6 @@
   "title": "Library Options Schema",
   "type": "object",
   "description": "Creates a new, generic library project in the current workspace.",
-  "long-description": "./library-long.md",
   "additionalProperties": false,
   "properties": {
     "name": {

package/module/index.js

@@ -37,6 +37,7 @@ const ast_utils_1 = require("../utility/ast-utils");
 const change_1 = require("../utility/change");
 const find_module_1 = require("../utility/find-module");
 const parse_name_1 = require("../utility/parse-name");
+const validation_1 = require("../utility/validation");
 const workspace_1 = require("../utility/workspace");
 const schema_1 = require("./schema");
 function buildRelativeModulePath(options, modulePath) {
@@ -118,6 +119,7 @@ function default_1(options) {
         const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
         options.name = parsedPath.name;
         options.path = parsedPath.path;
+        (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
         const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
             options.routing || (isLazyLoadedModuleGen && routingModulePath)
                 ? (0, schematics_1.noop)()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematics/angular",
-  "version": "14.1.0-next.4",
+  "version": "14.1.1",
   "description": "Schematics specific to Angular",
   "homepage": "https://github.com/angular/angular-cli",
   "keywords": [
@@ -23,9 +23,9 @@
   },
   "schematics": "./collection.json",
   "dependencies": {
-    "@angular-devkit/core": "14.1.0-next.4",
-    "@angular-devkit/schematics": "14.1.0-next.4",
-    "jsonc-parser": "3.0.0"
+    "@angular-devkit/core": "14.1.1",
+    "@angular-devkit/schematics": "14.1.1",
+    "jsonc-parser": "3.1.0"
   },
   "repository": {
     "type": "git",

package/pipe/index.js

@@ -36,6 +36,7 @@ const ast_utils_1 = require("../utility/ast-utils");
 const change_1 = require("../utility/change");
 const find_module_1 = require("../utility/find-module");
 const parse_name_1 = require("../utility/parse-name");
+const validation_1 = require("../utility/validation");
 const workspace_1 = require("../utility/workspace");
 function addDeclarationToNgModule(options) {
     return (host) => {
@@ -75,13 +76,13 @@ function addDeclarationToNgModule(options) {
 }
 function default_1(options) {
     return async (host) => {
-        if (options.path === undefined) {
-            options.path = await (0, workspace_1.createDefaultPath)(host, options.project);
-        }
+        var _a;
+        (_a = options.path) !== null && _a !== void 0 ? _a : (options.path = await (0, workspace_1.createDefaultPath)(host, options.project));
         options.module = (0, find_module_1.findModuleFromOptions)(host, options);
         const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
         options.name = parsedPath.name;
         options.path = parsedPath.path;
+        (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
         const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
             options.skipTests ? (0, schematics_1.filter)((path) => !path.endsWith('.spec.ts.template')) : (0, schematics_1.noop)(),
             (0, schematics_1.applyTemplates)({

package/utility/dependency.d.ts

@@ -38,6 +38,23 @@ export declare enum InstallBehavior {
      */
     Always = 2
 }
+/**
+ * An enum used to specify the existing dependency behavior for the {@link addDependency}
+ * schematics rule. The existing behavior affects whether the named dependency will be added
+ * to the `package.json` when the dependency is already present with a differing specifier.
+ */
+export declare enum ExistingBehavior {
+    /**
+     * The dependency will not be added or otherwise changed if it already exists.
+     */
+    Skip = 0,
+    /**
+     * The dependency's existing specifier will be replaced with the specifier provided in the
+     * {@link addDependency} call. A warning will also be shown during schematic execution to
+     * notify the user of the replacement.
+     */
+    Replace = 1
+}
 /**
  * Adds a package as a dependency to a `package.json`. By default the `package.json` located
  * at the schematic's root will be used. The `manifestPath` option can be used to explicitly specify
@@ -71,4 +88,9 @@ export declare function addDependency(name: string, specifier: string, options?:
      * Defaults to {@link InstallBehavior.Auto}.
      */
     install?: InstallBehavior;
+    /**
+     * The behavior to use when the dependency already exists within the `package.json`.
+     * Defaults to {@link ExistingBehavior.Replace}.
+     */
+    existing?: ExistingBehavior;
 }): Rule;

package/utility/dependency.js

@@ -30,7 +30,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addDependency = exports.InstallBehavior = exports.DependencyType = void 0;
+exports.addDependency = exports.ExistingBehavior = exports.InstallBehavior = exports.DependencyType = void 0;
 const tasks_1 = require("@angular-devkit/schematics/tasks");
 const path = __importStar(require("path"));
 const installTasks = new WeakMap();
@@ -68,6 +68,24 @@ var InstallBehavior;
      */
     InstallBehavior[InstallBehavior["Always"] = 2] = "Always";
 })(InstallBehavior = exports.InstallBehavior || (exports.InstallBehavior = {}));
+/**
+ * An enum used to specify the existing dependency behavior for the {@link addDependency}
+ * schematics rule. The existing behavior affects whether the named dependency will be added
+ * to the `package.json` when the dependency is already present with a differing specifier.
+ */
+var ExistingBehavior;
+(function (ExistingBehavior) {
+    /**
+     * The dependency will not be added or otherwise changed if it already exists.
+     */
+    ExistingBehavior[ExistingBehavior["Skip"] = 0] = "Skip";
+    /**
+     * The dependency's existing specifier will be replaced with the specifier provided in the
+     * {@link addDependency} call. A warning will also be shown during schematic execution to
+     * notify the user of the replacement.
+     */
+    ExistingBehavior[ExistingBehavior["Replace"] = 1] = "Replace";
+})(ExistingBehavior = exports.ExistingBehavior || (exports.ExistingBehavior = {}));
 /**
  * Adds a package as a dependency to a `package.json`. By default the `package.json` located
  * at the schematic's root will be used. The `manifestPath` option can be used to explicitly specify
@@ -85,7 +103,7 @@ var InstallBehavior;
  * @returns A Schematics {@link Rule}
  */
 function addDependency(name, specifier, options = {}) {
-    const { type = DependencyType.Default, packageJsonPath = '/package.json', install = InstallBehavior.Auto, } = options;
+    const { type = DependencyType.Default, packageJsonPath = '/package.json', install = InstallBehavior.Auto, existing = ExistingBehavior.Replace, } = options;
     return (tree, context) => {
         var _a;
         const manifest = tree.readJson(packageJsonPath);
@@ -94,15 +112,21 @@ function addDependency(name, specifier, options = {}) {
             // Section is not present. The dependency can be added to a new object literal for the section.
             manifest[type] = { [name]: specifier };
         }
-        else if (dependencySection[name] === specifier) {
-            // Already present with same specifier
-            return;
-        }
-        else if (dependencySection[name]) {
-            // Already present but different specifier
-            throw new Error(`Package dependency "${name}" already exists with a different specifier.`);
-        }
         else {
+            const existingSpecifier = dependencySection[name];
+            if (existingSpecifier === specifier) {
+                // Already present with same specifier
+                return;
+            }
+            if (existingSpecifier) {
+                // Already present but different specifier
+                if (existing === ExistingBehavior.Skip) {
+                    return;
+                }
+                // ExistingBehavior.Replace is the only other behavior currently
+                context.logger.warn(`Package dependency "${name}" already exists with a different specifier. ` +
+                    `"${existingSpecifier}" will be replaced with "${specifier}".`);
+            }
             // Add new dependency in alphabetical order
             const entries = Object.entries(dependencySection);
             entries.push([name, specifier]);

package/utility/generate-from-files.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateFromFiles = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
 const parse_name_1 = require("./parse-name");
+const validation_1 = require("./validation");
 const workspace_1 = require("./workspace");
 function generateFromFiles(options, extraTemplateValues = {}) {
     return async (host) => {
@@ -20,6 +21,7 @@ function generateFromFiles(options, extraTemplateValues = {}) {
         const parsedPath = (0, parse_name_1.parseName)(options.path, options.name);
         options.name = parsedPath.name;
         options.path = parsedPath.path;
+        (0, validation_1.validateClassName)(schematics_1.strings.classify(options.name));
         const templateSource = (0, schematics_1.apply)((0, schematics_1.url)('./files'), [
             options.skipTests ? (0, schematics_1.filter)((path) => !path.endsWith('.spec.ts.template')) : (0, schematics_1.noop)(),
             (0, schematics_1.applyTemplates)({

package/utility/index.d.ts

@@ -7,4 +7,4 @@
  */
 export { ProjectDefinition, TargetDefinition, WorkspaceDefinition, getWorkspace as readWorkspace, updateWorkspace, writeWorkspace, } from './workspace';
 export { Builders as AngularBuilder } from './workspace-models';
-export { DependencyType, InstallBehavior, addDependency } from './dependency';
+export { DependencyType, ExistingBehavior, InstallBehavior, addDependency } from './dependency';

package/utility/index.js

@@ -7,7 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addDependency = exports.InstallBehavior = exports.DependencyType = exports.AngularBuilder = exports.writeWorkspace = exports.updateWorkspace = exports.readWorkspace = void 0;
+exports.addDependency = exports.InstallBehavior = exports.ExistingBehavior = exports.DependencyType = exports.AngularBuilder = exports.writeWorkspace = exports.updateWorkspace = exports.readWorkspace = void 0;
 // Workspace related rules and types
 var workspace_1 = require("./workspace");
 Object.defineProperty(exports, "readWorkspace", { enumerable: true, get: function () { return workspace_1.getWorkspace; } });
@@ -18,5 +18,6 @@ Object.defineProperty(exports, "AngularBuilder", { enumerable: true, get: functi
 // Package dependency related rules and types
 var dependency_1 = require("./dependency");
 Object.defineProperty(exports, "DependencyType", { enumerable: true, get: function () { return dependency_1.DependencyType; } });
+Object.defineProperty(exports, "ExistingBehavior", { enumerable: true, get: function () { return dependency_1.ExistingBehavior; } });
 Object.defineProperty(exports, "InstallBehavior", { enumerable: true, get: function () { return dependency_1.InstallBehavior; } });
 Object.defineProperty(exports, "addDependency", { enumerable: true, get: function () { return dependency_1.addDependency; } });

package/utility/latest-versions/package.json

@@ -12,11 +12,11 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "karma-jasmine": "~5.1.0",
     "karma": "~6.4.0",
-    "ng-packagr": "^14.0.0-next.8",
+    "ng-packagr": "^14.1.0",
     "protractor": "~7.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "ts-node": "~10.8.0",
+    "ts-node": "~10.9.0",
     "typescript": "~4.7.2",
     "zone.js": "~0.11.4"
   }

package/utility/latest-versions.js

@@ -13,7 +13,7 @@ exports.latestVersions = {
     // but ts_library doesn't support JSON inputs.
     ...require('./latest-versions/package.json')['dependencies'],
     // As Angular CLI works with same minor versions of Angular Framework, a tilde match for the current
-    Angular: '^14.0.0-next.0',
+    Angular: '^14.1.0',
     // Since @angular-devkit/build-angular and @schematics/angular are always
     // published together from the same monorepo, and they are both
     // non-experimental, they will always have the same version.

package/utility/validation.d.ts

@@ -7,3 +7,4 @@
  */
 export declare const htmlSelectorRe: RegExp;
 export declare function validateHtmlSelector(selector: string): void;
+export declare function validateClassName(className: string): void;

package/utility/validation.js

@@ -7,14 +7,22 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateHtmlSelector = exports.htmlSelectorRe = void 0;
+exports.validateClassName = exports.validateHtmlSelector = exports.htmlSelectorRe = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
 // Must start with a letter, and must contain only alphanumeric characters or dashes.
 // When adding a dash the segment after the dash must also start with a letter.
 exports.htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
+// See: https://github.com/tc39/proposal-regexp-unicode-property-escapes/blob/fe6d07fad74cd0192d154966baa1e95e7cda78a1/README.md#other-examples
+const ecmaIdentifierNameRegExp = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;
 function validateHtmlSelector(selector) {
     if (selector && !exports.htmlSelectorRe.test(selector)) {
-        throw new schematics_1.SchematicsException(`Selector (${selector}) is invalid.`);
+        throw new schematics_1.SchematicsException(`Selector "${selector}" is invalid.`);
     }
 }
 exports.validateHtmlSelector = validateHtmlSelector;
+function validateClassName(className) {
+    if (!ecmaIdentifierNameRegExp.test(className)) {
+        throw new schematics_1.SchematicsException(`Class name "${className}" is invalid.`);
+    }
+}
+exports.validateClassName = validateClassName;

package/app-shell/app-shell-long.md

@@ -1,47 +0,0 @@
-An app shell lets Universal render a portion of your application via a route at build time.
-This gives users a meaningful first paint of your application that appears quickly
-because the browser can simply render the HTML without the need to initialize any JavaScript.
-
-Use this command with a routing app that is accompanied by a Universal server-side app.
-
-To create an app shell, use the following command.
-
-<code-example format="." language="bash">
- ng generate app-shell my-app
-</code-example>
-
-- `my-app` is the name of your client application
-- `server-app` is the name of the Universal (server) application
-
-The command adds two new architect build targets to your `angular.json` configuration file (along with a few other changes).
-
-<code-example  format="." language="none" linenums="false">
-"server": {
-  "builder": "@angular-devkit/build-angular:server",
-  "options": {
-    "outputPath": "dist/my-app-server",
-    "main": "src/main.server.ts",
-    "tsConfig": "src/tsconfig.server.json"
-  }
-},
-"app-shell": {
-  "builder": "@angular-devkit/build-angular:app-shell",
-  "options": {
-    "browserTarget": "my-app:build",
-    "serverTarget": "my-app:server",
-    "route": "shell"
-  }
-}
-</code-example>
-
-To verify the that the app has been built with the default shell content:
-
-1. Run the app-shell target.
-
-   <code-example format="." language="bash">
-       ng run my-app:app-shell
-    </code-example>
-
-1. Open `dist/app-shell/index.html` in your browser.
-
-The default text "app-shell works!" verifies that the app-shell route was rendered as part of the output.

package/e2e/e2e-long.md

@@ -1,2 +0,0 @@
-The e2e tests are created in a separate application in the `projects` folder of the workspace,
-next to the project being tested.

package/library/files/.browserslistrc.template

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

package/library/library-long.md

@@ -1,5 +0,0 @@
-A library is a type of project that does not run independently.
-The library skeleton created by this command is placed by default in the `/projects` folder, and has `type` of "library".
-
-You can build a new library using the `ng build` command, run unit tests for it using the `ng test` command,
-and lint it using the `ng lint` command.