Угловой материал по какой-то причине не подходит - PullRequest
Новая
       2

Угловой материал по какой-то причине не подходит

0 голосов
/ 04 ноября 2018

Я добавил угловой материал в свое приложение MVC. Когда я загружаю страницу, я не вижу ошибок, но по какой-то причине тоже не стилизуюсь. Я добавил необходимые зависимости в мой файл package.json, добавил ссылку на тему css в моем Layout.cshtml, добавил необходимое отображение в systems.config.js. Создан отдельный материал .module.ts со всеми материальными модулями. Ссылка на это из app.module.ts. Импортировано css из моего файла site.css. Добавлен материал, но все равно я не вижу стиля. Чего мне не хватает?

Вот мой файл package.json 

"dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "~5.0.2",
    "@angular/compiler": "~5.0.2",
    "@angular/core": "~5.0.2",
    "@angular/forms": "~5.0.2",
    "@angular/http": "~5.0.2",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "~5.0.2",
    "@angular/platform-browser-dynamic": "~5.0.2",
    "@angular/router": "~5.0.2",
    "angular-in-memory-web-api": "~0.3.0",
    "angular-material": "^1.1.10",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "systemjs": "0.19.40",
    "typescript": "^3.1.6",
    "typings": "^2.1.1",
    "zone.js": "^0.8.4"
  }

Layout.cshtml имеет ссылку на 

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

systems.config.js 

 map: {
            // our app is within the app folder
            'app': 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
            'tslib': 'npm:tslib/tslib.js',

            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

            '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js',
            '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
            '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
            '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
            '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
            '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
            '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
            '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
            '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
            '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
            '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
            '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',

            '@angular/cdk/accordion': 'npm:@angular/cdk/bundles/cdk-accordion.umd.js',
            '@angular/cdk/layout': 'npm:@angular/cdk/bundles/cdk-layout.umd.js',
            '@angular/cdk/stepper': 'npm:@angular/cdk/bundles/cdk-stepper.umd.js',    

            'hammerjs': 'npm:hammerjs',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'

вот мой материал.модуль.ts 

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { A11yModule } from '@angular/cdk/a11y';
import { BidiModule } from '@angular/cdk/bidi';
import { ObserversModule } from '@angular/cdk/observers';
import { OverlayModule } from '@angular/cdk/overlay';
import { PlatformModule } from '@angular/cdk/platform';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';

import {
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatFormFieldModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatStepperModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule
  ],
  exports: [
      MatAutocompleteModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatFormFieldModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatStepperModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule
  ]
})
export class MaterialModule {}

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CommunityListComponent } from "./community/community-list.component";
import { CommunityService } from "./community/community.service";
import { CommunityTypeService } from "./communityType/communityType.service";
import { CommunityDetailComponent } from "./community/community-detail.component";
import { LocationService } from "./location/location.service";

@NgModule({
    imports: [BrowserModule, AppRoutingModule, HttpModule, FormsModule, MaterialModule, BrowserAnimationsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: []
})
export class AppModule { }

и site.css имеет ссылку на тему 

@import '/node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css';

Это содержимое моей страницы. 

<mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>
                This is the expansion title
            </mat-panel-title>
            <mat-panel-description>
                This is a summary of the content
            </mat-panel-description>
        </mat-expansion-panel-header>

        <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>

    <span class="done">
        <button mat-fab>
            <mat-icon>check circle</mat-icon>
        </button>
    </span>

что мне не хватает?

1 Ответ

0 голосов
/ 22 марта 2019

Из документов :

Если вы используете Angular CLI, это так же просто, как включение одной строки в ваш файл styles.css:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Кроме того, вы можете просто обратиться к файлу напрямую. Это будет выглядеть примерно так:

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Фактический путь будет зависеть от настроек вашего сервера.

Наконец, если содержимое вашего приложения не размещено внутри элемента mat-sidenav-container, вам нужно добавить класс mat-app-background в ваш элемент-обертку ( например тело). Это гарантирует, что правильный фон темы будет применен к вашей странице.

Поэтому убедитесь, что вы правильно импортируете таблицу стилей темы, а также поместите класс mat-app-background в свой элемент-оболочку (тело или другое).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...