chore(schematics): improve messages for ng-add

In order to make the "failure" or "warning" messages with `ng-add` look more friendly and structured, we manually wrap the messages. Additionally `chalk` is being used more often in order to make it clear if something failed/passed or is just a warning.

Author: devversion

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

@@ -14,7 +14,7 @@ import {
   getProjectStyleFile,
   hasNgModuleImport,
 } from '@angular/cdk/schematics';
-import {red, bold} from 'chalk';
+import {red, bold, italic} from 'chalk';
 import {getWorkspace} from '@schematics/angular/utility/config';
 import {getAppModulePath} from '@schematics/angular/utility/ng-ast-utils';
 import {addFontsToIndex} from './fonts/material-fonts';
@@ -88,12 +88,20 @@ function addMaterialAppStyles(options: Schema) {
     const workspace = getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
     const styleFilePath = getProjectStyleFile(project);
-    const buffer = host.read(styleFilePath!);
 
-    if (!styleFilePath || !buffer) {
-      return console.warn(`Could not find styles file: "${styleFilePath}". Skipping styles ` +
-        `generation. Please consider manually adding the "Roboto" font and resetting the ` +
-        `body margin.`);
+    if (!styleFilePath) {
+      console.warn(red(`Could not find the default style file for this project.`));
+      console.warn(red(`Please consider manually setting up the Roboto font in your CSS.`));
+      return;
+    }
+
+    const buffer = host.read(styleFilePath);
+
+    if (!buffer) {
+      console.warn(red(`Could not read the default style file within the project ` +
+        `(${italic(styleFilePath)})`));
+      console.warn(red(`Please consider manually setting up the Robot font.`));
+      return;
     }
 
     const htmlContent = buffer.toString();

src/lib/schematics/ng-add/theming/theming.ts

@@ -19,7 +19,7 @@ import {getWorkspace} from '@schematics/angular/utility/config';
 import {join} from 'path';
 import {Schema} from '../schema';
 import {createCustomTheme} from './custom-theme';
-import {red, bold} from 'chalk';
+import {red, bold, yellow} from 'chalk';
 
 /** Path segment that can be found in paths that refer to a prebuilt theme. */
 const prebuiltThemePathSegment = '@angular/material/prebuilt-themes';
@@ -69,8 +69,8 @@ function insertCustomTheme(project: WorkspaceProject, projectName: string, host:
     const customThemePath = normalize(join(project.sourceRoot, defaultCustomThemeFilename));
 
     if (host.exists(customThemePath)) {
-      console.warn(red(`Cannot create a custom Angular Material theme because
-          "${customThemePath}" already exists. Skipping custom theme generation.`));
+      console.warn(yellow(`Cannot create a custom Angular Material theme because
+          ${bold(customThemePath)} already exists. Skipping custom theme generation.`));
       return;
     }
 
@@ -119,9 +119,10 @@ function addThemeStyleToTarget(project: WorkspaceProject, targetName: string, ho
       // theme because these files can contain custom styles, while prebuilt themes are
       // always packaged and considered replaceable.
       if (stylePath.includes(defaultCustomThemeFilename)) {
-        console.warn(red(`Cannot add "${bold(assetPath)} to the CLI project configuration ` +
-            `because there is already a custom theme file referenced. Please manually add ` +
-            `the "${bold(assetPath)}" style file to your configuration.`));
+        console.warn(red(`Could not add the selected theme to the CLI project configuration ` +
+            `because there is already a custom theme file referenced.`));
+        console.warn(red(`Please manually add the following style file to your configuration:`));
+        console.warn(yellow(`    ${bold(assetPath)}`));
         return;
       } else if (stylePath.includes(prebuiltThemePathSegment)) {
         targetOptions.styles.splice(index, 1);