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

@@ -4,11 +4,12 @@ import {Tree} from '@angular-devkit/schematics';
 import {SchematicTestRunner} from '@angular-devkit/schematics/testing';
 import {
   addModuleImportToRootModule,
-  getProjectFromWorkspace, getProjectIndexFiles,
+  getProjectFromWorkspace,
+  getProjectIndexFiles,
   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';
@@ -75,10 +76,10 @@ describe('ng-add schematic', () => {
             Object.keys(dependencies).sort(),
             'Expected the modified "dependencies" to be sorted alphabetically.');
 
-    expect(runner.tasks.some(task => task.name === 'node-package')).toBe(true,
-      'Expected the package manager to be scheduled in order to update lock files.');
-    expect(runner.tasks.some(task => task.name === 'run-schematic')).toBe(true,
-      'Expected the setup-project schematic to be scheduled.');
+    expect(runner.tasks.some(task => task.name === 'node-package'))
+        .toBe(true, 'Expected the package manager to be scheduled in order to update lock files.');
+    expect(runner.tasks.some(task => task.name === 'run-schematic'))
+        .toBe(true, 'Expected the setup-project schematic to be scheduled.');
   });
 
   it('should respect version range from CLI ng-add command', async () => {
@@ -152,10 +153,10 @@ describe('ng-add schematic', () => {
       // the created links properly align with the existing HTML. Default CLI projects use an
       // indentation of two columns.
       expect(htmlContent)
-        .toContain('  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"');
+          .toContain('  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"');
       expect(htmlContent)
-        .toContain(
-          '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"');
+          .toContain(
+              '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"');
     });
   });
 
@@ -246,7 +247,7 @@ describe('ng-add schematic', () => {
       overwriteTargetBuilder(appTree, 'build', 'thirdparty-builder');
 
       await expectAsync(runner.runSchematicAsync('ng-add-setup-project', {}, appTree).toPromise())
-        .toBeRejectedWithError(/not using the default builders.*build/);
+          .toBeRejectedWithError(/not using the default builders.*build/);
     });
 
     it('should warn if the "test" target has been changed', async () => {
@@ -256,8 +257,8 @@ describe('ng-add schematic', () => {
 
       expect(errorOutput.length).toBe(0);
       expect(warnOutput.length).toBe(1);
-      expect(warnOutput[0]).toMatch(
-          /not using the default builders.*cannot add the configured theme/);
+      expect(warnOutput[0])
+          .toMatch(/not using the default builders.*cannot add the configured theme/);
     });
   });
 
@@ -335,9 +336,8 @@ describe('ng-add schematic', () => {
   });
 
   it('should add the global typography class if the body has no classes', async () => {
-    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
-      typography: true
-    }, appTree).toPromise();
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {typography: true}, appTree)
+                     .toPromise();
     const workspace = getWorkspace(tree);
     const project = getProjectFromWorkspace(workspace);
 
@@ -358,9 +358,8 @@ describe('ng-add schematic', () => {
       </html>
     `);
 
-    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
-      typography: true
-    }, appTree).toPromise();
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {typography: true}, appTree)
+                     .toPromise();
 
     const workspace = getWorkspace(tree);
     const project = getProjectFromWorkspace(workspace);
@@ -381,9 +380,8 @@ describe('ng-add schematic', () => {
       </html>
     `);
 
-    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
-      typography: true
-    }, appTree).toPromise();
+    const tree = await runner.runSchematicAsync('ng-add-setup-project', {typography: true}, appTree)
+                     .toPromise();
 
     const workspace = getWorkspace(tree);
     const project = getProjectFromWorkspace(workspace);
@@ -404,9 +402,9 @@ describe('ng-add schematic', () => {
       </html>
     `);
 
-    const tree = await runner.runSchematicAsync('ng-add-setup-project', {
-      typography: false
-    }, appTree).toPromise();
+    const tree =
+        await runner.runSchematicAsync('ng-add-setup-project', {typography: false}, appTree)
+            .toPromise();
 
     const workspace = getWorkspace(tree);
     const project = getProjectFromWorkspace(workspace);
@@ -419,3 +417,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(/Your project is a library/);
+  });
+});

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

@@ -33,13 +33,25 @@ 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(
+        'Unable to set up Angular Material in a library project as there is no special ' +
+        'setup required. If you intended to run the schematic for a different project, ' +
+        'pass the `--project` option.');
+    return host;
+  };
 }
 
 /**
@@ -66,13 +78,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 +111,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;