Как реализовать angular-mdc-web в.NET Core Angular VS2017 Шаблон

Question

Как реализовать angular-mdc-web в.NET Core Angular VS2017 Шаблон

Я пытаюсь заставить angular-mdc-web работать с основным угловым шаблоном vs2017 .net. Пока без удачи.

эффект пульсации кнопок странный
при нажатии на кнопку кнопка становится полностью белой
при определении размера хрома размер щелчка не изменяется вместе с ним

Пожалуйста, ознакомьтесь с Demo-Gif: Demo Gif

РЕДАКТИРОВАТЬ 12.04.2018

Все работает сейчас, благодаря Trimox! Вы можете клонировать / скачать решение с https://github.com/lod911/vs2017-Angluar-Template-with-mdc-web

В соответствии со следующим руководством по началу работы: Angular MDC - Начало работы

Я знаю, что следующие шаги уничтожают вещи начальной загрузки. Но я просто хочу, чтобы кнопка работала.

Вопрос заключается в следующем: как заставить angular-mdc-web работать с Angular-Template vs2017? Спасибо за вашу помощь!

Вот как я это сделал: VS2017 Community Edition 15.6.4

Файл меню \ Новый \ Проект...
Базовое веб-приложение ASP.NET
Выберите Угловой
Отредактируйте package.json (готов для angular5 с vs2017, без начальной загрузки)

{
  "name": "WebApplication2",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js",
    "build:vd": "webpack --config webpack.config.vendor.js",
    "build:cl": "webpack --config webpack.config.js",
    "build:dev": "webpack --progress --color",
    "build:aot": "webpack --env.aot --env.client & webpack --env.aot --env.server"
  },
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/compiler-cli": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@angular-mdc/web": "^0.34.1",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "isomorphic-fetch": "2.2.1",
    "jquery": "^3.3.1",
    "preboot": "6.0.0-beta.3",
    "reflect-metadata": "0.1.12",
    "rxjs": "^5.5.8",
    "zone.js": "^0.8.21"
  },
  "devDependencies": {
    "@ngtools/webpack": "^1.10.2",
    "@types/chai": "^4.1.2",
    "@types/jasmine": "^2.8.6",
    "@types/webpack-env": "~1.13.5",
    "angular2-router-loader": "0.3.5",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.3",
    "awesome-typescript-loader": "4.0.1",
    "chai": "^4.1.2",
    "clean-webpack-plugin": "^0.1.19",
    "css": "^2.2.1",
    "css-loader": "0.28.11",
    "expose-loader": "0.7.5",
    "extract-loader": "^2.0.1",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "html-loader": "0.5.5",
    "jasmine-core": "^3.1.0",
    "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",
    "loader-utils": "^1.1.0",
    "node-sass": "^4.8.3",
    "raw-loader": "0.5.1",
    "sass-loader": "^6.0.7",
    "style-loader": "0.20.3",
    "to-string-loader": "1.1.5",
    "typescript": "2.7.2",
    "url-loader": "1.0.1",
    "webpack": "^3.10.0",
    "webpack-hot-middleware": "^2.21.2",
    "webpack-merge": "^4.1.2"
  }
}

Отредактируйте webpack.config.vendor.js

...
const nonTreeShakableModules = [
    '@angular-mdc/web',                         // add this line
//    'bootstrap',                              // remove this line
//    'bootstrap/dist/css/bootstrap.css',       // remove this line
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
...

а также

...
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 CleanWebpackPlugin([path.join(__dirname, 'ClientApp', 'dist'), path.join(__dirname, 'wwwroot', 'dist')]), // add this line
        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')), // deactivate this line
        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './ClientApp')), // add this line
        new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
    ]
};
...

Отредактируйте webpack.config.js

...
const merge = require('webpack-merge');
// const AotPlugin = require('@ngtools/webpack').AotPlugin; // remove this line
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin; // add this line
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
...

а также

...
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] },
                // add scss loader
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: 'bundle.css',
                            },
                        },
                        { loader: 'extract-loader' },
                        { loader: 'css-loader' },
                        { loader: 'sass-loader' },
                    ]
                },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };
...

а также

...
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AngularCompilerPlugin({                                     // replace AotPlugin with AngularCompilerPlugin
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.browser.module#AppModule'),
                exclude: ['./**/*.server.ts']
            })
...

а также

