Subtle problem in your tutorial pages...

[MikeInSwitzerland]

Hi guys,

I've wasted days, simply trying to create an Angular project, then adding in Angular Materials, as I followed the bad advice on this webpage:

Setup for local development

You can read my horror story here but basically, if you create an Angular project using the following command, adding Materials is a nightmare.

git clone https://github.com/angular/quickstart AngularDemo

(I was also given this advice when watching a John Papa PluralSight video for Angular 2 beginners.)

The worrying thing is the Angular beginner's tutorial does still recommend using this method. See the "Follow the setup instructions" link on this page.

One other issue with the Angular Materials tutorial.

On Windows 7, it refused to include any of the prebuilt-themes .css files.

Your tutorial suggests (in part 4) to include this in the index.html file:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

It doesn't work.

Even if I copy one of the .css themes into the same folder as my index.html file, my browser can't find them.

Instead, I needed to add this line to the styles.css file:

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

This stuff is baffling...

I genuinely miss the simplicity and stability of Angular 1...

[willshowell]

I have not looked through the quickstart repo, but I just ran through the Material Getting Started guide using the angular cli without issues. Not sure why that quickstart repo is still recommended if the cli is out of beta.

...I see now from your SO question that you've come to the same conclusion. I can't help but assume it's a systemjs/webpack config issue.

[jelbourn]

Not sure why the <link> isn't working. The prebuilt theme is literally just a CSS files. I'm guessing something in webpack-land inserts itself here. The instruction there had worked until recently when swe started getting a wave of reports of it failing. Ultimately the instruction is "Add this CSS file to your app however your app is set up for CSS files."

As for the quickstart, that would be an issue for https://github.com/angular/angular/.

[RobAltena]

I am having similar problems getting started using Angular Cli and the getting started guide.

Step 3 "Import the component modules" seems to do nothing. I have to resort to:
import { MaterialModule } from '@angular/material';
and adding MaterialModule to the @NgModule imports. (following this tutorial)

Step 4: Adding the Theme. No effect from folllowing the guide. Updating the styles.css as in the blog post works fine. ( I see from @jelbourn s comment there has been a wave of reports on this)

At that point I have a working app with angular materials showing.

However: all test break. Maybe we can add a few lines at the end of the getting started guide to help set up the test environment once material has been included in a project?

I get the same results on my Win 10 and Ubuntu 16.04 machines.

I see the issue was closed while typing. Hopefully these comments help. Please let me know if/how I can help.

[willshowell]

@RobAltena concerning testing, see #4056. Maybe it will help

[angular-automatic-lock-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.}