feat(stark-all): update to Angular 6, Rxjs 6, Webpack 4, TypeScript 2…

….7.2

Adapt angular.json in each package. Adapt rollup config for Rxjs 6

ISSUES CLOSED: #359, #258, #19

combine-packages-coverage.js

@@ -1,14 +1,11 @@
 const fs = require("fs");
-const StreamConcat = require('stream-concat');
+const StreamConcat = require("stream-concat");
 
 // add the reports of all the different Stark packages to be combined
-const fileNames = [
-	"packages/stark-core/reports/coverage/packages/lcov.info",
-	"packages/stark-ui/reports/coverage/packages/lcov.info"
-];
+const fileNames = ["packages/stark-core/reports/coverage/packages/lcov.info", "packages/stark-ui/reports/coverage/packages/lcov.info"];
 let fileIndex = 0;
 
-const nextStream = function () {
+const nextStream = function() {
 	if (fileIndex === fileNames.length) {
 		return null;
 	}

package.json

@@ -19,14 +19,17 @@
     "npm": ">=5.3.0"
   },
   "devDependencies": {
-    "@angular/common": "5.2.10",
-    "@angular/compiler": "5.2.10",
-    "@angular/compiler-cli": "5.2.10",
-    "@angular/core": "5.2.10",
-    "@angular/material": "5.2.5",
-    "@angular/platform-browser": "5.2.10",
-    "@angular/platform-browser-dynamic": "5.2.10",
-    "@angular/router": "5.2.10",
+    "@angular/animations": "6.0.2",
+    "@angular/cli": "6.0.1",
+    "@angular/common": "6.0.2",
+    "@angular/compiler": "6.0.2",
+    "@angular/compiler-cli": "6.0.2",
+    "@angular/core": "6.0.2",
+    "@angular/forms": "6.0.2",
+    "@angular/material": "6.0.2",
+    "@angular/platform-browser": "6.0.2",
+    "@angular/platform-browser-dynamic": "6.0.2",
+    "@angular/router": "6.0.2",
     "@commitlint/cli": "6.1.3",
     "@commitlint/config-conventional": "6.1.3",
     "@ngtools/json-schema": "1.1.0",
@@ -38,18 +41,19 @@
     "lint-staged": "7.0.4",
     "prettier": "1.12.1",
     "release-it": "7.2.1",
-    "rollup": "0.58.1",
-    "rollup-plugin-commonjs": "9.1.0",
+    "rollup": "0.59.0",
+    "rollup-plugin-commonjs": "9.1.3",
     "rollup-plugin-node-resolve": "3.3.0",
     "rollup-plugin-sourcemaps": "0.4.2",
-    "rxjs": "5.6.0-forward-compat.4",
+    "rxjs": "6.1.0",
+    "rxjs-compat": "6.1.0",
     "stream-concat": "0.3.0",
     "stylelint": "9.2.0",
     "stylelint-config-prettier": "3.2.0",
     "tslint": "5.10.0",
     "tslint-config-prettier": "1.12.0",
     "tslint-sonarts": "1.6.0",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "uglify-es": "3.3.9"
   },
   "scripts": {
@@ -95,7 +99,6 @@
     "install:ci:starter": "cd starter && npm ci && cd ..",
     "install:travis:all": "npm run install:stark-build && npm run install:stark-testing && npm run install:stark-core && npm run install:stark-ui && npm run build:trace && npm run update:starter",
     "ngc": "ngc",
-    "prebuild": "node ./packages/validate-packages.js",
     "precommit": "lint-staged",
     "prettier-check": "prettier **/*.{css,js,json,pcss,scss,ts} --write",
     "preupdate:starter": "npm run clean:starter",

packages/rollup.config.common-data.js

@@ -25,26 +25,7 @@ const globals = {
 	uuid: "uuid",
 
 	rxjs: "rxjs",
-
-	// this should be the preferred way to import RxJS operators: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md
-	// we should only use that in our code base
-	"rxjs/operators": "rxjs.operators",
-	"rxjs/operators/catchError": "rxjs.operators.catchError",
-	"rxjs/operators/filter": "rxjs.operators.filter",
-	"rxjs/operators/map": "rxjs.operators.map",
-	"rxjs/operators/mergeMap": "rxjs.operators.mergeMap",
-	"rxjs/operators/retryWhen": "rxjs.operators.retryWhen",
-	"rxjs/operators/take": "rxjs.operators.take",
-
-	"rxjs/observable/defer": "rxjs/observable/defer",
-	"rxjs/observable/empty": "rxjs.observable.empty",
-	"rxjs/observable/timer": "rxjs.observable.time",
-	"rxjs/observable/fromPromise": "rxjs.observable.fromPromise",
-	"rxjs/observable/throw": "rxjs.observable.throw",
-
-	"rxjs/Observable": "Rx",
-	"rxjs/Subject": "Rx"
-	//"rxjs/Subscription": "Rx",
+	"rxjs/operators": "rxjs.operators"
 
 	// TODO add lines such as the one below to make sure that stark modules that depend on other stark modules can find those
 	// '@nationalbankbelgium/core': 'stark.core',

packages/stark-build/config/build-utils.js

@@ -12,7 +12,7 @@ const DEFAULT_METADATA = {
 	AOT: process.env.BUILD_AOT || helpers.hasNpmFlag("aot"),
 	E2E: !!process.env.BUILD_E2E,
 	WATCH: helpers.hasProcessFlag("watch"),
-	tsConfigPath: getAngularCliAppConfig().tsconfig,
+	tsConfigPath: getAngularCliAppConfig()["architect"]["build"]["options"].tsConfig,
 	environment: ""
 };
 
@@ -31,13 +31,20 @@ function readTsConfig(tsConfigPath) {
 
 function getEnvironmentFile(environment) {
 	if (typeof environment === "string") {
-		let fileName = helpers.root("src/" + getAngularCliAppConfig().environments[environment]);
+		let fileName = helpers.root("src/environments/environment.ts");
+		let fileNameAlt;
+		let angularCliEnvConfig = getAngularCliAppConfig()["architect"]["build"]["configurations"][environment];
+
+		if (angularCliEnvConfig && angularCliEnvConfig.fileReplacements) {
+			fileName = helpers.root(angularCliEnvConfig.fileReplacements.with);
+			fileNameAlt = helpers.root(angularCliEnvConfig.fileReplacements.replace);
+		}
 
 		if (fs.existsSync(fileName)) {
 			return fileName;
-		} else if (fs.existsSync((fileName = helpers.root("src/" + getAngularCliAppConfig().environmentSource)))) {
+		} else if (fs.existsSync(fileNameAlt)) {
 			console.warn(`Could not find environment file for ${environment}, loading default environment file`);
-			return fileName;
+			return fileNameAlt;
 		} else {
 			throw new Error("Environment file not found.");
 		}
@@ -62,8 +69,8 @@ function rxjsAlias(supportES2015) {
 }
 
 /**
- * Foreach installed NationalBankBelgium packages, read assets.json file in the root of the module.
- * Based on assets.json file, fill an array with the needed assets for the module.
+ * Foreach installed NationalBankBelgium packages, read angular.json file in the root of the module.
+ * Based on angular.json file, fill an array with the needed assets for the module.
  * Then return those to be read by CopyWebpackPlugin.
  */
 function getNbbAssetsConfig() {
@@ -73,14 +80,18 @@ function getNbbAssetsConfig() {
 	const nbbPackages = ngCliUtils.getDirectoriesNames(helpers.root(NBB_MODULES_PATH));
 
 	for (const nbbPackage of nbbPackages) {
-		const ngCliConfigPath = helpers.root(NBB_MODULES_PATH + "/" + nbbPackage + "/" + ".ng-cli-config.json");
+		const ngCliConfigPath = helpers.root(NBB_MODULES_PATH + "/" + nbbPackage + "/" + "angular.json");
 
 		if (fs.existsSync(ngCliConfigPath)) {
 			const packageCliConfig = require(ngCliConfigPath);
 			const cliConfig = ngCliUtils.validateAngularCLIConfig(packageCliConfig);
 			if (cliConfig) {
-				if (cliConfig["apps"] && cliConfig["apps"][0] && cliConfig["apps"][0].assets) {
-					customAssets = [...customAssets, ...getCopyWebpackPluginConfig(cliConfig["apps"][0].assets)];
+				let cliProjectConfig;
+				if (cliConfig["defaultProject"] && (cliProjectConfig = cliConfig["projects"][cliConfig["defaultProject"]])) {
+					customAssets = [
+						...customAssets,
+						...getCopyWebpackPluginConfig(cliProjectConfig["architect"]["build"]["options"].assets)
+					];
 				}
 			}
 		}
@@ -90,34 +101,39 @@ function getNbbAssetsConfig() {
 }
 
 /**
- * Returns assets set in .angular-cli.json file of the project.
+ * Returns assets set in angular.json file of the project.
  */
 function getApplicationAssetsConfig() {
 	const appConfig = getAngularCliAppConfig();
 
-	if (appConfig.assets) {
-		return getCopyWebpackPluginConfig(appConfig.assets);
+	if (
+		appConfig["architect"] &&
+		appConfig["architect"]["build"] &&
+		appConfig["architect"]["build"]["options"] &&
+		appConfig["architect"]["build"]["options"]["assets"]
+	) {
+		return getCopyWebpackPluginConfig(appConfig["architect"]["build"]["options"]["assets"]);
 	}
 
 	return [];
 }
 
 function getAngularCliAppConfig() {
-	const applicationAngularCliConfigPath = helpers.root(".angular-cli.json");
+	const applicationAngularCliConfigPath = helpers.root("angular.json");
 	if (fs.existsSync(applicationAngularCliConfigPath)) {
 		const angularCliConfig = require(applicationAngularCliConfigPath);
 		const cliConfig = ngCliUtils.validateAngularCLIConfig(angularCliConfig);
 		if (cliConfig) {
-			if (cliConfig["apps"] && cliConfig["apps"][0]) {
-				return cliConfig["apps"][0];
+			if (cliConfig["defaultProject"] && cliConfig["projects"][cliConfig["defaultProject"]]) {
+				return cliConfig["projects"][cliConfig["defaultProject"]];
 			} else {
 				throw new Error("Angular-cli config apps is wrong. Please adapt it to follow Angular CLI way.");
 			}
 		} else {
 			throw new Error("Parsing " + applicationAngularCliConfigPath + " failed. Ensure the file is valid JSON.");
 		}
 	} else {
-		throw new Error(".angular-cli.json is not present. Please add this at the root your project because stark-build needs this.");
+		throw new Error("angular.json is not present. Please add this at the root your project because stark-build needs this.");
 	}
 }
 
@@ -129,8 +145,8 @@ function getAngularCliAppConfig() {
 function getCopyWebpackPluginConfig(assets) {
 	const appConfig = getAngularCliAppConfig();
 
-	const projectRoot = helpers.root("");
-	const appRoot = helpers.root(appConfig.root);
+	const projectRoot = helpers.root(appConfig.root);
+	const appRoot = helpers.root(appConfig.sourceRoot);
 
 	return assets.map(asset => {
 		// Convert all string assets to object notation.
@@ -144,7 +160,7 @@ function getCopyWebpackPluginConfig(assets) {
 		// specify a configuration flag.
 		// Also prevent writing outside the project path. That is not overridable.
 		// For info: Comparing to implementation of Angular, "buildOptions.outputPath" has been replaced by "appConfig.outDir"
-		const absoluteOutputPath = path.resolve(projectRoot, appConfig.outDir);
+		const absoluteOutputPath = path.resolve(projectRoot, appConfig["architect"]["build"]["options"]["outputPath"]);
 		const absoluteAssetOutput = path.resolve(absoluteOutputPath, asset.output);
 		const outputRelativeOutput = path.relative(absoluteOutputPath, absoluteAssetOutput);
 		if (outputRelativeOutput.startsWith("..") || path.isAbsolute(outputRelativeOutput)) {

packages/stark-build/config/ng-cli-utils.js

@@ -1,5 +1,7 @@
 const path = require("path");
 const fs = require("fs");
+const cliUtilConfig = require("@angular/cli/utilities/config");
+const { formatDiagnostics } = require("@angular/compiler-cli/ngtools2");
 
 function isDirectory(path) {
 	try {
@@ -22,18 +24,26 @@ function getDirectoriesNames(source) {
  * @returns {*}
  */
 function validateAngularCLIConfig(jsonConfig) {
-	const SchemaClassFactory = require("@ngtools/json-schema").SchemaClassFactory;
-	const schema = require("@angular/cli/lib/config/schema.json");
+	// FIXME Adapt usage for Angular CLI 6
+	return jsonConfig;
 
-	const config = new (SchemaClassFactory(schema))(jsonConfig);
-	try {
-		const serializedConfig = JSON.parse(config.$$serialize("application/json"));
-		return serializedConfig;
-	} catch (error) {
-		return false;
-	}
+	// const SchemaClassFactory = require("@ngtools/json-schema").SchemaClassFactory;
+	// const schema = require("@angular/cli/lib/config/schema.json");
+	//
+	// const config = new (SchemaClassFactory(schema))(jsonConfig);
+	// try {
+	// 	const serializedConfig = JSON.parse(config.$$serialize("application/json"));
+	// 	return serializedConfig;
+	// } catch (error) {
+	// 	return false;
+	// }
+}
+
+function getWorkspace() {
+	return cliUtilConfig.getWorkspace();
 }
 
 exports.getDirectoriesNames = getDirectoriesNames;
 exports.isDirectory = isDirectory;
 exports.validateAngularCLIConfig = validateAngularCLIConfig;
+exports.getWorkspace = getWorkspace;