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...
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...
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...
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... ;-)
npm install --save @angular/material
then in.angular-cli.json
file instyles
array I added following line:"../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
afterstyles.css
.