Upgrading Angular Project

I'm upgrading an Angular project from Angular 2 rc4 to the current version, which is 2.4.4. I've done this on another of our internal projects, but I'm getting some weird errors as I do so.

I've upgraded all the angular packages, as well as typescript, zone.js, rxjs, and the new @types modules. My systemjs.config.js file looks like this:

var System;
(function(global) {
    const paths = {
        'deps:': 'js/dependencies/'
    };
    // map tells the System loader where to look for things
    var map = {
        'app':                                  'js/app', // 'dist',
        'rxjs':                                 'deps:rxjs',
        'ng2-bootstrap':                        'js/dependencies/ng2-bootstrap',
        'ng2-file-upload':                      'deps:ng2-file-upload',
        'moment':                               'deps:moment',
        'lodash':                               'deps:lodash',
        'symbol-observable':                    'deps:symbol-observable',
        '@angular/core':                        'deps:@angular/core/bundles/core.umd.js',
        '@angular/common':                      'deps:@angular/common/bundles/common.umd.js',
        '@angular/compiler':                    'deps:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser':            'deps:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic':    'deps:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http':                        'deps:@angular/http/bundles/http.umd.js',
        '@angular/router':                      'deps:@angular/router/bundles/router.umd.js',
        '@angular/forms':                       'deps:@angular/forms/bundles/forms.umd.js',
    };

    // 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' },
        'moment':                     { main: 'moment.js', defaultExtension: 'js' },
        'lodash':                     { main: 'index.js', defaultExtension: 'js' },
        'ng2-bootstrap':              { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' },
        'ng2-file-upload':            { main: 'ng2-file-upload.js', defaultExtension: 'js' }
    };

    var config = {
        paths: paths,
        map: map,
        packages: packages
    };

    System.config(config);

})(this);

This is the exact same as the other Angular project we have (and it works over there).

When I build the project and load it, I get the following error in the browser console:

[path]/@angular/router/bundles/router.umd.js/src/url_tree 404 (Not Found)
ZoneAwareError
    Error: Error: XHR error (404 Not Found) loading [path]/@angular/router/bundles/router.umd.js/src/url_tree

I've tried other systemjs.config.js formats, like this one, but I still get an error. That one is slightly different; the 404 is on traceur.

I'm just not sure where the error is coming from or how to fix it. If anyone has any ideas or pointers on where to go, I'd greatly appreciate it!

Solution

So I figured out where my error was coming from in this particular case. I can't say that this is always the issue, but it was the issue for me.

I had a function that checks the current route and then hides or shows a menu component. That code is out of date and needs to be updated, but because I hadn't updated that yet it failed and that's where the 404 came from.

The offending import was:

import { containsTree } from '@angular/router/src/url_tree';

I commented that out and the error is gone. So now I can move on and update that code too.