Angular 6 with Angular Material，sweetalert and webpack

Question

我正在尝试通过matidenav，mat table等使用甜味剂和角质材料（@ angular / material：“ 6.4.7”）。该项目有效，但是在webpack上使用样式和一些功能时，它们已尝试映射到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';

package.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"
  }

---

更新：已修复希望对您有所帮助

---

Answer 1

已解决@ angular /材质未显示在我的styles.css中导入prebuilt-themes / indigo-pink.css的样式映射的问题

类似的东西：参考：https://stackoverflow.com/a/45589887/12647239但从链接（node_modules / @ angular / material ...）的不同路径获取。

---

固定的Sweetalert：

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;

参考：https://stackoverflow.com/a/50800221/12647239