TypeError: $view.viewConfigFactory is not a function -- while upgrading application with ui.router.upgrade about angular-hybrid

[offgriddev]

I'm getting the same error:

(index):42 Error: TypeError: $view.viewConfigFactory is not a function
at eval (https://admin.localhost:44300/build/js/lib/@angular/ng1-to-ng2.js:122:27)
at Object.invoke (https://admin.localhost:44300/build/js/lib/angular/angular.js:4708:19)
at eval (https://admin.localhost:44300/build/js/lib/angular/angular.js:4516:62)
at forEach (https://admin.localhost:44300/build/js/lib/angular/angular.js:322:20)
at createInjector (https://admin.localhost:44300/build/js/lib/angular/angular.js:4516:3)
at doBootstrap (https://admin.localhost:44300/build/js/lib/angular/angular.js:1777:20)
at bootstrap (https://admin.localhost:44300/build/js/lib/angular/angular.js:1798:12)
at eval (https://admin.localhost:44300/build/js/lib/@angular/upgrade/upgrade.umd.js:878:38)
at ZoneDelegate.invoke (https://admin.localhost:44300/build/js/lib/zone.js:323:29)
at Object.onInvoke (https://admin.localhost:44300/build/js/lib/@angular/core/core.umd.js:6075:45)
Evaluating https://admin.localhost:44300/build/js/app/hybrid.app.ng2.js
Error loading https://admin.localhost:44300/build/js/app/hybrid.app.ng2.js(anonymous function) @ (index):42ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
Failed to parse SourceMap: https://admin.localhost:44300/build/js/lib/rxjs/util/root.js.map

[christopherthielen]

My best guess is that the version of ui-router isn't 1.0.0. There is a $view service, since you didn't get an injector error. The service doesn't have a viewConfigFactory though, which was added in a 1.0 alpha version.

Here's a systemjs setup based on the code you've pasted @ashishmangla

Extract the ZIP, then run:

npm i && typings install && npm start

Note: systemjs setups can be tricky to configure properly

hybrid.zip

[squadwuschel]

@christopherthielen the hybrid Example is very cool you should provide such an "easy" example too on your ng1-to-ng2 examples Page. Because the extended example is a bit too complex to just try it out and I try to get this working, but its not working yet in my current ng1/ng2 app, could you please extend the hybrid example with one or two ng2 route definitions and the components for it.

and you need to update the system js to the newest ng2 version like

(function (global) {
System.config({
    paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
        // our app is within the app folder
        app: 'ScriptsAppNg2', // 'dist',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-ui-router': "npm:angular-ui-router/release/angular-ui-router.js",
        'ui-router-ng2': "npm:ui-router-ng2/_bundles/ui-router-ng2.js",
        'ui-router-ng1-to-ng2': "npm:ui-router-ng1-to-ng2/ng1-to-ng2.js",
        'angular': 'npm:angular/angular.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: { main: './boot.js', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' }
    },
    meta: {
        'angular': {
            format: 'global', exports: 'angular'
        },
        'angular-ui-router': {
            globals: { angular: 'angular' }
        }
    }
});
})(this);

[christopherthielen]

Anyone experiencing this issue, feel free to try again with @uirouter/angular-hybrid version 3.0.1 or higher.

Closing this issue because I think the latest version doesn't suffer this problem. See the sample app for a working setup: https://github.com/ui-router/sample-app-ng1-to-ng2

@squadwuschel I agree a simpler example would be nice, will track your issue #21