在带有 angular 5 模板的 asp.net core 2.0 中找不到 Angular Material 核心主题

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 themehttp://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.

Answer 1

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.

Answer 2

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

Answer 3

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.