0

Tengo angular 12 y Webpack 5.

Apenas estoy integrando webpack en la aplicación, al parecer ya carga las vistas, sin embargo, cargan sin estilos.

Este es mi código en webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {TsconfigPathsPlugin} = require("tsconfig-paths-webpack-plugin"); // used for paths in ts config
const {AngularWebpackPlugin} = require('@ngtools/webpack');
const CopyPlugin = require("copy-webpack-plugin");

/* const root = path.join.bind(path, path.resolve(__dirname, '..'));
console.log(root('src', 'style.scss'));*/

module.exports = {
  entry: {
    polyfills: "./src/polyfills.ts",
    main: "./src/main.ts"
  },
  resolve: {
    extensions: ['.js', '.ts'],
    plugins: [
      new TsconfigPathsPlugin({})
    ]
  },
  devtool: "source-map",
  devServer: {
    port: 4200,
    historyApiFallback: true
  },
  output: {
    path: path.resolve(__dirname, 'dist'), // output directory
    filename: "[name].js" // name of the generated bundle
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        /*loader: "ts-loader",*/
        use: [
          {
            loader: "ts-loader",
          },
          {
            loader: 'angular2-template-loader'
          } // to load component.html
        ],
        exclude: /\.(spec|e2e).ts$/,
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          esModule: false,
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["to-string-loader", "css-loader"]
      },
      {
        test: /\.scss$/,
        use: [
          "to-string-loader",
          "css-loader",
          "sass-loader"
        ],
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      favicon: './src/favicon.ico',
      inject: "body",
      scriptLoading: "blocking"
    }),
    new CopyPlugin({
      patterns: [
        {from: 'src/assets/i18n', to: 'assets/i18n'},
        /*{ from: 'src/assets', to: 'assets' }*/
      ]
    })
    /*,
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.json',
    })*/ // to load component.html
  ]
};

Con la configuración normal de Angular solamente era agregar los estilos en angular.json

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "./node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.scss"
    ]

En la consola me sale este error core.js:125 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

1
  • ¿Porqué estas integrando webpack? el 14 nov. 2022 a las 21:13

1 respuesta 1

0

Hola que tal te recomiendo utilizar un Schematic

ng add @angular/material

para que el cli de angular se encargue de hacer las configuraciones, aqui mismo puede elegir el tema de su preferencia!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.