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

[ashishmangla]

We have an ng1 + ui-router application and want to inject ng2 components in that. But on injecting ng2 libraries and bootstraping the application using NgUpgrade.bootstrap break the existing routes/states of the application. So tried after injecting this ng1-to-ng2 library but getting below error.

Angular version : 1.5.6

Here we just want to run our NG1+ui-router application upgraded with the NG2 + Ng1-to-ng2 library and ngupgrade bootstrap. Later on will inject this ui-router in NG2 components as well.

Example:
index.html

     <script src="/node_modules/angular/angular.js"></script>
    <script type="text/javascript" src="/node_modules/zone.js/dist/zone.js" ></script>
    <script type="text/javascript" src="/node_modules/es6-shim/es6-shim.min.js" ></script>
    <script type="text/javascript" src="/node_modules/reflect-metadata/Reflect.js" ></script>
    <script type="text/javascript" src="/node_modules/systemjs/dist/system.src.js" ></script>
    <script type="text/javascript" src="/system-config.js" ></script>

        var routerApp = angular.module('routerApp', ['ui.router']);
        routerApp.config(function($stateProvider, $urlRouterProvider) {     
            $urlRouterProvider.otherwise('/home');
            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'partial-home.html'
                })
                .state('home.list', {
                    url: '/list',
                    templateUrl: 'partial-home-list.html',
                    controller: function($scope) {
                        $scope.values = ['Sample1', 'Sample2', 'Sample3'];
                    }
                })
                .state('home.paragraph', {
                    url: '/paragraph',
                    template: 'Hello!!!!! Its Me.'
                })
        });

    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
    </ul>

div class="container"
    div ui-view></div
/div

main.ts

import { upgradeAdapter } from './upgrade-adapter';
import { uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";

uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
upgradeAdapter.bootstrap(document.body, ['routerApp', 'ui.router.upgrade']);

system-config.js

System.config({
            map: {
                'rxjs': '/node_modules/rxjs',
                '@angular': '/node_modules/@angular',
                'app': './app/app',
                'ui-router-ng1-to-ng2': '/node_modules/ui-router-ng1-to-ng2',
                'ui-router-ng2':'/node_modules/ui-router-ng2',
                'angular-ui-router':'/node_modules/angular-ui-router/release'
            },
            packages: {
                'app': { main: './main.js',defaultExtension: 'js' },
                'ui-router-ng2': { main: './ng2.js',defaultExtension: 'js' },
                'ui-router-ng1-to-ng2': { main: 'ng1-to-ng2',defaultExtension: 'js' },
                'angular-ui-router': { main: './angular-ui-router.js', defaultExtension: 'js'   }, 
                '@angular/core': { main: 'index.js', defaultExtension: 'js' },
                '@angular/http': { main: 'index.js', defaultExtension: 'js' },
                '@angular/compiler': { main: 'index.js', defaultExtension: 'js' },
                '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },
                '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' },
                '@angular/common': { main: 'index.js', defaultExtension: 'js' },
                '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },
                '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },
                'rxjs': { defaultExtension: 'js' }
            }
        });

(function(){
    System.import('app')
      .catch(console.error.bind(console));
})();

Error Message

es6-shim.js:2194 # Error: TypeError: $view.viewConfigFactory is not a function
        at eval (http://localhost:9095/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:122:27)
        at Object.invoke (http://localhost:9095/node_modules/angular/angular.js:4625:19)
        at http://localhost:9095/node_modules/angular/angular.js:4433:62
        at forEach (http://localhost:9095/node_modules/angular/angular.js:321:20)
        at createInjector (http://localhost:9095/node_modules/angular/angular.js:4433:3)
        at doBootstrap (http://localhost:9095/node_modules/angular/angular.js:1710:20)
        at Object.bootstrap (http://localhost:9095/node_modules/angular/angular.js:1731:12)
        at eval (http://localhost:9095/node_modules/@angular/upgrade/src/upgrade_adapter.js:348:42)
        at ZoneDelegate.invoke (http://localhost:9095/node_modules/zone.js/dist/zone.js:323:29)
        at Object.NgZoneImpl.inner.inner.fork.onInvoke (http://localhost:9095/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
    Error loading http://localhost:9095/app/app/main.js

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.7",
    "bootstrap": "^3.3.6",
    "ui-router-ng1-to-ng2": "^1.0.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

Please let me know if i miss anything which cause this error message.

[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