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