1

I surrender...

All I'm trying to do is put together a step-by-step walkthrough for my company, of how to generate a new Angular 4 project and add Angular Materials to it... and I can't do it.

I've watched PluralSight videos, read the instructions, Googled like hell, but I just get tied up by the dependencies which, eventually, just leave me with a project which won't run.

Here's how far I've got...

I've created a new Angular project based on the example on Angular's website:

git clone https://github.com/angular/quickstart AngularDemo
cd AngularDemo
npm install 

I modified the app.module.ts file, to allow us to use ngModel (Seriously?! This wasn't included by default ?!)

import { AppComponent }  from './app.component';
import { FormsModule } from '@angular/forms';   //  We want to use ngModel !

@NgModule({
  imports:      [ BrowserModule, FormsModule ],

Okay, all good so far.
The app runs fine.

Now, I want to include Angular Materials. I use the command as described on their website:

npm install @angular/material @angular/animations --save

The following screenshot shows the issues from there...

enter image description here

As you can see, Materials has a dependency on @angular/[email protected]

I thought I would be able to add this to my project (with the --save parameter) but this isn't allowed.

I thought I would be able to add this globally (with the -g parameter) but this also isn't allowed.

So, okay, I'll just add it normally:

npm install @angular/[email protected] 

Why would I get an error (see number "3" above), complaining that @angular/[email protected] has an unmet dependency on, errr, @angular/[email protected] ?!

I also see that @angular/[email protected] reports that I must have @angular/[email protected] installed (see number 4 in the screenshot above), so, okay, let's do that...

npm install @angular/[email protected] 

At which point, things get even messier...

enter image description here

So, my @angular/[email protected] is somehow invalid, and @angular/[email protected] requires @angular/[email protected]... But... but... I had installed this...

It's at this point that I start Googling like hell, finding StackOverflow suggestions which, although they're just 5-6 months old, are now out-of-date, and pulling my hair out.

If I try to use npm start to see what start the project is now in, I get a load of errors...

enter image description here

Actually, if I try npm install @angular/[email protected] --save this does seem to work and modify my package.json file:

"dependencies": {
    "@angular/animations": "^4.2.3",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "^4.2.3",

Yet I still see errors about unmet dependencies on @angular/[email protected].

I should say, I followed tips from StackOverflow, tried updating the typescript, installing Jasmine and Hammer, and including these in my app.module.ts file..

npm install [email protected] --save 
npm install --save-dev @types/jasmine
npm install hammerjs 
npm install @types/hammerjs --save-dev

... plus I made sure that my systemjs.config.js file contained the paths of the relevant libraries (why isn't this done automatically ?!)..

  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',  

... but.... bottom line... I surrender.

For every error I manage to get rid of, another 5 appear in it's place.

What are the steps I need to take to add Angular Materials to the default startup project from the Angular website..?

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

Thanks for reading...

This stuff is absolutely baffling, it doesn't quite "feel ready yet" and I've wasted a huge number of hours getting nowhere. I miss the simplicity of Angular 1... ;-)

6
  • 3
    I may not provide you a solution, but how about you'd try Angular CLI instead of Quickstart? I has much easier setup and it's ready instantly. I implemented my Angular Material with CLI using command npm install --save @angular/material then in .angular-cli.json file in styles array I added following line: "../node_modules/@angular/material/prebuilt-themes/indigo-pi‌​nk.css" after styles.css.
    – Haseoh
    Commented Jun 19, 2017 at 8:02
  • 1
    You should use npm cli instead of cloning quickstart, mainly because of webpack that will greatly help you during dev phase. Als, this seems to fail because your project needs angular 4.2.3 and angular material needs 4.0.3. In my opinion, you should start again with angular-cli with this document as guide: material.angular.io/guide/getting-started angular-cli is really more simple.
    – Supamiu
    Commented Jun 19, 2017 at 8:03
  • @Supamiu: Actually, this isn't true. The QuickStart comes with Angular Core 4.0.0 and works fine, but Angular Materials requires "@angular/animations" and that requires Angular Core 4.2.3 (as my 1st screenshot shows). I'll give Angular CLI a go, but, seriously, it's bizarre to be told not to use the QuickStart provided by Angular themselves... My head hurts !! Thanks for the tips though. Commented Jun 19, 2017 at 8:12
  • @MikeGledhill Are you sure Angular themselves recommend Quickstar? I just checked their website and they use Angular CLI now: angular.io/guide/quickstart
    – Haseoh
    Commented Jun 19, 2017 at 8:16
  • Yup, fair point... I actually took this advice from a John Papa PluralSight video. Will follow the Angular CLI tutorial, and see how I get on. Thanks !! app.pluralsight.com/library/courses/… Commented Jun 19, 2017 at 8:19

1 Answer 1

1

Just to confirm my findings (and save any other Angular victims from the problems I've seen)...

Do not use the following command, as a starting point for your Angular applications.

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

Some of Angular's own tutorial pages do still suggest that this is a valid starting point... it's not !!

enter image description here

If you use the npm install method, then adding Angular Materials is really straightforward.

There is just one problem with the Angular Materials tutorial though:

In "Step 4: Include a theme", it tells you:

To get started with a prebuilt theme, include the following in your app's index.html:

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

This doesn't work.

On my Windows 7 laptop, it just repeatedly told me that it couldn't find this .css file, even if I copied it into the same folder as my index.html, and tried to include it from there.

Instead, you must add this line to your styles.css file:

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

(Sigh.)

I picked the wrong week to give up beer...

(A little while later...)

I just noticed that my dumb tutorial app now works fine with Angular Materials on Chrome, but quietly throws an exception in IE11.

enter image description here

Thankfully, this one's simple to fix with a little Googling. You just need to open polyfills.ts and uncomment a few lines:

enter image description here

But once again, this is an issue which will prevent all IE11 users from being able to use Angular Materials... why isn't this mentioned in their Getting Started tutorial ?!

I picked the wrong week to give up glue-sniffing...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.