Merge pull request NationalBankBelgium#2571 from nicanac/feature/chor…

…e-starter-update-ng8 chore(starter): upgrade to Angular 8
nicanac · Mar 26, 2021 · aaea3db · aaea3db
2 parents a92e5a3 + 4a16799
commit aaea3db
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 62 deletions.
diff --git a/starter/angular.json b/starter/angular.json
@@ -12,14 +12,9 @@
           "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
-              }
+              "path": "./node_modules/@nationalbankbelgium/stark-build/config/webpack.config.js"
             },
+            "indexTransform": "./node_modules/@nationalbankbelgium/stark-build/config/index-html.transform.js",
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.browser.ts",
@@ -110,7 +105,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-builders/dev-server:generic",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "starter:build",
             "port": 3000,

diff --git a/starter/package.json b/starter/package.json
@@ -112,51 +112,51 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "~7.2.2",
-    "@angular/cdk": "~7.3.0",
-    "@angular/cli": "~7.3.0",
-    "@angular/common": "~7.2.2",
-    "@angular/compiler": "~7.2.2",
-    "@angular/compiler-cli": "~7.2.2",
-    "@angular/core": "~7.2.2",
-    "@angular/flex-layout": "7.0.0-beta.24",
-    "@angular/forms": "~7.2.2",
-    "@angular/material": "~7.3.0",
-    "@angular/platform-browser": "~7.2.2",
-    "@angular/platform-browser-dynamic": "~7.2.2",
-    "@angular/platform-server": "~7.2.2",
-    "@angular/router": "~7.2.2",
-    "@nationalbankbelgium/code-style": "^1.2.0",
+    "@angular/animations": "^8.2.0",
+    "@angular/cdk": "^8.2.0",
+    "@angular/cli": "^8.3.0",
+    "@angular/common": "^8.2.0",
+    "@angular/compiler": "^8.2.0",
+    "@angular/compiler-cli": "^8.2.0",
+    "@angular/core": "^8.2.0",
+    "@angular/flex-layout": "^8.0.0-beta.25",
+    "@angular/forms": "^8.2.0",
+    "@angular/material": "^8.2.0",
+    "@angular/platform-browser": "^8.2.0",
+    "@angular/platform-browser-dynamic": "^8.2.0",
+    "@angular/platform-server": "^8.2.0",
+    "@angular/router": "^8.2.0",
+    "@nationalbankbelgium/code-style": "^1.4.0",
     "@nationalbankbelgium/stark-core": "latest",
     "@nationalbankbelgium/stark-ui": "latest",
     "@uirouter/visualizer": "~7.2.1",
     "core-js": "~3.8.0",
     "eligrey-classlist-js-polyfill": "~1.2.20180112",
-    "event-source-polyfill": "~1.0.5",
+    "event-source-polyfill": "~1.0.22",
     "hammerjs": "^2.0.8",
     "http-server": "~0.12.0",
     "ngrx-store-freeze": "~0.2.4",
     "ngrx-store-logger": "~0.2.2",
     "reflect-metadata": "~0.1.13",
-    "rxjs": "^6.0.0",
-    "zone.js": "~0.10.2"
+    "rxjs": "^6.6.6",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@compodoc/compodoc": "~1.1.11",
     "@nationalbankbelgium/stark-build": "latest",
     "@nationalbankbelgium/stark-testing": "latest",
-    "@types/core-js": "~2.5.0",
-    "@types/hammerjs": "~2.0.36",
-    "@types/node": "~10.17.13",
-    "@types/webpack-env": "~1.15.0",
-    "cross-env": "~7.0.0",
+    "@types/core-js": "~2.5.4",
+    "@types/hammerjs": "~2.0.39",
+    "@types/node": "~10.17.54",
+    "@types/webpack-env": "~1.16.0",
+    "cross-env": "~7.0.3",
     "find-root": "~1.1.0",
     "husky": "~4.3.0",
     "lint-staged": "~10.5.1",
     "npm-run-all": "~4.1.5",
