Could not find Angular Material core theme in asp.net core 2.0 with angular 5 template

Question

Webpack.config.vendor.js

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    '@angular/material',
    '@angular/material/prebuilt-themes/indigo-pink.css',
    '@angular/cdk',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];

Package.json

{
  "name": "VotingWebsite",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "devDependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/cli": "^1.6.6",
    "@angular/common": "5.2.2",
    "@angular/compiler": "5.2.2",
    "@angular/compiler-cli": "5.2.2",
    "@angular/core": "5.2.2",
    "@angular/forms": "5.2.2",
    "@angular/http": "5.2.2",
    "@angular/platform-browser": "5.2.2",
    "@angular/platform-browser-dynamic": "5.2.2",
    "@angular/platform-server": "5.2.2",
    "@angular/router": "5.2.2",
    "@ngtools/webpack": "1.9.6",
    "@types/chai": "4.1.2",
    "@types/jasmine": "2.8.5",
    "@types/webpack-env": "1.13.3",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "awesome-typescript-loader": "3.4.1",
    "bootstrap": "3.3.7",
    "chai": "4.1.2",
    "css": "2.2.1",
    "css-loader": "0.28.9",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "isomorphic-fetch": "2.2.1",
    "jasmine-core": "2.9.1",
    "jquery": "3.3.1",
    "json-loader": "0.5.7",
    "karma": "2.0.0",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "2.0.9",
    "preboot": "6.0.0-beta.1",
    "raw-loader": "0.5.1",
    "reflect-metadata": "0.1.12",
    "rxjs": "5.5.6",
    "style-loader": "0.19.1",
    "to-string-loader": "1.1.5",
    "typescript": "2.6.2",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-hot-middleware": "2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "0.8.20"
  },
  "dependencies": {
    "@angular/cdk": "^5.2.0",
    "@angular/material": "^5.2.0",
    "angular-polyfills": "^1.0.1",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "web-animations-js": "^2.3.1"
  }
}

Vendor.css

@import '~https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'

Component.html

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

</div>

app.share.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import 'hammerjs';
import 'angular-polyfills';
import 'web-animations-js';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatFormFieldModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
    declarations: [
        AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
        HomeComponent, NavMenuComponent,
        LoginComponent,
        MobileComponent,
        SocialComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'mobile', component: MobileComponent },
            { path: 'dashboard', component: DashBoardComponent },
            { path: 'signup', component: RegisterComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        BrowserModule,
        BrowserAnimationsModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ],
    exports: [
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ]
})
export class AppModuleShared {
}

Followed the instruction form https://getmdl.io/started/index.html

https://material.angular.io/

Tried the solution from this link Angular material Could not find Angular Material core theme Could not find Angular Material core theme http://www.mithunvp.com/angular-material-2-angular-cli-webpack/ https://www.codeproject.com/Tips/1189201/Adding-Angular-Material-in-ASP-NET-Core-Angular-SP

But still not able to resolve the issue. The input box and other design are not working.

Keep getting the error as Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

Trying to solve this issue from past 1 day but no luck. Can anyone please let me know where I, am doing wrong.

So have you tried using material.angular.io/guide/theming ? It says that you should add some of the prebuild theme or configure it yourself in your root scss file — VagrantAI
– VagrantAI, Commented Feb 13, 2018 at 16:40

San Jaisy · Accepted Answer · 2018-02-13 23:50:54Z

0

The problem is that webpack was not referesh. So use the node.js command or cmd to run the below command.

webpack --config webpack.config.vendor.js

Visual studio doesn't refresh the command on running the project on development environment. However it runs on the production environment.

If the webpack is not install use the command below to install globally and you can run the above command.

npm install -g webpack

This solve my issue.

answered Feb 13, 2018 at 23:50

San Jaisy

17.4k44 gold badges206 silver badges359 bronze badges

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

Comments

Rahul Uttarkar · Accepted Answer · 2018-03-23 10:29:37Z

0

Using latest version of Angular Material in ASP.net Core 2.0 is more difficult and time consuming for resolving package dependencies.

Use below version of angular material in package.json

"@angular/cdk": "^2.0.0-beta.12"

"@angular/material": "^2.0.0-beta.12"

followed by run below command to install it.

npm install --save

answered Mar 23, 2018 at 10:29

Rahul Uttarkar

3,6853 gold badges39 silver badges40 bronze badges

Comments

Pirate · Accepted Answer · 2020-12-07 17:04:03Z

0

It looks like the angular cdk and material are installed correctly. Otherwise you will get an error about that instead.

However, make sure that the material css is also loaded by editing angular.json and adding node_modules/@angular/material/prebuilt-themes/indigo-pink.css to the section projects->[project name]->architect->build->styles below src/styles.css

I've tested this with ASP.Net Core 3 and Angular 8.2.

edited Dec 7, 2020 at 17:04

Pirate

1,1851 gold badge10 silver badges21 bronze badges

answered Dec 7, 2020 at 13:07

kjz99

714 bronze badges

Collectives™ on Stack Overflow

Could not find Angular Material core theme in asp.net core 2.0 with angular 5 template

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related