Angular 2 -> Angular 7 Upgrade: "TypeError: System.config is not a function"

[Harry Whitehouse]

I inherited an Angular 2  application and have been striving to update to Angular 7.  After upgrading the Angular and the latest supporting NPM resources, I ended up with 145 compiler errors. The errors were clearly defined and I made code changes to eliminate them all.   I have a clean compile when I "npm start".and the application pops up at localhost:3000.  

At launch I end up with a white screen with only a Zendesk chat dialog in the lower right corner (where is should be) -- but nothing else is shown.  We should see a logon screen with red background.  

The browser watch points to system.config.js with "TypeError: System.config is not a function".  I haven't made any changes myself to this file.  Nor have I made changes to index.html or main.ts.  

My package.json looks like this:

"name": "Angular7",

  "version": "1.0.0",

  "scripts": {

    "clean": "rd /s /q dist && mkdir dist && mkdir dist\\dependencies",

    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

    "lite": "lite-server",

    "postinstall": "typings install",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings",

    "build": "npm run clean && tsc",

    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",

    "build_prod": "npm run build && browserify -s main production\\main.prod.js > dist\\bundle.js && npm run minify && xcopy /e /i /y /s assets dist\\assets && copy production\\index.html dist\\ && npm run build_prod_depds",

    "build_prod_depds": "copy node_modules\\core-js\\client\\shim.min.js dist\\dependencies\\ && copy node_modules\\zone.js\\dist\\zone.js dist\\dependencies\\ && copy node_modules\\reflect-metadata\\Reflect.js dist\\dependencies\\ && copy node_modules\\systemjs\\dist\\system.src.js dist\\dependencies\\ && copy systemjs.config.js dist\\"

  },

  "licenses": [

    {

      "type": "MIT",

      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"

    }

  ],

  "dependencies": {

    "@agm/core": "^1.0.0-beta.5",

    "@angular/animations": "^7.2.5",

    "@angular/cli": "^7.3.1",

    "@angular/common": "^7.2.5",

    "@angular/compiler": "^7.2.5",

    "@angular/core": "^7.2.5",

    "@angular/forms": "^7.2.5",

    "@angular/http": "^7.2.5",

    "@angular/material": "^7.3.2",

    "@angular/platform-browser": "^7.2.5",

    "@angular/platform-browser-dynamic": "^7.2.5",

    "@angular/router": "^7.2.5",

    "@angular/upgrade": "^7.2.5",

    "angular-in-memory-web-api": "^0.8.0",

    "braintree-web": "^3.42.0",

    "chartist": "^0.9.8",

    "core-js": "^2.6.5",

    "jquery": "^3.3.1",

    "ng-chartist": "^4.1.0",

    "ngx-bootstrap": "^1.6.3",

    "ngx-webstorage": "^3.0.2",

    "ngx-zendesk-webwidget": "^0.1.4",

    "reflect-metadata": "^0.1.13",

    "rxjs": "^6.4.0",

    "systemjs": "^3.0.0",

    "zone.js": "^0.8.29"

  },

  "devDependencies": {

    "@types/braintree-web": "3.6.0",

    "@types/chartist": "^0.9.44",

    "@types/core-js": "^2.5.0",

    "@types/jquery": "^3.3.11",

    "@types/node": "^11.9.4",

    "browser-sync": "^2.26.3",

    "browserify": "^16.2.3",

    "concurrently": "^4.1.0",

    "connect-history-api-fallback": "^1.6.0",

    "del": "^3.0.0",

    "dotenv": "^6.2.0",

    "gulp": "^4.0.0",

    "gulp-browserify": "0.5.1",

    "gulp-clean": "0.3.2",

    "gulp-clean-css": "2.1.1",

    "gulp-concat": "2.6.1",

    "gulp-dotenv": "0.2.1",

    "gulp-hash": "^4.2.2",

    "gulp-html-replace": "1.6.1",

    "gulp-inject": "4.2.0",

    "gulp-inline-ng2-template": "4.0.0",

    "gulp-ng-annotate": "2.0.0",

    "gulp-sass": "3.1.0",

    "gulp-shell": "0.5.2",

    "gulp-sourcemaps": "^2.6.4",

    "gulp-tsc": "^1.3.2",

    "gulp-tslint": "7.0.1",

    "gulp-typescript": "^3.1.3",

    "gulp-uglify": "2.0.0",

    "gulp-util": "3.0.7",

    "lite-server": "^2.4.0",

    "mkdirp": "0.5.1",

    "pump": "^3.0.0",

    "run-sequence": "1.2.2",

    "systemjs-builder": "^0.16.13",

    "tslint-eslint-rules": "3.1.0",

    "typescript": "^3.3.3",

    "typings": "^2.1.1",

    "uglify-js": "2.7.3"

  }

}

