无法使用angular 5模板在asp.net core 2.0中找到Angular Material核心主题

时间：2018-02-11 01:22:35

标签： asp.net angular typescript angular-material material-design-lite

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 {
}

遵循指令表格https://getmdl.io/started/index.html

https://material.angular.io/

尝试了此链接中的解决方案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

但仍然无法解决问题。输入框和其他设计不起作用。

继续收错无法找到Angular Material核心主题。大多数材料组件可能无法按预期工作。有关详细信息，请参阅主题指南：https://material.angular.io/guide/theming

尝试从过去的一天解决这个问题，但没有运气。任何人都可以让我知道我在哪里，做错了。

3 个答案:

答案 0 :(得分：0)

问题是webpack不是referesh。因此，使用node.js命令或cmd运行以下命令。

webpack --config webpack.config.vendor.js

Visual Studio不会刷新在开发环境中运行项目的命令。但它会在生产环境中运行。

如果未安装webpack，请使用以下命令全局安装，您可以运行上述命令。

npm install -g webpack

这解决了我的问题。

答案 1 :(得分：0)

在 ASP.net Core 2.0 中使用最新版本的 Angular Material 对于解决程序包依赖性来说更加困难和耗时。

在package.json

中使用以下版本的角度材质
  

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

     

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

然后运行以下命令来安装它。

  

npm install --save

答案 2 :(得分：0)

看来角cdk和材料已正确安装。否则，您将收到关于此的错误。

但是，通过编辑angular.json并将node_modules/@angular/material/prebuilt-themes/indigo-pink.css添加到projects->[project name]->architect->build->styles下的src/styles.css部分中，确保也加载了材质css。

我已经使用ASP.Net Core 3和Angular 8.2对此进行了测试。

相关问题
最新问题