Атрибуты материала 2 в Angular 4 не работают с веб-пакетом, ASP.NET

Question

Атрибуты материала 2 в Angular 4 не работают с веб-пакетом, ASP.NET

Я пытаюсь заставить материал 2 работать с Angular 4.4.6 с помощью веб-пакета в веб-приложении ASP.NET Core 2. Я не получаю ошибок, но в настоящее время у меня нет стиля, и атрибут mat-button не влияет на выходной DOM.

Я сделал следующее:

Среда выглядит следующим образом:
- Visual Studio (Professional) 2017 версия 15.4.0
- Веб-приложение ASP.NET Core 2 с Angular, из шаблона VS

Обновите пакеты @angular до ^4.4.6 в NPM и восстановите пакеты

"@angular/animations": "^4.4.6",
"@angular/common": "^4.4.6",
"@angular/compiler": "^4.4.6",
"@angular/compiler-cli": "^4.4.6",
"@angular/core": "^4.4.6",
"@angular/forms": "^4.4.6",
"@angular/http": "^4.4.6",
"@angular/platform-browser": "^4.4.6",
"@angular/platform-browser-dynamic": "^4.4.6",
"@angular/platform-server": "^4.4.6",
"@angular/router": "^4.4.6",

В соответствии с руководством по материалам выполните следующую команду в каталоге проекта:
```
npm install --save @angular/material @angular/cdk
```
Обновите webpack.config.vendor.js, чтобы добавить следующие строки в массив treeShakableModules сразу после "@ angular / router":
```
'@angular/material',
'@angular/material/prebuilt-themes/deeppurple-amber.css',
```

В app.module.browser.ts импортируйте модуль:

import { MatButtonModule } from '@angular/material';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
      BrowserModule,
      MatButtonModule,
        AppModuleShared
    ],
    providers: [
        { provide: 'BASE_URL', useFactory: getBaseUrl }
    ]
})

В home.component.html добавьте следующую строку в конец файла:
```
<button mat-raised-button>This is a button</button>
```
Из каталога проекта запустите webpack, чтобы обновить файлы вендора:
```
webpack --config webpack.config.vendor.js
```
Создайте и запустите приложение
Заметьте, что кнопка домашней страницы не стилизована. В консоли нет ошибок, указывающих на отсутствующие стили или недопустимые атрибуты.

У меня есть следующая конфигурация:

Угловой 4.4.6
Материал 2.0.0-бета.12
Windows 10 Professional
TypeScript 2.4.1 (NPM)
Версия Chrome 61.0.3163.100 (официальная сборка) (64-разрядная версия)

Проверенные стили существуют, так как указание class="mat-поднял-button" на кнопке имеет эффект (хотя это не похоже на поднятую кнопку), это действительно изменяет внутренний стиль кнопки.

Я отмечаю, что атрибут не оказывает никакого влияния на стилизацию или содержимое выходного HTML (в отличие от того, что я вижу при проверке элементов на веб-сайте руководства), что позволяет предположить,что что- то пошло не так с настройкой модуля, но Я не могу на всю жизнь понять, что это может быть.

РЕДАКТИРОВАТЬ: По запросу, вот webpack.config.vendor.js до шаблона:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
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 = [
    '@angular/cdk',
    '@angular/material',
    '@angular/material/button',
    '@angular/material/prebuilt-themes/deeppurple-amber.css',
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
]; 

const allModules = treeShakableModules.concat(nonTreeShakableModules);

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        output: {
            publicPath: 'dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), //     Maps these identifiers to the jQuery package (because Bootstrap expects it to be     a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,     path.join(__dirname, './ClientApp')), // Workaround for     https://github.com/angular/angular/issues/11580
            new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,     path.join(__dirname, './ClientApp')), // Workaround for     https://github.com/angular/angular/issues/14898
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for     https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

... boilerplate follows this ...

1

asp.net angular webpack material

Источник

user7537680 24 окт '17 в 17:36

2 ответа

Другие вопросы по тегам asp.net angular webpack material

user7537680 25 окт '17 в 14:37 2017-10-25 14:37 · Answer 1 · 2017-10-25 14:37

В некоторой степени нелогично, решение требует, чтобы импорт модуля выполнялся в app.module.shared.ts, а не в app.module.browser.ts. Если вы используете шаблон Angular по умолчанию, выполните те же действия, что и выше, за исключением шага 5, выполните следующие действия:

Отредактируйте app.module.shared.ts, чтобы добавить модуль MatButtonModule в качестве импорта, следующим образом:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        MatButtonModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

Обратите внимание, что нет необходимости добавлять @angular/cdk или @angular/material/button в список модулей в webpack.config.vendor.js. Достаточно добавить те, которые описаны в руководстве.

Смотрите: https://github.com/angular/material2/issues/7997

user940416 24 окт '17 в 18:47 2017-10-24 18:47 · Answer 2 · 2017-10-24 18:47

Согласно официальным документам, здесь вы должны импортировать их в свой файл глобального стиля, это так же просто, как включить одну строку в ваш файл. styles.css файл:

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

Или же вы можете просто ссылаться на файл напрямую. Доступные готовые темы:

DeepPurple-amber.css
индиго-pink.css
розово-bluegrey.css
пурпурно-green.css