Components: ng add @angular/material does not add styles to the app

[beeman]

Bug, feature request, or proposal:

When running ng add @angular/material on a new Angular app generated with Angular CLI v6 the styles are not applied.

What is the expected behavior?

The Angular Material stylesheet 'indigo-pink' gets applied.

What is the current behavior?

The stylesheet does not get applied.

Also, the schematic seems to update node_modules/@angular/material/prebuilt-themes/indigo-pink.css instead of src/styles.{ext} by adding body { margin: 0; }.

 ng add @angular/material
Installing packages for tooling via npm.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/[email protected]
added 1 package in 16.059s
Installed packages for tooling via npm.
UPDATE package.json (1390 bytes)
UPDATE angular.json (3766 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (483 bytes)
UPDATE node_modules/@angular/material/prebuilt-themes/indigo-pink.css (56678 bytes)

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0
Node: 10.0.0
OS: linux x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@angular/cdk                      <error>
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

 npm show @angular/material

{ name: '@angular/material',
  description: 'Angular Material',
  'dist-tags': { latest: '6.0.0', next: '6.0.0' },

Is there anything else we should know?

[jerryorta-dev]

The output can be a little misleading, but the styles are added to the angular.json file as

...
"styles": [
              {
                "input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
              },
              "src/styles.scss"
            ]
...

The cli will process the theme with your styles when served / built.

[beeman]

@jerryorta-dev thanks for your reply.

I tried it on two different machines but it does not work as expected.

My styles.css should get updated which it does not, and no style gets applied to my app.

I can post a repro if that comes in handy

[amcdnl]

@beeman - Can you post a example git repo? I ran this several times and didn't get this result. Only thing I can think of is a old angular-cli.json?

[beeman]

My original issue was not correct, the styles got applied but the margin on the body got lost after a fresh npm install.

However, I just tried it with the latest versions of Angular CLI and Angular Material and the issue is gone. Most likely fixed here #11189.

The output now is:

+ @angular/[email protected]
added 1 package in 13.004s
[!] 13 vulnerabilities found [21878 packages audited]
    Severity: 9 Low | 4 High
    Run `npm audit` for more detail

Installed packages for tooling via npm.
UPDATE package.json (1392 bytes)
UPDATE angular.json (3877 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (485 bytes)
UPDATE src/styles.scss (101 bytes)

So now src/styles.scss gets updated instead of node_modules/@angular/material/prebuilt-themes/indigo-pink.css, and that means the body margin stays 0 after a nuke of node_modules.

Issue fixed!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}