Angular Material: Installing with NPM

Thomas Burleson
InstructorThomas Burleson

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

Learn how to install Angular Material with npm install and load the required libraries and stylesheets into your blank web page.

This course has been created by Thomas Burleson and Aaron Frost

[00:00] Let's use angular material with Angular 1 to build this starter app. We're going to start with an empty project. We're going to go ahead and install the libraries we need using npm. Let's start by saying npm install angular. We're also going to install angular material.

[00:17] We use --save to get to the save at our package.json. Once those are done installing, let's go ahead and add them to our page. We'll start by adding a link to the CSS for angular material up in the head. Later on, at the bottom of the body, we'll add the script text to our libraries.

[00:36] We'll start by adding the tag for angular, as it's our first library. We're going to add the tags for the two libraries. The angular material depends on the first one is ngAnimate for animations. The second one is ngAria for accessibility support. The last one will be angular material itself.

[00:58] Now that we've got these added, we'll go ahead. On the body, we'll add our ngApp directive. We're going to call our app My App. Let's add one more script tag to set up the dependencies.

[01:18] Here, we're going to declare our app saying angular app module, and we called it My App. We're going to provide an array of modules that our app depends on. The only angular module we depend on is ngMaterial.

[01:32] At this point, our app's declared. We're going to add a run block so that we can see once our app has bootstrapped in angular. Here, we'll just say console at log, "My App is ready." We save this, and over the console, you can see our app is ready.

mark
mark
~ 6 years ago

Getting an error in Angular 1.5 with webpack.

using this: import 'angular-material/angular-material.css';

give the following error: ERROR in ./~/angular-material/angular-material.css Module parse failed: /Users/mark/Documents/my-project/node_modules/angular-material/angular-material.css Unexpected token (7:11) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (7:11)