Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(stark-build): upgrade to Angular 12
BREAKING CHANGE:
Remove useless babel-loader dependency + remove IE 11 support in development mode
BREAKING CHANGE:
Due to Angular upgrade, "angular.json" file has to be updated as following:
1. Edit `projects.<project_name>.architect.build.options`:
Before:
```txt
{
// ...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.dev.js",
"mergeStrategies": {
"modules.rules": "prepend",
"plugins": "prepend",
"devServer": "prepend",
"replaceDuplicatePlugins": false
}
},
// ...
},
}
}
}
}
}
```
After:
```txt
{
// ...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack.config.js"
},
// /!\ Add following line
"indexTransform": "./node_modules/@nationalbankbelgium/stark-build/config/index-html.transform.js",
// ...
},
}
}
}
}
}
```
2. Edit `projects.<project_name>.architect.build.configurations.<environment>`:
In Stark 12, there is only one "webpack.config.js" file.
Thanks to this, this is no longer needed to have specific configurations for other environment.
You need to remove the following lines in
`projects.<project_name>.architect.build.configurations.<environment>`:
Before:
```txt
{
// ...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"configurations": {
"production": {
// Remove all the "customWebpackConfig"
"customWebpackConfig": {
"path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack-partial.prod.js",
"mergeStrategies": {
"modules.rules": "prepend",
"plugins": "prepend",
"devServer": "prepend",
"replaceDuplicatePlugins": false
}
},
// ...
},
// ...
},
}
}
}
}
}
```
After:
```txt
{
//...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"configurations": {
"production": {
// "customWebpackConfig" is entirely removed
// ...
},
// ...
},
}
}
}
}
}
```
3. Edit `projects.<project_name>.architect.serve.builder`:
Before:
```txt
{
//...
"projects": {
"<project_name>": {
// ...
"architect": {
"serve": {
"builder": "@angular-builders/dev-server:generic",
"options": {
"browserTarget": "<project_name>:build",
"port": 3000,
"open": true
},
// ...
}
}
}
}
}
```
After:
```txt
{
//...
"projects": {
"<project_name>": {
// ...
"architect": {
"serve": {
// /!\ Edit following line
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "<project_name>:build",
"port": 3000,
"open": true
},
// ...
}
}
}
}
}
```
4. Edit `projects.<project_name>.architect.test.builder`:
Add support for stark-testing karma config with command `ng test`
Before:
```txt
{
//...
"projects": {
"<project_name>": {
// ...
"architect": {
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "base.spec.ts",
"karmaConfig": "./karma.conf.js",
"tsConfig": "tsconfig.spec.json"
}
}
}
}
}
}
```
After:
```txt
{
//...
"projects": {
"<project_name>": {
// ...
"architect": {
"test": {
// /!\ Edit following line
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "base.spec.ts",
"karmaConfig": "./karma.conf.js",
"tsConfig": "tsconfig.spec.json"
}
}
}
}
}
}
```
5. Edit `projects.<project_name>.architect.build.configurations.hmr`:
Add support for CSS Hot Reloading by setting `extractCss` property to `false` in hmr configuration.
Before:
```txt
{
// ...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
// ...
},
}
}
}
}
}
```
After:
```txt
{
// ...
"projects": {
"<project_name>": {
// ...
"architect": {
"build": {
"configurations": {
"hmr": {
"extractCss": false, // <-- Line to add
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
// ...
},
}
}
}
}
}
```
BREAKING CHANGE:
Adapt "src/index.html" file
1. Adapt stark variables usage
As `htmlWebpackPlugin` is no longer supported by Angular CLI, the options related to this plugin
have been changed.
Instead of using `htmlWebpackPlugin`, you need to use `starkOptions` like this:
Before:
```html
<%= htmlWebpackPlugin.options.starkAppMetadata.name %>
<!-- or -->
<%= htmlWebpackPlugin.options.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= htmlWebpackPlugin.options.metadata.TITLE %>
```
After:
```html
<%= starkOptions.starkAppMetadata.name %>
<!-- or -->
<%= starkOptions.starkAppConfig.defaultLanguage %>
<!-- or -->
<%= starkOptions.metadata.TITLE %>
```
Thanks to the following search & replace:
- search: `htmlWebpackPlugin.options.`
- replace: `starkOptions.`
It should be easy to adapt the index.html file.
2. Remove obsolete code related to webpack-dev-server
Remove the following piece of code in "src/index.html"
```html
<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
<% if (starkOptions.starkAppMetadata.IS_DEV_SERVER && starkOptions.starkAppMetadata.HMR !== true) { %>
<!-- Webpack Dev Server reload -->
<script src="/webpack-dev-server.js"></script>
<% } %>
```
BREAKING CHANGE:
Adapt "package.json" file. Remove scripts with MONITOR
Due to Angular upgrade, webpack-monitor stopped working.
Since the package was no longer maintained (4 years),
we decided to remove the support from `stark-build`.
The following scripts should be removed from "package.json" file:
```json
{
"scripts": {
"build:dev:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run build:dev",
"server:dev:monitor": "npm run clean:dist && cross-env MONITOR=1 npm run ng -- serve",
"start:monitor": "npx mkdirp reports && cross-env MONITOR=1 npm run server:dev"
}
}
```- Loading branch information
1 parent
4c4adb5
commit 44502de