fix(ng-add): ng add @angular/material fails in library projects

Skip app related ng-add steps when working with library projects and warn about missing setup steps

Author: trik

src/cdk/schematics/testing/index.ts

@@ -9,5 +9,6 @@
 export * from './post-scheduled-tasks';
 export * from './test-app';
 export * from './test-case-setup';
+export * from './test-library';
 export * from './file-content';
 export * from './resolve-bazel-path';

src/cdk/schematics/testing/test-app.ts

@@ -9,15 +9,10 @@
 import {Tree} from '@angular-devkit/schematics';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
 
+import {createTestProject} from './test-project';
+
 /** Create a base app used for testing. */
 export async function createTestApp(runner: SchematicTestRunner, appOptions = {}, tree?: Tree):
     Promise<UnitTestTree> {
-  const workspaceTree = await runner.runExternalSchematicAsync('@schematics/angular', 'workspace', {
-    name: 'workspace',
-    version: '6.0.0',
-    newProjectRoot: 'projects',
-  }, tree).toPromise();
-
-  return runner.runExternalSchematicAsync('@schematics/angular', 'application',
-      {name: 'material', ...appOptions}, workspaceTree).toPromise();
+  return createTestProject(runner, 'application', appOptions, tree);
 }

src/cdk/schematics/testing/test-library.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {Tree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+
+import {createTestProject} from './test-project';
+
+/** Create a base library used for testing. */
+export async function createTestLibrary(runner: SchematicTestRunner, appOptions = {}, tree?: Tree):
+    Promise<UnitTestTree> {
+  return createTestProject(runner, 'library', appOptions, tree);
+}

src/cdk/schematics/testing/test-project.ts

@@ -0,0 +1,24 @@
+/**
+ * @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 {Tree} from '@angular-devkit/schematics';
+import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
+
+/** Create a base project used for testing. */
+export async function createTestProject(
+  runner: SchematicTestRunner, projectType: 'application'|'library', appOptions = {}, tree?: Tree):
+    Promise<UnitTestTree> {
+  const workspaceTree = await runner.runExternalSchematicAsync('@schematics/angular', 'workspace', {
+    name: 'workspace',
+    version: '6.0.0',
+    newProjectRoot: 'projects',
+  }, tree).toPromise();
+
+  return runner.runExternalSchematicAsync('@schematics/angular', projectType,
+      {name: 'material', ...appOptions}, workspaceTree).toPromise();
+}

src/material/schematics/ng-add/index.spec.ts

@@ -8,7 +8,7 @@ import {
   getProjectStyleFile,
   getProjectTargetOptions,
 } from '@angular/cdk/schematics';
-import {createTestApp, getFileContent} from '@angular/cdk/schematics/testing';
+import {createTestApp, createTestLibrary, getFileContent} from '@angular/cdk/schematics/testing';
 import {getWorkspace} from '@schematics/angular/utility/config';
 import {COLLECTION_PATH} from '../index.spec';
 import {addPackageToPackageJson} from './package-config';
@@ -419,3 +419,33 @@ describe('ng-add schematic', () => {
     });
   });
 });
+
+describe('ng-add schematic - library project', () => {
+  let runner: SchematicTestRunner;
+  let libraryTree: Tree;
+  let errorOutput: string[];
+  let warnOutput: string[];
+
+  beforeEach(async () => {
+    runner = new SchematicTestRunner('schematics', require.resolve('../collection.json'));
+    libraryTree = await createTestLibrary(runner);
+
+    errorOutput = [];
+    warnOutput = [];
+    runner.logger.subscribe(e => {
+      if (e.level === 'error') {
+        errorOutput.push(e.message);
+      } else if (e.level === 'warn') {
+        warnOutput.push(e.message);
+      }
+    });
+  });
+
+  it('should warn if a library project is targeted', async () => {
+    await runner.runSchematicAsync('ng-add-setup-project', {}, libraryTree).toPromise();
+
+    expect(errorOutput.length).toBe(0);
+    expect(warnOutput.length).toBe(1);
+    expect(warnOutput[0]).toMatch(/Unable to set up Angular Material in a library project/);
+  });
+});

src/material/schematics/ng-add/setup-project.ts

@@ -33,13 +33,26 @@ const noopAnimationsModuleName = 'NoopAnimationsModule';
  *  - Adds Browser Animation to app.module
  */
 export default function(options: Schema): Rule {
-  return chain([
-    addAnimationsModule(options),
-    addThemeToAppStyles(options),
-    addFontsToIndex(options),
-    addMaterialAppStyles(options),
-    addTypographyClass(options),
-  ]);
+  return (host: Tree, context: SchematicContext) => {
+    const workspace = getWorkspace(host);
+    const project = getProjectFromWorkspace(workspace, options.project);
+
+    if (project.projectType === 'application') {
+      return chain([
+        addAnimationsModule(options),
+        addThemeToAppStyles(options),
+        addFontsToIndex(options),
+        addMaterialAppStyles(options),
+        addTypographyClass(options),
+      ]);
+    }
+    context.logger.warn(
+        'Angular Material has been set up in your workspace. There is no additional setup' +
+        'required for consuming Angular Material in your library project.\n\n' +
+        'If you intended to run the schematic on a different project, pass the `--project` ' +
+        'option.');
+    return host;
+  };
 }
 
 /**
@@ -66,13 +79,13 @@ function addAnimationsModule(options: Schema) {
         return;
       }
 
-      addModuleImportToRootModule(host, browserAnimationsModuleName,
-          '@angular/platform-browser/animations', project);
+      addModuleImportToRootModule(
+          host, browserAnimationsModuleName, '@angular/platform-browser/animations', project);
     } else if (!hasNgModuleImport(host, appModulePath, browserAnimationsModuleName)) {
       // Do not add the NoopAnimationsModule module if the project already explicitly uses
       // the BrowserAnimationsModule.
-      addModuleImportToRootModule(host, noopAnimationsModuleName,
-        '@angular/platform-browser/animations', project);
+      addModuleImportToRootModule(
+          host, noopAnimationsModuleName, '@angular/platform-browser/animations', project);
     }
 
     return host;
@@ -99,16 +112,17 @@ function addMaterialAppStyles(options: Schema) {
     const buffer = host.read(styleFilePath);
 
     if (!buffer) {
-      logger.error(`Could not read the default style file within the project ` +
-        `(${styleFilePath})`);
+      logger.error(
+          `Could not read the default style file within the project ` +
+          `(${styleFilePath})`);
       logger.info(`Please consider manually setting up the Robot font.`);
       return;
     }
 
     const htmlContent = buffer.toString();
     const insertion = '\n' +
-      `html, body { height: 100%; }\n` +
-      `body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }\n`;
+        `html, body { height: 100%; }\n` +
+        `body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }\n`;
 
     if (htmlContent.includes(insertion)) {
       return;