-    "parse5": "~6.0.0",
-    "ts-node": "~8.10.1",
+    "parse5": "~6.0.1",
+    "ts-node": "~8.10.2",
     "tslib": "~1.10.0",
-    "typescript": "~3.2.4"
+    "typescript": "~3.5.0"
   }
 }
diff --git a/starter/src/app/app.module.ts b/starter/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, Inject, NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader } from "@angular/core";
+import { APP_INITIALIZER, Inject, NgModule } from "@angular/core";
 import { BrowserModule, DomSanitizer } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { UIRouter, UIRouterModule } from "@uirouter/angular";
@@ -195,7 +195,6 @@ export const metaReducers: MetaReducer<State>[] = ENV === "development" ? [logge
 	 */
 	providers: [
 		environment.ENV_PROVIDERS,
-		{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }, // needed for ui-router
 		{ provide: STARK_APP_CONFIG, useFactory: starkAppConfigFactory },
 		{ provide: STARK_APP_METADATA, useFactory: starkAppMetadataFactory },
 		{ provide: STARK_MOCK_DATA, useFactory: starkMockDataFactory },

diff --git a/starter/src/index.html b/starter/src/index.html
@@ -4,30 +4,18 @@
 		<!-- The base href is defined through the Webpack configuration and can be customized through the angular.json file -->
 		<!-- necessary for HTML5 History API which adds support for pretty URLs (see app.ts) -->
 		<meta charset="utf-8" />
-		<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
 
-		<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>" />
-
-		<% if (webpackConfig.htmlElements.headTags) { %>
-		<!--Configured Head Tags  -->
-		<%= webpackConfig.htmlElements.headTags %> <% } %>
+		<title><%= starkOptions.starkAppMetadata.name %></title>
+		<meta name="description" content="<%= starkOptions.starkAppMetadata.description %>" />
 
 		<!-- Stylesheets -->
 		<!-- Generated CSS stylesheets will be added by webpack: mini-css-extract-plugin -->
 
 		<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
-		<% if (htmlWebpackPlugin.options.metadata.IS_DEV_SERVER && htmlWebpackPlugin.options.metadata.HMR !== true) { %>
+		<% if (starkOptions.starkAppMetadata.IS_DEV_SERVER && starkOptions.starkAppMetadata.HMR !== true) { %>
 		<!-- Webpack Dev Server reload -->
 		<script src="/webpack-dev-server.js"></script>
 		<% } %>
-
-		<!-- add this block at the end of the <head> section -->
-		<!-- dllFiles will be filled in by the Dll plugin -->
-		<% if (htmlWebpackPlugin.options.dllFiles) { %>
-		<!-- Webpack DLL CSS files -->
-		<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.css.length; ++i) { %>
-		<link href="<%= htmlWebpackPlugin.options.dllFiles.css[i] %>" rel="stylesheet" />
-		<% } %> <% } %>
 	</head>
 	<body class="">
 		<noscript>
@@ -78,15 +66,5 @@ <h1>Loading...</h1>
 				if (starkApp) document.body.removeChild(starkApp);
 			}
 		</script>
-		<!-- dllFiles will be filled in by the Dll plugin -->
-		<% if (htmlWebpackPlugin.options.dllFiles) { %>
-		<!-- Webpack DLL JS files -->
-		<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
-		<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
-		<% } %> <% } %>
-
-		<!-- CSS will be injected by webpack here -->
-		<!-- Preload link tags will be injected by webpack here -->
-		<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
 	</body>
 </html>
diff --git a/starter/tsconfig.json b/starter/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@nationalbankbelgium/code-style/tsconfig/3.2.x/ng7",
+  "extends": "@nationalbankbelgium/code-style/tsconfig/3.5.x/ng8",
   "compilerOptions": {
     "baseUrl": "./src",
     "outDir": "./dist",