fix(localize): install @angular/localize in devDependencies by default

packages/localize/package.json

@@ -16,6 +16,9 @@
   "ng-update": {
     "packageGroup": "NG_UPDATE_PACKAGE_GROUP"
   },
+  "ng-add": {
+    "save": "devDependencies"
+  },
   "sideEffects": [
     "**/init/index.js",
     "**/init.js",
@@ -36,4 +39,4 @@
   "publishConfig": {
     "registry": "https://wombat-dressing-room.appspot.com"
   }
-}
+}

packages/localize/schematics/ng-add/README.md

@@ -3,4 +3,8 @@
 This schematic will be executed when an Angular CLI user runs `ng add @angular/localize`.
 
 It will search their `angular.json` file, and find polyfills and main files for server builders.
-Then it will add the `@angular/localize/init` polyfill that `@angular/localize` needs to work.
+Then it will add the `@angular/localize/init` polyfill that `@angular/localize` needs to work.
+
+If the user specifies that they want to use `$localize` at runtime then the dependency will be
+added to the `depdendencies` section of `package.json` rather than in the `devDependencies` which
+is the default.

packages/localize/schematics/ng-add/index.ts

@@ -9,7 +9,9 @@
  */
 
 import {virtualFs, workspaces} from '@angular-devkit/core';
-import {chain, Rule, SchematicsException, Tree} from '@angular-devkit/schematics';
+import {chain, Rule, SchematicContext, SchematicsException, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {addPackageJsonDependency, NodeDependencyType, removePackageJsonDependency} from '@schematics/angular/utility/dependencies';
 import {getWorkspace} from '@schematics/angular/utility/workspace';
 import {Builders} from '@schematics/angular/utility/workspace-models';
 
@@ -95,6 +97,24 @@ function prependToTargetFiles(
   };
 }
 
+function moveToDependencies(host: Tree, context: SchematicContext) {
+  if (host.exists('package.json')) {
+    // Remove the previous dependency and add in a new one under the desired type.
+    removePackageJsonDependency(host, '@angular/localize');
+    addPackageJsonDependency(host, {
+      name: '@angular/localize',
+      type: NodeDependencyType.Default,
+      version: `~0.0.0-PLACEHOLDER`
+    });
+
+    // Add a task to run the package manager. This is necessary because we updated
+    // "package.json" and we want lock files to reflect this.
+    context.addTask(new NodePackageInstallTask());
+  }
+}
+
+function noop() {}
+
 export default function(options: Schema): Rule {
   return async (host: Tree) => {
     if (!options.name) {
@@ -117,6 +137,9 @@ ${localizePolyfill}
     return chain([
       prependToTargetFiles(project, Builders.Browser, 'polyfills', localizeStr),
       prependToTargetFiles(project, Builders.Server, 'main', localizeStr),
+      // If `$localize` will be used at runtime then must install `@angular/localize`
+      // into `dependencies`, rather than the default of `devDependencies`.
+      options.useAtRuntime ? moveToDependencies : noop
     ]);
   };
 }

packages/localize/schematics/ng-add/index_spec.ts

@@ -33,6 +33,13 @@ export { renderModule, renderModuleFactory } from '@angular/platform-server';`;
 
   beforeEach(() => {
     host = new UnitTestTree(new HostTree());
+    host.create('package.json', JSON.stringify({
+      'devDependencies': {
+        // The default (according to `ng-add` in its package.json) is for `@angular/localize` to be
+        // saved to `devDependencies`.
+        '@angular/localize': '~0.0.0-PLACEHOLDER',
+      }
+    }));
     host.create('src/polyfills.ts', polyfillsContent);
     host.create('src/another-polyfills.ts', polyfillsContent);
     host.create('src/unrelated-polyfills.ts', polyfillsContent);
@@ -166,4 +173,22 @@ export { renderModule, renderModuleFactory } from '@angular/platform-server';`;
     }));
     await schematicRunner.runSchematicAsync('ng-add', defaultOptions, host).toPromise();
   });
+
+  it('should add package to `devDependencies` by default', async () => {
+    host = await schematicRunner.runSchematicAsync('ng-add', defaultOptions, host).toPromise();
+    const packageJsonText = host.readContent('/package.json');
+    expect(JSON.parse(packageJsonText).devDependencies?.['@angular/localize'])
+        .toBe('~0.0.0-PLACEHOLDER');
+    expect(JSON.parse(packageJsonText).dependencies?.['@angular/localize']).toBeUndefined();
+  });
+
+  it('should add package to `dependencies` if `useAtRuntime` is `true`', async () => {
+    host = await schematicRunner
+               .runSchematicAsync('ng-add', {...defaultOptions, useAtRuntime: true}, host)
+               .toPromise();
+    const packageJsonText = host.readContent('/package.json');
+    expect(JSON.parse(packageJsonText).dependencies?.['@angular/localize'])
+        .toBe('~0.0.0-PLACEHOLDER');
+    expect(JSON.parse(packageJsonText).devDependencies?.['@angular/localize']).toBeUndefined();
+  });
 });

packages/localize/schematics/ng-add/schema.d.ts

@@ -11,4 +11,11 @@ export interface Schema {
    * The name of the project.
    */
   name?: string;
+  /**
+   * Will this project use $localize at runtime?
+   *
+   * If true then the dependency is included in the `dependencies` section of packge.json, rather
+   * than `devDependencies`.
+   */
+  useAtRuntime?: boolean;
 }

packages/localize/schematics/ng-add/schema.json

@@ -10,8 +10,12 @@
       "$default": {
         "$source": "projectName"
       }
+    },
+    "useAtRuntime": {
+      "type": "boolean",
+      "description": "If set then `@angular/localize` is included in the `dependencies` section of `package.json`, rather than `devDependencies`, which is the default.",
+      "default": false
     }
   },
-  "required": [
-  ]
+  "required": []
 }