From acd944d67e3a32a7c425fa6978625610ac07b1f6 Mon Sep 17 00:00:00 2001 From: Jordan Date: Mon, 7 Feb 2022 16:39:48 -0500 Subject: [PATCH] build(angular): update webpack config to support webpack 5 the default in angular 12 --- npm/angular/{browserslist => .browserslist} | 0 .../cypress/plugins/cy-ts-preprocessor.ts | 134 -------------- npm/angular/cypress/plugins/webpack.config.ts | 171 +++++++++--------- npm/angular/package.json | 5 +- npm/angular/tsconfig.spec.json | 3 +- 5 files changed, 89 insertions(+), 224 deletions(-) rename npm/angular/{browserslist => .browserslist} (100%) delete mode 100644 npm/angular/cypress/plugins/cy-ts-preprocessor.ts diff --git a/npm/angular/browserslist b/npm/angular/.browserslist similarity index 100% rename from npm/angular/browserslist rename to npm/angular/.browserslist diff --git a/npm/angular/cypress/plugins/cy-ts-preprocessor.ts b/npm/angular/cypress/plugins/cy-ts-preprocessor.ts deleted file mode 100644 index def0d07f8b57..000000000000 --- a/npm/angular/cypress/plugins/cy-ts-preprocessor.ts +++ /dev/null @@ -1,134 +0,0 @@ -const wp = require('@cypress/webpack-preprocessor') -import root from './helpers' -import * as webpack from 'webpack' -import * as path from 'path' - -const webpackOptions = { - mode: 'development', - devtool: 'inline-source-map', - resolve: { - extensions: ['.ts', '.js'], - modules: [root('src'), 'node_modules'], - }, - module: { - rules: [ - { - enforce: 'pre', - test: /\.js$/, - loader: 'source-map-loader', - }, - { - test: /\.ts$/, - // loaders: ['ts-loader', 'angular2-template-loader'], - use: [ - { - loader: 'ts-loader', - options: { - transpileOnly: true, - }, - }, - { - loader: 'angular2-template-loader', - }, - ], - exclude: [/node_modules/, /test.ts/, /polyfills.ts/], - }, - { - test: /\.(js|ts)$/, - loader: 'istanbul-instrumenter-loader', - options: { esModules: true }, - enforce: 'post', - include: path.join(__dirname, '../..', 'src'), - exclude: [ - /\.(e2e|spec)\.ts$/, - /node_modules/, - /(ngfactory|ngstyle)\.js/, - ], - }, - { - // Mark files inside `@angular/core` as using SystemJS style dynamic imports. - // Removing this will cause deprecation warnings to appear. - test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, - parser: { system: true }, - }, - { - test: /\.css$/, - loader: 'raw-loader', - }, - { - test: /(\.scss|\.sass)$/, - use: ['raw-loader', 'sass-loader'], - }, - { - test: /\.html$/, - loader: 'raw-loader', - exclude: [root('src/index.html')], - }, - { - enforce: 'post', - test: /\.(js|ts)$/, - loader: 'istanbul-instrumenter-loader', - query: { - esModules: true, - }, - include: root('src'), - exclude: [/\.(e2e|spec|cy-spec)\.ts$/, /node_modules/], - }, - { - test: /\.(jpe?g|png|gif)$/i, - loader: 'file-loader?name=assets/images/[name].[ext]', - }, - { - test: /\.(mp4|webm|ogg)$/i, - loader: 'file-loader?name=assets/videos/[name].[ext]', - }, - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: - 'file-loader?limit=10000&mimetype=image/svg+xml&name=assets/svgs/[name].[ext]', - }, - { - test: /\.eot(\?v=\d+.\d+.\d+)?$/, - loader: - 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', - }, - { - test: /\.(woff|woff2)$/, - loader: - 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', - }, - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - loader: - 'file-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]', - }, - ], - }, - plugins: [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test'), - }), - new webpack.ContextReplacementPlugin( - /\@angular(\\|\/)core(\\|\/)f?esm5/, - path.join(__dirname, './src'), - ), - ], - performance: { - hints: false, - }, - node: { - global: true, - crypto: 'empty', - process: false, - module: false, - clearImmediate: false, - setImmediate: false, - fs: 'empty', - }, -} - -const options = { - webpackOptions, -} - -module.exports = wp(options) diff --git a/npm/angular/cypress/plugins/webpack.config.ts b/npm/angular/cypress/plugins/webpack.config.ts index ee6cfb9eb475..fade65328555 100644 --- a/npm/angular/cypress/plugins/webpack.config.ts +++ b/npm/angular/cypress/plugins/webpack.config.ts @@ -1,5 +1,5 @@ -import * as webpack from 'webpack' import * as path from 'path' +import { AngularWebpackPlugin } from '@ngtools/webpack' module.exports = { mode: 'development', @@ -11,30 +11,36 @@ module.exports = { module: { rules: [ { - enforce: 'pre', - test: /\.js$/, - loader: 'source-map-loader', - }, - { - test: /\.ts$/, - // loaders: ['ts-loader', 'angular2-template-loader'], - use: [ - { - loader: 'ts-loader', - options: { - transpileOnly: true, - }, - }, - { - loader: 'angular2-template-loader', - }, - ], - exclude: [/node_modules/, /test.ts/, /polyfills.ts/], + test: /\.[jt]sx?$/, + loader: '@ngtools/webpack', }, + // { + // enforce: 'pre', + // test: /\.js$/, + // use: 'source-map-loader', + // }, + // { + // test: /\.ts$/, + // // loaders: ['ts-loader', 'angular2-template-loader'], + // use: [ + // { + // loader: 'ts-loader', + // options: { + // transpileOnly: true, + // }, + // }, + // { + // loader: 'angular2-template-loader', + // }, + // ], + // exclude: [/node_modules/, /test.ts/, /polyfills.ts/], + // }, { test: /\.(js|ts)$/, - loader: 'istanbul-instrumenter-loader', - options: { esModules: true }, + use: { + loader: 'istanbul-instrumenter-loader', + options: { esModules: true }, + }, enforce: 'post', include: path.join(__dirname, '../..', 'src'), exclude: [ @@ -43,74 +49,65 @@ module.exports = { /(ngfactory|ngstyle)\.js/, ], }, - { - // Mark files inside `@angular/core` as using SystemJS style dynamic imports. - // Removing this will cause deprecation warnings to appear. - test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, - parser: { system: true }, - }, - { - test: /\.css$/, - loader: 'raw-loader', - }, - { - test: /(\.scss|\.sass)$/, - use: ['raw-loader', 'sass-loader'], - }, - { - test: /\.html$/, - loader: 'raw-loader', - exclude: [path.join(__dirname, '../../src/index.html')], - }, - { - test: /\.(jpe?g|png|gif)$/i, - loader: 'file-loader?name=assets/images/[name].[ext]', - }, - { - test: /\.(mp4|webm|ogg)$/i, - loader: 'file-loader?name=assets/videos/[name].[ext]', - }, - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: - 'file-loader?limit=10000&mimetype=image/svg+xml&name=assets/svgs/[name].[ext]', - }, - { - test: /\.eot(\?v=\d+.\d+.\d+)?$/, - loader: - 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', - }, - { - test: /\.(woff|woff2)$/, - loader: - 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', - }, - { - test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, - loader: - 'file-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]', - }, + // { + // // Mark files inside `@angular/core` as using SystemJS style dynamic imports. + // // Removing this will cause deprecation warnings to appear. + // test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/, + // parser: { system: true }, + // }, + // { + // test: /\.css$/, + // use: 'raw-loader', + // }, + // { + // test: /(\.scss|\.sass)$/, + // use: ['raw-loader', 'sass-loader'], + // }, + // { + // test: /\.html$/, + // use: 'raw-loader', + // exclude: [path.join(__dirname, '../../src/index.html')], + // }, + // { + // test: /\.(jpe?g|png|gif)$/i, + // use: 'file-loader?name=assets/images/[name].[ext]', + // }, + // { + // test: /\.(mp4|webm|ogg)$/i, + // use: 'file-loader?name=assets/videos/[name].[ext]', + // }, + // { + // test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + // use: + // 'file-loader?limit=10000&mimetype=image/svg+xml&name=assets/svgs/[name].[ext]', + // }, + // { + // test: /\.eot(\?v=\d+.\d+.\d+)?$/, + // use: + // 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', + // }, + // { + // test: /\.(woff|woff2)$/, + // use: + // 'file-loader?prefix=font/&limit=5000&name=assets/fonts/[name].[ext]', + // }, + // { + // test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, + // use: + // 'file-loader?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]', + // }, ], }, plugins: [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test'), + // new webpack.DefinePlugin({ + // 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'test'), + // }), + // new webpack.ContextReplacementPlugin( + // /\@angular(\\|\/)core(\\|\/)f?esm5/, + // path.join(__dirname, './src'), + // ), + new AngularWebpackPlugin({ + tsconfig: 'tsconfig.json', }), - new webpack.ContextReplacementPlugin( - /\@angular(\\|\/)core(\\|\/)f?esm5/, - path.join(__dirname, './src'), - ), ], - performance: { - hints: false, - }, - node: { - global: true, - crypto: 'empty', - process: false, - module: false, - clearImmediate: false, - setImmediate: false, - fs: 'empty', - }, } diff --git a/npm/angular/package.json b/npm/angular/package.json index 9e00b051859f..08f94c825702 100644 --- a/npm/angular/package.json +++ b/npm/angular/package.json @@ -39,6 +39,7 @@ "@cypress/code-coverage": "3.9.5", "@cypress/webpack-dev-server": "0.0.0-development", "@cypress/webpack-preprocessor": "5.7.0", + "@ngtools/webpack": "12.2.16", "@types/cypress-image-snapshot": "3.1.5", "@types/node": "8.10.66", "angular-router-loader": "0.8.5", @@ -63,7 +64,7 @@ "tslib": "^2.2.0", "tslint": "6.1.3", "typescript": "4.2.4", - "webpack-dev-server": "4.0.0", + "webpack-dev-server": "4.7.4", "zone.js": "~0.11.4" }, "peerDependencies": { @@ -88,4 +89,4 @@ "social": "@LeJeanbono" } ] -} \ No newline at end of file +} diff --git a/npm/angular/tsconfig.spec.json b/npm/angular/tsconfig.spec.json index bc732f670161..8382951f7fa4 100644 --- a/npm/angular/tsconfig.spec.json +++ b/npm/angular/tsconfig.spec.json @@ -4,7 +4,8 @@ "outDir": "./out-tsc/spec", "types": [ "jasmine", - "node" + "node", + "cypress" ] }, "files": [