Ensure your package.json dependencies are up to date:
-update all Angular dependencies to version 9
-include these additional dependencies:
"@angular-devkit/build-angular": "^0.900.4",
"@angular-builders/custom-webpack": "^9.0.0",
"raw-loader": "^4.0.0",
"sass-loader": "^8.0.2",
"ts-loader": "^6.2.1",
"typescript": "~3.7.5",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"angular2-template-loader": "^0.6.2",
"css-loader": "^3.4.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"to-string-loader": "^1.1.6"
2. Develop a webpack.config.js file (example provided)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path');
const isDevelopment = process.env.WEBPACK_MODE !== 'production'
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
resolve:{
extensions: ['.ts','.js','.scss']
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.scss$/,
exclude: [/node_modules/, /\.global\.scss$/],
use: ["to-string-loader", "css-loader", "sass-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'}),
new MiniCssExtractPlugin({
filename: isDevelopment ? '[name].css' : '[name].[hash].css',
chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
})
]
}
Modify the build script in your package JSON to utilize webpack e.g.
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode development",
"build_prod": "webpack --mode production",
"watch": "webpack-dev-server --hot --inline --progress --colors --watch-poll"
Update your angular.json (if using angular-cli, migrate first)
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js",
"replaceDuplicatePlugins": true
}
},
Include polyfills in main.ts