How to use Angular Material components (specifically the slider) in an ASP.NET Core MVC and Angular project?

Question

I created a brand new ASP.NET Core MVC (Web Application - .NET Core version = 3.1) project with the Angular template:

It comes with some basic pre-defined modules and components:

Out of the box it works fine. As soon as I add an import on any Angular Material module in my "app.module.ts" module, when I try to debug it locally via IIS Express, I immediately get the following error:

I haven't even tried implementing the material component yet, all I did was add the import to my app.module.ts. The only other error I notice is whenever I do an ng serve my Console says: But it still starts up the Angular Server anyway.

I was following the getting started guide when I ran into this issue: https://material.angular.io/guide/getting-started

Here's my app.module.ts (literally no changes from what's auto-generated with the Visual Studio Angular template, other than the import statements):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ]),
    MatSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I really want to start using Angular, but what the heck gives?

Update: Here is my package.json file:

{
  "name": "testangularmaterial",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run TestAngularMaterial:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.12",
    "@angular/cdk": "^10.2.3",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/forms": "8.2.12",
    "@angular/material": "^10.2.3",
    "@angular/platform-browser": "^8.2.12",
    "@angular/platform-browser-dynamic": "8.2.12",
    "@angular/platform-server": "8.2.12",
    "@angular/router": "8.2.12",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^3.3.3",
    "jquery": "3.4.1",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.0",
    "rxjs": "^6.5.3",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.26",
    "@angular/cli": "^8.3.26",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.12",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "3.5.3"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

Also, I noticed in this test project my Angular CLI version was 8.3.26 so I created another brand new test project (ASP.NET Core MVC) with a blank template and manually ran the ng commands to add an Angular project to it. Still running into the same exact issues as above though.

Note it doesn't make sense to VoteDown someone without an explanation why. Not sure why I was with a valid question. — J.D.
– J.D., Commented Sep 30, 2020 at 23:12
@JohnPeters Yes it didn't help, doesn't return any errors, and this is the response: audited 1552 packages in 7.559s 36 packages are looking for funding run npm fund for details found 279 vulnerabilities (270 low, 1 moderate, 8 high) run npm audit fix to fix them, or npm audit for details — J.D.
– J.D., Commented Oct 1, 2020 at 12:48
Odd because the message is saying it can't find the module, this is almost always a missing module in node_modules folder. Are you on Angular 10? Sometimes I delete the json.package.lock file, redo the npm install @angular/material. Then do a "npm ci" . This can get you out of the pacake.lock interfering which it does do. It has a memory. — JWP
– JWP, Commented Oct 1, 2020 at 14:09

meblum · Accepted Answer · 2020-10-01 19:14:13Z

1

It seems that you installed the npm dependencies in the wrong location. By default when opening the terminal in Visual Studio, it opens the terminal in the project root, but our dependencies must be installed in the ClientApp directory. Here is how to do it:

In VS, go to tools > Command Line > Developer command prompt.
Navigate to ClientApp (type cd project-name\ClientApp)
run npm i
run ng add @angular/material

edited Oct 1, 2020 at 19:14

answered Oct 1, 2020 at 15:45

meblum

1,9741 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

J.D. Over a year ago

The issue was definitely a dependency one, so your answer is close enough for me to accept. I don't believe I installed into the wrong location, but for some reason it just didn't install the Angular Material dependencies I needed until I used the --save flag. I had to do an npm i --save for both @angular/material and @angular/cdk.

meblum Over a year ago

That's really interesting! Maybe it wasn't even the --save flag? Did you try first following above instructions but didn't work?

J.D. Over a year ago

I didn't get a chance to see your answer until after I fixed it. I luckily was able to stumble my way to find the --save flag and get it working eventually. But yea it was weird. The more I think about it, I'm not sure how else I could've experienced the issue I had unless I was in the wrong installation location initially, but I can't say for sure one way or the other. It's just odd that ng add and npm install both kept reporting back successes but my package.json file wasn't getting updated until my final attempt with the --save flag.

Collectives™ on Stack Overflow

How to use Angular Material components (specifically the slider) in an ASP.NET Core MVC and Angular project?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related