Я пытаюсь использовать подсластитель и материал angular (@ angular / material: "6.4.7"), используя mat sidenav, mat table, et c. Проект работает, но при использовании в веб-пакете стиль и немного функциональности не работают, попытались отобразить на vendor.ts и даже на запись в webpack.config. js. но ничего не исправить.
webpack.config. js
var webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
mode: 'none',
devtool: 'inline-source-map',
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'mainApp': ['./src/main.ts', './src/styles.css','./src/app/app.module.ts']
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: "mainApp",
filename: 'index.html',
template: 'src/index.html',
chunks: ['polyfills', 'vendor', 'mainApp']
}),
new ManifestPlugin(),
new CopyWebpackPlugin([
{ from: './src/assets', to: 'assets' }
])
],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss', '.html'],
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ['ts-loader', 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: /node_modules/
},
{
test: /\.html$/,
loaders: ['html-loader']
},
{
test: /\.(woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(s*)css$/,
use: ['to-string-loader','style-loader','css-loader','sass-loader']
}
]
},
devServer: {
port: 4200
}
}
vendor.ts
import '@angular/material';
import '@angular/animations';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
import '@angular/cdk';
import '@angular/forms';
import 'rxjs';
import 'sweetalert';
зависимости в пакете. json
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/cdk": "6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/preset-env": "^7.7.7",
"@babel/preset-typescript": "^7.7.7",
"angular-oauth2-oidc": "^4.0.3",
"core-js": "^2.6.11",
"hammerjs": "^2.0.8",
"ngx-webstorage-service": "^4.1.0",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
"sweetalert": "^2.1.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular-devkit/build-optimizer": "0.0.38",
"@angular/cli": "~6.1.2",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@angular/material": "^6.4.7",
"@angularclass/hmr-loader": "^3.0.4",
"@types/core-js": "^2.5.2",
"@types/jasmine": "^2.8.16",
"@types/jasminewd2": "^2.0.8",
"@types/node": "~8.9.4",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.1.2",
"clean-webpack-plugin": "^0.1.19",
"codelyzer": "~4.2.1",
"compression-webpack-plugin": "0.4.0",
"copy-webpack-plugin": "4.6.0",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.2.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.6",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"mini-css-extract-plugin": "^0.9.0",
"ngc-webpack": "1.1.0",
"node-sass": "^4.13.0",
"protractor": "~5.3.0",
"sass-loader": "^8.0.0",
"style-loader": "0.23.1",
"to-string-loader": "^1.1.6",
"ts-loader": "^6.2.1",
"ts-node": "^7.0.1",
"tslint": "~5.9.1",
"typescript": "^3.7.3",
"uglifyjs-webpack-plugin": "1.2.4",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-manifest-plugin": "^2.2.0",
"webpack-merge": "^4.2.2"
}
Обновление: ИСПРАВЛЕНО Надеюсь, это поможет