Angular6 rxjs 6 update - angular6

Question

Hi I appreciate these are a pain.
After updating Angular to version 6 and rxjs to version 6 we are getting a lot of browser errors that the system is unable to instantiate a number of packages.
We use a combination of node_modules and systemjs.config.server.js
without trying to start an argument on whether one is better than the other, If there are any improvements please let me know.
package.json
{
"version": "1.0.0",
"name": "infrastructure-annual-reporting",
"private": true,
"dependencies": {
"#angular/animations": "^6.0.0",
"#angular/cdk": "^6.0.0",
"#angular/common": "^6.0.0",
"#angular/compiler": "^6.0.0",
"#angular/core": "^6.0.0",
"#angular/forms": "^6.0.0",
"#angular/http": "^6.0.0",
"#angular/material": "^6.0.1",
"#angular/platform-browser": "^6.0.0",
"#angular/platform-browser-dynamic": "^6.0.0",
"#angular/router": "^6.0.0",
"angular-date-value-accessor": "^0.0.2",
"bootstrap": "^3.3.7",
"core-js": "^2.5.6",
"hammerjs": "^2.0.8",
"ng2-bs3-modal": "^0.13.0",
"ngx-accordion": "^0.0.17",
"nodemailer": "^4.6.4",
"rxjs": "^6.1.0",
"rxjs-compat": "^6.1.0",
"rxjs-tslint": "^0.1.3",
"socks": "^2.2.0",
"systemjs": "^0.21.3",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.0.0",
"#angular/language-service": "^6.0.0",
"#types/hammerjs": "^2.0.35",
"#types/jasmine": "^2.8.7",
"#types/node": "^10.0.6",
"codelyzer": "^4.3.0",
"jasmine": "^3.1.0",
"karma": "^2.0.2",
"lite-server": "^2.3.0",
"lodash": "^4.17.10",
"protractor": "^5.3.1",
"ts-node": "^6.0.3",
"tslint": "^5.10.0",
"typescript": "^2.8.3"
},
"keywords": [],
"license": "MIT",
"peerDependencies": {
"#angular/core": ">=2.0.0",
"#angular/common": ">=2.0.0",
"#angular/compiler": ">=2.0.0",
"#angular/platform-browser": ">=2.0.0",
"#angular/platform-browser-dynamic": ">=2.0.0",
"#angular/cdk": "6.0.1"
},
"repository": {},
"scripts": {
"build": "tsc -p src/",
"build:watch": "tsc -p src/ -w",
"build:e2e": "tsc -p e2e/",
"serve": "lite-server -c=bs-config.json",
"serve:e2e": "lite-server -c=bs-config.e2e.json",
"prestart": "npm run build",
"start": "concurrently \"npm run build:watch\" \"npm run serve\"",
"pree2e": "npm run build:e2e",
"e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
"preprotractor": "webdriver-manager update",
"protractor": "protractor protractor.config.js",
"pretest": "npm run build",
"test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
"pretest:once": "npm run build",
"test:once": "karma start karma.conf.js --single-run",
"lint": "tslint ./src/**/*.ts -t verbose"
}
}
systemjs.config.server.js
(function (global) {
// map tells the System loader where to look for things
var paths = {
'npm:': "https://unpkg.com/"
};
var map = {
'app': "app", // 'dist',
'#angular': "node_modules/#angular",
'angular2-in-memory-web-api': "node_modules/angular2-in-memory-web-api",
'rxjs': "npm:rxjs",
'#angular/platform-browser/animations': "npm:#angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
"ngx-accordion": "npm:ngx-accordion#0.0.17/index.js",
'#angular/common/http': "npm:#angular/common/bundles/common-http.umd.js",
'#angular/animations/browser': "npm:#angular/animations#5.2.10/bundles/animations-browser.umd.js",
'ng2-bs3-modal': "npm:ng2-bs3-modal/bundles/ng2-bs3-modal.umd.js",
'hammerjs':"npm:hammerjs/hammer.js",
// CDK individual packages
'#angular/cdk/bidi': "npm:#angular/cdk/bundles/cdk-bidi.umd.js",
'#angular/cdk/platform': "npm:#angular/cdk/bundles/cdk-platform.umd.js",
'#angular/cdk/keycodes': "npm:#angular/cdk/bundles/cdk-keycodes.umd.js",
'#angular/cdk/collections': "npm:#angular/cdk/bundles/cdk-collections.umd.js",
'#angular/cdk/portal': "npm:#angular/cdk/bundles/cdk-portal.umd.js",
'#angular/cdk/coercion': "npm:#angular/cdk/bundles/cdk-coercion.umd.js",
'#angular/cdk/overlay': "npm:#angular/cdk/bundles/cdk-overlay.umd.js",
'#angular/cdk/accordion': "npm:#angular/cdk/bundles/cdk-accordion.umd.js",
'#angular/cdk/observers': "npm:#angular/cdk/bundles/cdk-observers.umd.js",
'#angular/cdk/layout': "npm:#angular/cdk/bundles/cdk-layout.umd.js",
'#angular/cdk/scrolling': "npm:#angular/cdk/bundles/cdk-scrolling.umd.js",
'#angular/cdk/table': "npm:#angular/cdk/bundles/cdk-table.umd.js",
'#angular/cdk/stepper': "npm:#angular/cdk/bundles/cdk-stepper.umd.js",
'#angular/cdk/a11y': "npm:#angular/cdk/bundles/cdk-a11y.umd.js",
'#angular/cdk/tree' : "node_modules/#angular/cdk#6.0.1/tree",
'tslib': "npm:tslib/tslib.js",
'rxjs/operators' : "npm:rxjs/operators/"
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: "main.js", defaultExtension: "js" },
'rxjs': { defaultExtension: "js" },
'rxjs-compact': { defaultExtension: "js" },
'angular2-in-memory-web-api': { main: "index.js", defaultExtension: "js" }
};
var ngPackageNames = [
"animations",
"common",
"compiler",
"core",
"forms",
"http",
"material",
"platform-browser",
"platform-browser-dynamic",
"router"
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages["#angular/" + pkgName] = { main: "index.js", defaultExtension: "js" };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages["#angular/" + pkgName] = { main: "bundles/" + pkgName + ".umd.js", defaultExtension: "js" };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
the errors that we are seeing in the browser are

Answer 1

in cmd : npm install rxjs-compat#6 --save
in systemjs.config :
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
main_angular_upgrade:{
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js', main: "index.js"
},
"rxjs-compat": { defaultExtension: 'js', main: "index.js" },
"rxjs/operators": { "main": "index.js", "defaultExtension": "js" },
"rxjs/internal-compatibility": { "main": "index.js", "defaultExtension": "js" },
"rxjs/testing": { "main": "index.js", "defaultExtension": "js" },
'rxjs/ajax': { main: 'index.js', defaultExtension: 'js' },
'rxjs/webSocket': { main: 'index.js', defaultExtension: 'js' }
}

Answer 2

Follow this official guidance to properly update your angular project:
https://update.angular.io/
You just need to select which version you are migrating from and your package manager (npm/yarn).
Then you'll have a list of things to do or check in order to have all set.
update check list