...
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AngularCompilerPlugin({                                     // replace AotPlugin with AngularCompilerPlugin
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.server.module#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
...

Отредактируйте tsconfig.json для машинописного текста >=2.7.2

...

    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false, // add this line
    "skipDefaultLibCheck": true,
...

Создайте ClientApp\styles.scss с этой строкой

@import "~@angular-mdc/theme";      // Add this line

Отредактируйте ClientApp/boot.browser.ts

...
import 'reflect-metadata';
import 'zone.js';
//import 'bootstrap';   // deactivate this line
import './styles.scss'; // add this line
...

Отредактируйте ClientApp/boot.server.ts

...
return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
    const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
    const state = moduleRef.injector.get(PlatformState);
    //const zone = moduleRef.injector.get(NgZone);              // deactivated this line
    const zone: NgZone = moduleRef.injector.get(NgZone);        // add this line

    return new Promise<RenderResult>((resolve, reject) => {

...

Создать ClientApp\app\app.module.mdc.ts

import { NgModule } from '@angular/core';
import {
  MdcAppBarModule,
  MdcButtonModule,
  MdcCardModule,
  MdcCheckboxModule,
  MdcChipsModule,
  MdcDialogModule,
  MdcDrawerModule,
  MdcElevationModule,
  MdcFabModule,
  MdcFormFieldModule,
  MdcGridListModule,
  MdcIconModule,
  MdcIconToggleModule,
  MdcLinearProgressModule,
  MdcListModule,
  MdcMenuModule,
  MdcRadioModule,
  MdcRippleModule,
  MdcSelectModule,
  MdcSliderModule,
  MdcSnackbarModule,
  MdcSwitchModule,
  MdcTabModule,
  MdcTextFieldModule,
  MdcThemeModule,
  MdcToolbarModule,
  MdcTypographyModule,
} from '@angular-mdc/web';

@NgModule({
  exports: [
    MdcAppBarModule,
    MdcButtonModule,
    MdcCardModule,
    MdcCheckboxModule,
    MdcChipsModule,
    MdcDialogModule,
    MdcDrawerModule,
    MdcElevationModule,
    MdcFabModule,
    MdcFormFieldModule,
    MdcGridListModule,
    MdcIconModule,
    MdcIconToggleModule,
    MdcLinearProgressModule,
    MdcListModule,
    MdcMenuModule,
    MdcRadioModule,
    MdcRippleModule,
    MdcSelectModule,
    MdcSliderModule,
    MdcSnackbarModule,
    MdcSwitchModule,
    MdcTabModule,
    MdcTextFieldModule,
    MdcThemeModule,
    MdcToolbarModule,
    MdcTypographyModule,
  ]
})
export class MdcMaterialModule { }

Отредактируйте app.shared.module.ts

...
import { RouterModule } from '@angular/router';

import { MdcMaterialModule } from './app.module.mdc'; // Add this line

import { AppComponent } from './components/app/app.component';
...

и импортировать его:

...
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        MdcMaterialModule, // Add this line
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
...

Отредактируйте ClientApp\app\components\app\app.component.html

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
    <!--Add this <a> Tag part-->
    <a mdc-button [primary]="true" [raised]="true">
        <i class="material-icons mdc-button__icon">add box</i>
        mdc Button
    </a>
    <!-- until here -->
</div>

Очистить / Очистить / Удалить все содержимое в ClientApp\app\components\navmenu\navmenu.component.html Это вызывает сбой кнопок при изменении размера окна браузера.
Изменить представления \Shared\_Layout.cshtml

...
    <base href="~/" />

    <!-- add this 2 lines -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- deactivated this line -->
    @*<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />*@

    <!-- add this line -->
    <link rel="stylesheet" href="~/dist/bundle.css" asp-append-version="true" />
...

Изменить представления \ Домой \Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<!-- deactivate this lines -->

@*<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    @section scripts {
        <script src="~/dist/main-client.js" asp-append-version="true"></script>
    }*@

<!-- add this lines -->

<app>Loading...</app>

@section scripts {
    <script src="~/dist/vendor.js" asp-append-version="true"></script>
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

Сохраните все файлы и закройте VS2017
Откройте командную строку Node.js и перейдите в каталог проекта (где находится package.json)
rmdir / S node_modules (повторять, пока все не будет удалено)
установка npm
npm запустить сборку: vd
npm run build: dev
Откройте VS2017 и проект
Дождитесь окончания восстановления npm (выберите выход npm)
Запустите решение (F5) и нажмите кнопку

0

angular asp.net-core visual-studio-2017 asp.net-core-2.0 mdc-components

Источник

user9614257 08 апр '18 в 17:45

1 ответ

Решение

Другие вопросы по тегам angular asp.net-core visual-studio-2017 asp.net-core-2.0 mdc-components

user8312484 09 апр '18 в 03:06 2018-04-09 03:06 · Accepted Answer · 2018-04-09 03:06

Пара вариантов для решения проблемы непрозрачности ряби. Понизьте node-sass до 4.7.2 или обновите angular-mdc/web до последней версии 0.34.1.

Проблема была связана с переменными в миксинах пульсации, которые не интерполируются должным образом.

Надеюсь это поможет.