I've been searching over the internet for an answer, but I'm stumped!!

Has anyone seen this behavior before?

Harry

[Harry Whitehouse]

Upon further searching I found a re-read a comment on this thread:

https://stackoverflow.com/questions/52810507/i-am-getting-to-see-error-system-config-is-not-a-function-in-browser-console

It was pointed out that if one uses systemjs with anything but a 0.x.x version, the system.config.js file is completely ignored!!  So I changed to 0.21.5 and the "not a function" error disappeared.  The browser now showed it was processing the loading information in system.config.js and getting 404's on some of them.  I modified some of the paths in the system.config.js file and eliminated all but two of the 404's.

For those interested, I added these lines to resolve the 404's.  The lines reflect the npm_module paths to these various resources.

      '@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.js',

      // other libraries

      'rxjs':                          'node_modules/rxjs',

      'rxjs/operators':                'node_modules/rxjs/operators/index.js',

      'rxjs/internal/operators':       'node_modules/rxjs/internal/operators/index.js',

      'rxjs-compat/operator/map':      'node_modules/rxjs-compat/operator/map.js',

      'rxjs-compat/add/operator/map':  'node_modules/rxjs-compat/add/operator/map.js',

      'rxjs-compat/add/observable/of': 'node_modules/rxjs-compat/add/observable/of.js',

I am having problems still resolving this 404 :

http://localhost:3000/node_modules/rxjs-compat/operator/map         404 (Not Found)

Even through I added the lines above.  The browser was asking for both /operator/map and /add/operator/map but I can only seem to resolve one of them.

But I'm much further along than when I originally posted my question...

Best

Harry

[Sander Elias]

Hi Harry,

You seem to have some really old tooling around, and a build that's still centred around systemJS. From version 2 on the CLI switched to webpack. It will make your life a lot easier if you do too.

The easy way is: Use the CLI to generate a new empty app. Add the deps yo uneed, and compile the app, see if all works.

When it's up, you can copy the code over from your old app. Some small refactors might be needed.

Depending on your experience, this will take a bit of time (I have done this a couple of times, and takes me 2 to 3 hours unless there are incompatible 3rth parties)

Once done, you are back in line with the things most people use nowadays for angular apps. (and it's much easier to work with!)

Regards

Sander

[Suresh Kumar]

I'm beginner to Protractor

Please suggest me a good resource to learn. 

I have been doing selenium for sometime.. Using Java. 

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Harry Whitehouse]

Thank you Sander!  

You clarified the systemJS vs. Webpack issue for me and that was very helpful.  I was able to finally get the application to run (using a systemJS version 0.x.x) by adjusting the paths to the HTML files in the project.  The original project had full path names in the associated TS file.  In Angular 7, I gather relative paths are required.  Once I corrected that, the application finally came to life in Angular 7.4!

I will take your advice and create an empty project A7 and move over my code to that new environment so I'm on Webpack moving forward.

My only remaining problem relates to animations and I will post a separate question on that.

Best regards,

Harry

[Harry Whitehouse]

Suresh -- I'm sorry to say I'm an Angular newbie and have been focusing my efforts on Angular 5, 6 & 7.  And as so far as protractor, I haven't yet tried that. So I hope that someone else jumps in and can help you!

Best

Harry

[Sander Elias]

Hi Harry,

I'm glad you sorted it out! Yeah, there are no big breaking changes in Angular 2+, but there are some things that need some attention during an upgrade. 

Oh, and yes some changes in the animation engine. 

I would say, port it to full CLI support first, and then fix the animations.

Regards

Sander

[Sander Elias]

Hi Suresh,

When you are asking questions, try to do that in a new thread, or at least in a thread that is related to your question. Changes are slim you get an answer otherwise.

https://www.protractortest.org/#/tutorial is a good place to start.

Regards

Sander