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? Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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