Code Monkey home page Code Monkey logo

angular-hybrid's People

Contributors

ahardin13 avatar alcroito avatar amcdnl avatar boxmein avatar christopherthielen avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar greenkeeper[bot] avatar greenkeeperio-bot avatar jonrimmer avatar lukavarga avatar ly-cultureiq avatar neilellis avatar ngehlert avatar petebacondarwin avatar pittan avatar uirouterbot avatar vanhorickanthony avatar wawyed avatar weareoutman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-hybrid's Issues

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

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.

Issue running protractor

I seem to be getting an error while running protractor with angular-hybrid.
Error: Uncaught (in promise): TypeError: Cannot read property \'get\' of undefined

It seems to be coming from:
const url: UrlService = injector.get(UrlService);
where injector is undefined for some reason.

Running browser.ignoreSynchronization = true solves it but breaks our tests.

Any idea why this is?

Cannot find module 'angular' on 'tsc'

when I run the 'tsc' command I get this error:

node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.d.ts(1,26): error TS2307: Cannot find module 'angular'

typings version: 1.4.0
my typings.json file looks like this:

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160914114559",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160928143418"
}
}

๏ฟฝWhat is the proper way of including this library into an Angular project? I see it is constantly updated and it is now on 2.0.1. Does the typings.json matter ?

Any help would be greatly appreciated.

Release 3.1.4 imports @angular/upgrade

In the current release (3.1.4) the file 'lib/angular-hybrid.js' includes the line: import "angular/upgrade";. This must be removed, because it includes the platform-browser-dynamic module in AOT mode which should not happen. I've removed the line for testing and it seems to work. Please remove this import.
lib/angular-hybrid.js should only import angular/upgrade/static

ng2 RC.6: Error: Only selectors matching element names are supported

RC.6 won't import UIRouterLibraryModule into the ngUpgrade bootstrap.
ui-view isn't being downgraded/upgraded, but this error still occurs.

See the ng2 RC.6 issue angular/angular#11280 and the earlier issue explaining the intent of this error message: angular/angular#7026

@UIRouterModule({
  imports: [BrowserModule, Ng1ToNg2Module],
  providers: [
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
  ]
}) class SampleAppModule {}

export const upgradeAdapter = new UpgradeAdapter(SampleAppModule);
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
upgradeAdapter.bootstrap(document.body, ['demo']);
Error: Only selectors matching element names are supported, got: ui-view, [ui-view](โ€ฆ) "Error: Only selectors matching element names are supported, got: ui-view, [ui-view]
    at getComponentInfo (http://localhost:8000/node_modules/@angular/upgrade/bundles/upgrade.umd.js:234:19)
    at eval (http://localhost:8000/node_modules/@angular/upgrade/bundles/upgrade.umd.js:962:60)
    at Array.forEach (native)
    at eval (http://localhost:8000/node_modules/@angular/upgrade/bundles/upgrade.umd.js:961:52)
    at eval (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:9484:21)
    at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:332:29)
    at Object.onInvoke (http://localhost:8000/node_modules/@angular/core/bundles/core.umd.js:8772:45)
    at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:331:35)
    at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:225:44)
    at http://localhost:8000/node_modules/zone.js/dist/zone.js:591:58"

Error since 3.1.4

in our angular 4.x project, since the update to [email protected] we get the following error.

This seems to be a regression caused by 040722c ?

zone.js:993 Uncaught Error: Token must be defined!
    at new ReflectiveKey (core.es5.js:1405) [<root>]
    at KeyRegistry.get (core.es5.js:1452) [<root>]
    at Function.ReflectiveKey.get (core.es5.js:1423) [<root>]
    at ReflectiveInjector_.get (core.es5.js:2489) [<root>]
    at resolveNgModuleDep (core.es5.js:9475) [<root>]
    at NgModuleRef_.get (core.es5.js:10557) [<root>]
    at SafeSubscriber._next (main.ts:138) [<root>]
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238) [<root>]
    at SafeSubscriber.next (Subscriber.js:185) [<root>]
    at Subscriber._next (Subscriber.js:125) [<root>]
    at Subscriber.next (Subscriber.js:89) [<root>]
    at MapSubscriber._next (map.js:83) [<root>]
    at MapSubscriber.Subscriber.next (Subscriber.js:89) [<root>]
    at XMLHttpRequest.onLoad (http.es5.js:1226) [<root>]

$state.go init the component twice

I want to migrate my ui-router Angular 1 application with ngUpgrade and ui-router-ng1-to-ng2

I have a angular 1 state define with a ES6 class component using the ng1-to-ng2 component way

$stateProvider
.state( "accounting/transactions", {
    url: "accounting/transactions",
    parent: "app",
    views: {
      "main": {
        component: AccountingListComponent
      }
    },
    data: {
      pageTitle: "Accounting transactions",
      pageSection: "Accounting",
      pageName: "Transactions"
     }
  })

When calling the state like this from a Angular 2 component:

this.uiRouter.stateService.go("accounting/transactions", null, {reload: true});

or like this from an Angular 1 component

$state.go("accounting/transactions", null, {reload: true});

I can see that my component is call twice because the ngOnInit output twice in the console

FYI, the application use a "app" view has parent and a child "main" view

Error: State 'featureState1' is already defined

Following the README, I:

  • defined featureState1 in $stateProvider
  • defined featureState1 in feature.module.ts via UIRouterModule.forChild()

When I point the browser to the URL set for featureState1, I get Error: State 'featureState1' is already defined.

If I remove featureState1 from $stateProvider, the route doesn't exist and $urlRouterProvider.otherwise('/') gets me back to home.
The same happens if I add the state to the main app module (also in the README) instead.

If I remove UIRouterModule.forChild, then I guess the case for a FeatureModule gets weakened.

Full error:

Error: State 'featureState1' is already defined
    at StateQueueManager.register (http://localhost:30300/vendor.js:88144:21) [<root>]
    at StateRegistry.register (http://localhost:30300/vendor.js:87726:34) [<root>]
    at http://localhost:30300/vendor.js:78936:70 [<root>]
    at Array.forEach (native) [<root>]
    at Object.applyModuleConfig (http://localhost:30300/vendor.js:78936:13) [<root>]
    at http://localhost:30300/vendor.js:106657:883 [<root>]
    at Array.forEach (native) [<root>]
    at n (http://localhost:30300/vendor.js:106657:854) [<root>]
    at DynamicNgUpgradeModuleInjector.get (/DynamicNgUpgradeModule/module.ngfactory.js:131:61) [<root>]
    at DynamicNgUpgradeModuleInjector.get (/DynamicNgUpgradeModule/module.ngfactory.js:166:92) [<root>]
    at DynamicNgUpgradeModuleInjector.getInternal (/DynamicNgUpgradeModule/module.ngfactory.js:407:54) [<root>]
    at DynamicNgUpgradeModuleInjector.NgModuleInjector.get (http://localhost:30300/vendor.js:20963:32) [<root>]
    at ReflectiveInjector_._getByKeyDefault (http://localhost:30300/vendor.js:17007:29) [<root>]
    at ReflectiveInjector_._getByKey (http://localhost:30300/vendor.js:16973:30) [<root>] <ui-view-ng-upgrade name="$default" class="ng-scope" id="NG2_UPGRADE_0_uiViewNgUpgrade_c0">
(anonymous) @ vendor.js:176647
(anonymous) @ vendor.js:173419
invokeLinkFn @ vendor.js:172970
nodeLinkFn @ vendor.js:172462
compositeLinkFn @ vendor.js:171858
publicLinkFn @ vendor.js:171738
(anonymous) @ vendor.js:90700
invokeLinkFn @ vendor.js:172968
nodeLinkFn @ vendor.js:172462
compositeLinkFn @ vendor.js:171858
publicLinkFn @ vendor.js:171738
updateView @ vendor.js:90613
configUpdatedCallback @ vendor.js:90570
configureUIView @ vendor.js:87514
ViewService.sync @ vendor.js:87516
activateViews @ vendor.js:87193
TransitionHook.invokeHook @ vendor.js:84551
TransitionHook.runSynchronousHooks @ vendor.js:84605
transitionSuccess @ vendor.js:84192
processQueue @ vendor.js:178919
(anonymous) @ vendor.js:178935
$eval @ vendor.js:180179
$digest @ vendor.js:179997
(anonymous) @ vendor.js:180218
completeOutstandingRequest @ vendor.js:169679
(anonymous) @ vendor.js:169956
ZoneDelegate.invokeTask @ polyfills.js:28677
Zone.runTask @ polyfills.js:28566
ZoneTask.invoke @ polyfills.js:28747
data.args.(anonymous function) @ polyfills.js:29564

Angular 4.2 cant' find UrlService for listen()

Unhandled Promise rejection: No provider for UrlService! ; Zone: ; Task: Promise.then ; Value: Error: No provider for UrlService!

Something to do with JIT? I have played with multiple providers config on the Angular module but nothing works. I can't seem to get the instance of the UrlService from the injector.

ng1-to-ng2 compatibility with angular 2.4.x

Angular version 2.4.7

While referencing the Ng1toNg2Module in the application module, the Angluar Cli gives an error as ERROR in Ng1ToNg2Module is not an NgModule.

`import { Ng1ToNg2Module } from "ui-router-ng1-to-ng2";

@NgModule({
imports: [
BrowserModule,
HttpModule,
Ng1ToNg2Module
],
declarations: [
AppComponent
],
providers: [
{ provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
],
bootstrap: [
AppComponent
],
entryComponents: [
AppComponent
]
})
export class AppModule {

}
`

Simple App with Ng1-to-ng2 Router

Could you please create a simple but complete app like the hybrid.zip sample with both routing versions in one app, that would be great, because the complex app is a bit too complex :-) for "normal" app developers like me :-)

[Question] rc5 ready?

Sorry if I'm jumping the gun (I know you haven't updated sample-app-ng1-to-ng2 to rc5 yet). Should I be able to use ng1-to-ng2 with angular2.rc5?

I've upgraded my hybrid app to...

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/upgrade": "2.0.0-rc.5",
"ui-router-ng2": "1.0.0-beta.1",
"ui-router-ng1-to-ng2": "1.0.10"

I've created an NgModule (almost an exact copy/paste from quickstart-ng2) and exported the UpgradeAdapter with my module...

export const upgradeAdapter = new UpgradeAdapter(AppModule);

In my angular1 code, I've bootstrapped with my exported upgradeAdapter:

angular.element(document).ready(() => {
  upgradeAdapter.bootstrap(document.body, ['myApp', 'ui.router.upgrade']);
});

Everything compiles without error, and I'm able to get to my angular 1 routes, but I'm now getting a navigation error when trying to get to angular2 routes (worked ok with rc3).

Thanks!

Unable to install @uirouter/angular-hybrid with npm@5

Currently it's not possible to install @uirouter/angular-hybrid via npm@5. The installation fails because the snapshot of @uirouter/angularjs pointed at by this module doesn't compile with the latest typescript (2.4).

@uirouter/angularjs have committed a fix to compile correctly with typescript 2.4. If you point to a more recent commit, this issue should be resolved.

(NB: npm 5 will compile git dependencies so that they can behave like regular npm packages).

How to access $stateParams from component

Thanks for your efforts on making this available.

How can the (ng2+) component access the $stateParams service and $rootScope potentially?

I tried importing StateParams from @uirouter/angular but it seems like that module is not available because angular complains.

Can't run example app

hey, I downloaded the zip, opened git bash in examples folder then run 'npm install' -> 'npm start' and I'm getting:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack     at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:151:19)
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:61:5
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:356:5
4 verbose stack     at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:320:45)
4 verbose stack     at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:354:3)
4 verbose stack     at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:124:5)
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:243:12
4 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack     at tryToString (fs.js:455:3)
4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)
5 verbose cwd C:\angular-hybrid-master
6 error Windows_NT 10.0.14393
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
8 error node v6.9.5
9 error npm  v3.10.10
10 error missing script: start
11 error If you need help, you may report this error at:
11 error     <https://github.com/npm/npm/issues>
12 verbose exit [ 1, true ]

am I missing something to run this?

git dependencies make installation failed behind proxy

our company is behind the proxy, when I try to install angular-hybrid, as the dependencies are git url with snapshot:

"@uirouter/angular": "git://github.com/ui-router/angular#SNAPSHOT-20170612",
"@uirouter/angularjs": "git://github.com/angular-ui/ui-router#SNAPSHOT-20170612",

npm is trying to download directly from github which is disallowed in my company (using nexus proxy server. )

could you please make the dependencies npm only ?

Error when routing Angular 4 components into nested AngularJS ui-views

Affects the following combination of packages:
@ui-router/angular-hybrid 3.1.2
angular 4.3
angularjs 1.5
typescript 2.3

Description:
We have the following app structure:

    <ui-view name="left-menu-outer">
        <ui-view name="left-menu"></ui-view>
    </ui-view>
    <ui-view name="content">
        <ui-view name="center"></ui-view>
        <ui-view name="right"></ui-view>
    </ui-view>

This worked fine with AngularJS components and Angular 4 components that we manually downgraded to AngularJS and registered with the AngularJS $stateRegistry using @uirouter/angularjs v1.0.

Now we are attempting to use @ui-router/angular-hybrid to ease the migration, so that we no longer have to manually downgrade our NG4 components. For simple top-level routing to either left-menu-outer or content this works fine, using either the feature module approach (@NgModule({imports: [UIRouterModule.forChild({states: MY_STATES})]})) or by registering with $stateRegistry. However, when targeting nested ui-views, for instance the following:

{
    name: 'app.showcase',
    url: '/showcase',
    views: {
        'left-menu': {
            component: ShowcaseLeftMenuComponent
        },
        'center': {
            component: ShowcaseComponent
        }
    }
},

the app crashes with the following messages:

angular.js:14199 Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at viewDestroyedError (core.es5.js:8445)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13093)
    at checkAndUpdateView (core.es5.js:12243)
    at callViewAction (core.es5.js:12603)
    at execComponentViewsAction (core.es5.js:12535)
    at checkAndUpdateView (core.es5.js:12244)
    at callWithDebugContext (core.es5.js:13458)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12998)
    at ViewRef_.detectChanges (core.es5.js:10169)
    at static.es5.js:282
(anonymous) @ angular.js:14199
$delegate.(anonymous function) @ log.interceptor.ts:33
(anonymous) @ angular.js:10707
$digest @ angular.js:17854
$apply @ angular.js:18102
(anonymous) @ angular.js:26597
dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549
ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:423
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388
angular.js:14199
TypeError: Cannot read property '$$nextSibling' of null
    at Scope.$digest (angular.js:17864)
    at ChildScope.$apply (angular.js:18102)
    at HTMLAnchorElement.<anonymous> (angular.js:26597)
    at HTMLAnchorElement.dispatch (jquery.js:4737)
    at HTMLAnchorElement.elemData.handle (jquery.js:4549)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at ZoneTask.invokeTask [as invoke] (zone.js:498)
(anonymous) @ angular.js:14199
$delegate.(anonymous function) @ log.interceptor.ts:33
(anonymous) @ angular.js:10707
$apply @ angular.js:18104
(anonymous) @ angular.js:26597
dispatch @ jquery.js:4737
elemData.handle @ jquery.js:4549
ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
ZoneDelegate.invokeTask @ zone.js:423
Zone.runTask @ zone.js:191
ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388
core.es5.js:1020
ERROR Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.5.11/$rootScope/inprog?p0=%24digest
    at angular.js:68
    at beginPhase (angular.js:18357)
    at Scope.$digest (angular.js:17785)
    at static.es5.js:1324
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
defaultErrorLogger @ core.es5.js:1020
ErrorHandler.handleError @ core.es5.js:1080
next @ core.es5.js:4503
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
SafeSubscriber.next @ Subscriber.js:185
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ core.es5.js:3621
(anonymous) @ core.es5.js:3912
ZoneDelegate.invoke @ zone.js:391
Zone.run @ zone.js:141
NgZone.runOutsideAngular @ core.es5.js:3844
onHandleError @ core.es5.js:3912
ZoneDelegate.handleError @ zone.js:395
Zone.runTask @ zone.js:194
ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1370
globalZoneAwareCallback @ zone.js:1388

The last error ($digest already in progress) is repeated approximately 50 times. The errors occur regardless of the contents of the routed components and regardless of whether the states were registered using the feature module approach or $stateRegistry.

Expected behavior:
The Angular 4 component should be able to be routed into the nested ui-view, the same as with AngularJS components.

Is it possible to use NG1 routes and Ng2 routes in one App?

I've tried to get it my old ng1 app working with ng1-to-ng2

I'am using ui router in my old Ng1 app with TypeScript and I've an route.config there and I'Ve created a component there.

      this.$stateProvider
            .state("HalloWelt",
            {
                name: "HalloWelt",
                url: "/HalloWelt",
                component : App.Views.NgTest.HalloWeltComponent.module.name
            });

Then I've created a Ng2 app with ui router for Ng2 that routing within Ng2 works fine so far in an extra ngModule

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { UIRouterModule, Ng2StateDeclaration } from "ui-router-ng2";

import {} from "../../upgradeAdapter"
import { LogSuche } from "./logsuche.component";
import { Logsuchemenue } from "./logsuchemenue.component";
import { Logmonitor } from "./logmonitor.component";

let logMenue: Ng2StateDeclaration = { name: 'logviewer', url: "/logviewer", component: Logsuchemenue };
let logSuche: Ng2StateDeclaration = { name: 'logviewer.logsuche', url: '/logsuche', component: LogSuche };
let logMonitor: Ng2StateDeclaration = { name: 'logviewer.logmonitor', url: '/logmonitor', component: Logmonitor }


@NgModule({
    imports: [ CommonModule, BrowserModule,
        UIRouterModule.forChild({ states: [logMenue, logSuche, logMonitor] }),
    ],
    declarations: [
        LogSuche,
        Logsuchemenue,
        Logmonitor
    ],
})
export class LogviewerModule {
    constructor() {
    }

}

the upgrade adapter looks like this

import { UpgradeAdapter } from '@angular/upgrade';
import { forwardRef } from '@angular/core';
import { AppModule } from "./app.modules";
import { uiRouterNgUpgrade } from "ui-router-ng1-to-ng2";

import {AppComponent} from "./Views/app.component";

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
upgradeAdapter.upgradeNg1Provider('$state');
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);

upgradeAdapter.upgradeNg1Provider(App.Views.NgTest.HalloWeltComponent.module.name);

App.Views.MainApp.ng1App.directive("app", <any>upgradeAdapter.downgradeNg2Component(AppComponent));

and my AppModule (root module)

import { forwardRef, NgModule, NgModuleFactoryLoader, SystemJsNgModuleLoader, Inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UIRouterModule, UIRouter } from "ui-router-ng2";
import { Ng1ToNg2Module } from "ui-router-ng1-to-ng2";

import { AppComponent } from "./Views/app.component";
import { LogviewerModule } from "./Views/LogViewer/_logviewer.modules";

@NgModule({
    imports: [
        BrowserModule,
        Ng1ToNg2Module,
        LogviewerModule,
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
    ]
})
export class AppModule {

    constructor( @Inject(UIRouter) router: UIRouter) {
       router.urlRouterProvider.otherwise('/logviewer/logsuche');
    }
}

my application boot file

import { upgradeAdapter } from "./upgradeAdapter";
upgradeAdapter.bootstrap(document.body, ['app.main', 'ui.router.upgrade']);

and my main Menue Navigation looks like this

  <li>
    <a uiSref="logviewer.logsuche" title="Logviewer">Logviewer</a>
 </li>
  <li>
      <a ui-sref="HalloWelt">Hallo Welt</a>
 </li>

the Navigation for "logviewer.logsuche" works fine which is defined in my Ng2 routing module but the "HalloWelt" is not working, its not detected because its not generating a link for this ui-sref.
I am missing something or what I am doing wrong here? Is it even possible to use ng1 routings and ng2 routings in the same app or did I have to compare them in one place in ng1 or ng2?

[Improvement] uiSref directives in ng2 components inside ng1

Per my convo with @christopherthielen, this project does not allow you to have the ability to use ng2 ui-router directives inside a ng2 component that has been downgraded.

Example

bootstrap.js

import { UpgradeAdapter } from '@angular/upgrade';
import { uiRouterNgUpgrade } from 'ui-router-ng1-to-ng2';

export const adapter = new UpgradeAdapter();
uiRouterNgUpgrade.setUpgradeAdapter(adapter);

Component.js

import { UIROUTER_DIRECTIVES } from 'ui-router-ng2';

@Component({
  selector: 'search',
  directives: [ UIROUTER_DIRECTIVES ]
})
export class Search {}

module.js

import angular from 'angular';
import { adapter } from '../adapter.js';

import { Search } from './Search.js';
import configState from './state.js';

export default angular
  .module('search', [])
  .config(configState)
  .directive('searchPage', adapter.downgradeNg2Component(Search))

Results

Trying to do this results in the following error

"Error: DI Exception at NoProviderError.BaseException [as constructor] (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/facade/exceptions.js:17:23) at NoProviderError.AbstractProviderError [as constructor] (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_exceptions.js:39:16) at new NoProviderError (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_exceptions.js:75:16) at ReflectiveInjector_._throwOrNull (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_injector.js:776:19) at ReflectiveInjector_._getByKeyDefault (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_injector.js:804:25) at ReflectiveInjector_._getByKey (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_injector.js:767:25) at ReflectiveInjector_.get (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/di/reflective_injector.js:576:21) at ElementInjector.get (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/linker/element_injector.js:23:48) at DebugAppView._View_SearchPage0.createInternal (SearchPage.template.js:147:99) at DebugAppView.AppView.create (http://localhost:8080/jspm_packages/npm/@angular/[email protected]/src/linker/view.js:66:21)"

It seems that the $stateprovider's resolve map is not respected

I have

.config(/@ngInject/($stateProvider) => {

    $stateProvider.state('login', {
        url: '/login',
        views: {
            main: {
                ....
            },
            navigation: {
               ...
            }
        },
        resolve : {
            langKeys: /*@ngInject*/ (languageService) => {
                languageServie.loadAllLanguageKeys(),
            },
        }
    });

The languageServie get's called. The services loads the keys from the backend, but it does not wait. The view is already displayed. We use the resolve map a lot in our application. And need a way to get this working. Any ideas?
Thanks

Uncaught ReferenceError: System is not defined

I think I am getting the above error when I try to migrate an existing Meteor app which uses CommonJS as the module system rather than SystemJS. Is it possible to make it work without systemJS?

"No provider for UrlService" error since version 3.1.3 (Angular CLI based app in AOT mode)

I've got hybrid app based on Angular CLI. When running app in AOT mode (ng serve -o --aot=true) when this piece of code is run:

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(platformRef => {
            const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
            upgrade.bootstrap(document.body, ['app'], {strictDi: false});

            const url: UrlService = platformRef.injector.get(UrlService);
            url.listen();
            url.sync();
    });

I am getting:
"Unhandled Promise rejection: No provider for UrlService! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for UrlService!"

Both AOT/JIT version works fine with version 3.1.2. Version 3.1.3/3.1.4 works only in JIT mode.

Are transition hooks supported?

Trying to implement "Protect individual states" from angular-ui/ui-router#2964

The transition hook function I define gets called (a trusty console.log('QUAAACK!') gets printed), but I'm unable to pass the expected parameters like transition:

Error: [$injector:unpr] Unknown provider: transitionProvider <- transition
http://errors.angularjs.org/1.4.8/$injector/unpr?p0=transitionProvider%20%3C-%20transition
    at :30300/vendor.js:164195:13 [<root>]
    at :30300/vendor.js:168461:20 [<root>]
    at Object.getService [as get] (vendor.js:168609) [<root>]
    at :30300/vendor.js:168466:46 [<root>]
    at getService (vendor.js:168609) [<root>]
    at Object.invoke (vendor.js:168641) [<root>]
    at decoratedNg1Hook (vendor.js:89900) [<root>]
    at :30300/vendor.js:87284:18 [<root>]
    at TransitionHook.invokeHook (vendor.js:84551) [<root>]
    at :30300/vendor.js:84204:62 [<root>]
    at processQueue (vendor.js:178919) [<root>]
    at :30300/vendor.js:178935:28 [<root>]
    at Scope.$eval (vendor.js:180179) [<root>]
    at Scope.$digest (vendor.js:179997) [<root>]

Unit test fails "No provider for $uiRouter"

I've read through https://github.com/ui-router/ng1-to-ng2 and my app is working great, ng1 routing still works and now I can use uiSref in my ng2 component. But my unit test fails for the ng2 component that is using uiSref.

Here's the code for the unit test and the app.module
https://gist.github.com/miked1090/d6a2e99f8e3dcaa6f27a9b2b7d5840a4

In the test.component.html there's an uiSref, if I comment it out the test runs fine, otherwise it fails with
"No provider for $uiRouter".

This is also a component that is not registered with the router, it's just a small component that is being used on the page.

Any help would be much appreciated, thanks.

Edit: I made some changes and removed importing AppModule in the spec file and instead declared the component in there. This fixes the issue of "No provider for $uiRouter", but now I get an error saying [uiParams] is not a valid attribute for the 'a' tag.

Error when npm installing @uirouter/angular-hybrid

Setup:

  • Npm version: 5.3.0
  • Node version : 8.2.1

Steps to reproduce:

  1. npm init to a fresh folder
  2. npm i @uirouter/angular-hybrid

I'm getting the following error output:

npm ERR! prepareGitDep 1>
npm ERR! prepareGitDep > [email protected] install e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c\node_modules\phantomjs-prebuilt
npm ERR! prepareGitDep > node install.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep PhantomJS not found on PATH
npm ERR! prepareGitDep Download already available at C:\Users\CLAUDI~1.CON\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
npm ERR! prepareGitDep Verified checksum of previously downloaded file
npm ERR! prepareGitDep Extracting zip contents
npm ERR! prepareGitDep Removing e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c\node_modules\phantomjs-prebuilt\lib\phantom
npm ERR! prepareGitDep Copying extracted folder C:\Users\CLAUDI~1.CON\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1500645198450\phantomjs-2.1.1-windows -> e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c\node_modules\phantomjs-prebuilt\lib\phantom
npm ERR! prepareGitDep Writing location.js file
npm ERR! prepareGitDep Done. Phantomjs binary available at e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] install e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c\node_modules\@uirouter\core
npm ERR! prepareGitDep > node ./migrate/migratewarn.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] install e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c
npm ERR! prepareGitDep > node migrate/migratewarn.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] prepare e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c
npm ERR! prepareGitDep > npm run package
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] package e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c
npm ERR! prepareGitDep > npm run clean && npm run build && npm run bundle
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] clean e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c
npm ERR! prepareGitDep > shx rm -rf lib lib-esm _doc build release *.log
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @uirouter/[email protected] build e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-86399d2c
npm ERR! prepareGitDep > tsc && tsc -m es6 --outDir lib-esm && npm run fixdts
npm ERR! prepareGitDep
npm ERR! prepareGitDep src/stateFilters.ts(19,37): error TS2345: Argument of type '{ relative?: boolean; }' is not assignable to parameter of type '{ relative?: string | StateDeclaration | StateObject; }'.
npm ERR! prepareGitDep   Types of property 'relative' are incompatible.
npm ERR! prepareGitDep     Type 'boolean' is not assignable to type 'string | StateDeclaration | StateObject'.
npm ERR! prepareGitDep src/stateFilters.ts(38,43): error TS2559: Type 'Obj' has no properties in common with type 'TransitionOptions'.
npm ERR! prepareGitDep src/statebuilders/views.ts(100,25): error TS2345: Argument of type 'Promise<{ template: any; }> | Promise<{ component: any; }>' is not assignable to parameter of type '{ template: any; } | PromiseLike<{ template: any; }>'.
npm ERR! prepareGitDep   Type 'Promise<{ component: any; }>' is not assignable to type '{ template: any; } | PromiseLike<{ template: any; }>'.
npm ERR! prepareGitDep     Type 'Promise<{ component: any; }>' is not assignable to type 'PromiseLike<{ template: any; }>'.
npm ERR! prepareGitDep       Types of property 'then' are incompatible.
npm ERR! prepareGitDep         Type '<TResult1 = { component: any; }, TResult2 = never>(onfulfilled?: (value: { component: any; }) => ...' is not assignable to type '<TResult1 = { template: any; }, TResult2 = never>(onfulfilled?: (value: { template: any; }) => TR...'.
npm ERR! prepareGitDep           Types of parameters 'onfulfilled' and 'onfulfilled' are incompatible.
npm ERR! prepareGitDep             Types of parameters 'value' and 'value' are incompatible.
npm ERR! prepareGitDep               Type '{ component: any; }' is not assignable to type '{ template: any; }'.
npm ERR! prepareGitDep                 Property 'template' is missing in type '{ component: any; }'.
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This project has been deprecated for "npm install es-module-loader" based on the newer loader spec.
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 2
npm ERR! prepareGitDep npm ERR! @uirouter/[email protected] build: `tsc && tsc -m es6 --outDir lib-esm && npm run fixdts`
npm ERR! prepareGitDep npm ERR! Exit status 2
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the @uirouter/[email protected] build script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_logs\2017-07-21T13_53_32_114Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 2
npm ERR! prepareGitDep npm ERR! @uirouter/[email protected] package: `npm run clean && npm run build && npm run bundle`
npm ERR! prepareGitDep npm ERR! Exit status 2
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the @uirouter/[email protected] package script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_logs\2017-07-21T13_53_32_305Z-debug.log
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 2
npm ERR! prepareGitDep npm ERR! @uirouter/[email protected] prepare: `npm run package`
npm ERR! prepareGitDep npm ERR! Exit status 2
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the @uirouter/[email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_logs\2017-07-21T13_53_32_534Z-debug.log
npm ERR! prepareGitDep
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! A complete log of this run can be found in:
npm ERR!     e:\Users\claudiu.constantin\AppData\Roaming\npm-cache\_logs\2017-07-21T13_53_50_681Z-debug.log

I attached the log file.
2017-07-21T13_53_50_681Z-debug.txt

Error importing angular in ng1-to-ng2

There seems to be an issue importing angular in the ng1-to-ng2.js file. I'm using systemjs with the following config file:

(function (global) {
 System.config({
    baseUrl: 'app',
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    meta: {
      'npm:angular/angular': {format: 'global', exports: 'angular'},
      'ui-router-ng2': {format: 'cjs'},
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app/ng2Components',
      // 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':                   'npm:angular/angular.js',
      'angular-ui-router':         'npm:angular-ui-router/release/angular-ui-router.js',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      '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',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

Here is the full error I am getting:

(index):47 Error: (SystemJS) angular.module is not a function
    TypeError: angular.module is not a function
        at Object.module.exports (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:86:34)
        at __webpack_require__ (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:36:30)
        at c (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:56:18)
        at eval (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:59:10)
        at Object.eval (http://localhost:3000/app/ng2Components/ng2app.module.js:15:30)
    Evaluating http://localhost:3000/app/ng2Components/ng2app.module.js
    Evaluating http://localhost:3000/app/ng2Components/main.js
    Error loading http://localhost:3000/app/ng2Components/main.js
        at Object.module.exports (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:86:34)
        at __webpack_require__ (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:36:30)
        at c (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:56:18)
        at eval (http://localhost:3000/node_modules/ui-router-ng1-to-ng2/ng1-to-ng2.js:59:10)
        at Object.eval (http://localhost:3000/app/ng2Components/ng2app.module.js:15:30)
    Evaluating http://localhost:3000/app/ng2Components/ng2app.module.js
    Evaluating http://localhost:3000/app/ng2Components/main.js

The app uses script tags to add all of the angular 1 files, could this be causing the issue?

Angular Hybrid application bootstrapping fails with Protractor

I tried to test an Angular-Hybrid application with Protractor, but bootstrapping fails.
After that I tried to test the Sample Angular-Hybrid application with Protractor, but it failed with the same error:

Unhandled Promise rejection: Cannot read property 'get' of undefined ; Zone:  ; Task: Promise.then ; Value: TypeError: Cannot read property 'get' of undefined
    at Object.getUIRouter (angular-hybrid.js:138)
    at SampleAppModuleAngularInjector.get [as __uiRouter_37] (angularModule.ngfactory.ts:191)
    at SampleAppModuleAngularInjector.get [as _UIRouter_38] (angularModule.ngfactory.ts:195)
    at SampleAppModuleAngularInjector.getInternal (angularModule.ngfactory.ts:346)
    at SampleAppModuleAngularInjector.NgModuleInjector.get (core.es5.js:3577)
    at main.ts:51
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:141)
    at zone.js:818
    at ZoneDelegate.invokeTask (zone.js:424) TypeError: Cannot read property 'get' of undefined
    at Object.getUIRouter (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/sampleapp.js:448:21)
    at SampleAppModuleAngularInjector.get [as __uiRouter_37] (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/sampleapp.js:867:48)
    at SampleAppModuleAngularInjector.get [as _UIRouter_38] (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/sampleapp.js:877:74)
    at SampleAppModuleAngularInjector.getInternal (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/sampleapp.js:1184:24)
    at SampleAppModuleAngularInjector.NgModuleInjector.get (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/vendor.bundle.js:4928:44)
    at https://ui-router.github.io/sample-app-angular-hybrid/_bundles/sampleapp.js:2444:24
    at ZoneDelegate.invoke (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/vendor.bundle.js:52243:26)
    at Zone.run (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/vendor.bundle.js:51993:43)
    at https://ui-router.github.io/sample-app-angular-hybrid/_bundles/vendor.bundle.js:52670:57
    at ZoneDelegate.invokeTask (https://ui-router.github.io/sample-app-angular-hybrid/_bundles/vendor.bundle.js:52276:31)

Sample Protractor config to reproduce the problem:

  • Protractor version 5.1.2
  • webdriver-manager version 12.0.6

config.js:

exports.config = {
  //The address of a running selenium server.
  seleniumAddress: 'http://localhost:4444/wd/hub',
  //Here we specify the name of the specs files.
  specs: ['testspec.js']
}

testspec.js

describe('angularjs homepage', function() {
  it('should have a title', function() {
    browser.get('https://ui-router.github.io/sample-app-angular-hybrid/#!/mymessages/inbox/5648b50d5d8be25776881a3f');

    browser.wait(function() {
      return $('.container').isPresent(); // keeps waiting until this statement resolves to true
    }).catch( () => {
    	browser.pause();
    });
  });
});

Is angular-hybrid compatible with AOT?

In our angularjs / angular hybrid application we use ui-router and it works great when using JIT. Now I am trying to make it work with AOT and all my effort seem to fail. First I tried using rollup and rollup for some reason fails to resolve angular-hybrid package. I then tried to make the application work using webpack, and while the bundling completed successfully, the states that I define inside angular 2 modules do not seem to be registered in the stateRegistry. Am I doing something completely wrong? Should this be working? If it should be working, I will try to reproduce it using a plunker.

require statements not working in ng1-to-ng2.js

lines 22-25 are throwing an error for my application.

var angular = require("angular");
var core_1 = require("@angular/core");
var angular_ui_router_1 = require("angular-ui-router");
var ui_router_ng2_1 = require("ui-router-ng2");

none of these are successful.

Ng1ToNg2Module export missing

My app is bundled with webpack and I've noticed that the imports are a little wonky.

Specifically, Ng1ToNg2Module seems to be missing from ng1-to-ng2.min.js. I have to go to the non-minified source to get it.

import { Ng1ToNg2Module } from 'ui-router-ng1-to-ng2/ng1-to-ng2.js';

When I log everything, it seems that Ng1ToNg2Module is missing:

import * as ng1ToNg2 from 'ui-router-ng1-to-ng2';
console.log(ng1ToNg2);

image

Not playing well with ngAnnotate

Hi, so I've been working on migrating an application to Angular and this week I converted an ng1 page that had some child routes. Originally, the state definition was using the template property, but I changed it to use component instead. This allowed child routes to be loaded in the component, and everything was working great until it was ran with the prod build. I started getting the following error when trying to navigate to that page.

Error: $injector:unpr Unknown Provider Unknown provider: function AccountSettingsComponent() { }DirectiveProvider <-

After messing with webpack a bit, I found the issue is caused when ngAnnotate is ran and when the component property is being used in the state definition.

Is this a known issue and if so is there a workaround?

Thanks!

Having trouble building my app using web pack. Please let me if i am missing any thing here.

ERROR in [at-loader] node_modules\angular-ui-router\lib\services.d.ts:15:50
Cannot find name 'IRootScopeService'.

ERROR in [at-loader] node_modules\angular-ui-router\lib\templateFactory.d.ts:81:35
Cannot find name 'IAugmentedJQuery'.

ERROR in [at-loader] node_modules\ui-router-ng1-to-ng2\ng1-to-ng2.ts:10:46
Module '/node_modules/ui-router-ng2/lib/index"' has no exported member 'UIRouterRx'.

ERROR in [at-loader] node_modules\ui-router-ng1-to-ng2\ng1-to-ng2.ts:248:11
Property 'viewConfigFactory' does not exist on type 'ViewService'.

ERROR in [at-loader] node_modules\ui-router-ng1-to-ng2\ng1-to-ng2.ts:252:11
Property 'viewConfigFactory' does not exist on type 'ViewService'.

ERROR in [at-loader] node_modules\ui-router-ng1-to-ng2\ng1-to-ng2.ts:253:45
Supplied parameters do not match any signature of call target.
Child html-webpack-plugin for "index.html":
+ 4 hidden modules

lazyLoad and onBefore/onEnter for angular2/4/5?

Hello, I'm using angular-hybrid successfully.

However now we wanted to create Loading Screens for our lazyLoaded Angular4 Modules. That somehow did not work.
We tried a global Transition Service on angularjs (however that is never called, no matter what the priority is):

   // angularjs code
    $transitions.onBefore({ to: 'a.**'}, (transition: Transition) => {
      // if authentication was successfull return true or Promise<true>
      // if it failed either return false / Promise<false> or a new Promise<state>
      console.log('Transition onBefore:', transition);
      transition.injector().get('Loading').show = true;
      return true;
    }, {priority: 1});

and also a onEnter hook directly on the lazyLoaded module:

// angular code
export function onEnterLazyLoad(transition: Transition) {
  console.log('onEnterLazyLoad')
  const loadingService = transition.injector().get<LoadingService>('LoadingService');
  loadingService.show = true;
  return true;
}
 {
    name: 'analysis.**',
    url: '/analysis',
    loadChildren: './lazy/analysis/analysis.module#AnalysisModule',
    onEnter: onEnterLazyLoad,
    data: { requiresAuth: false }
  },

However none works, only onSuccess/onError is called onError is called since the transition will actually be forwarded and then onSuccess is called. But under no circumstances is onEnter or onBefore called.

Any ideas?

Angular 2.0+?

Does @uirouter/angular-hybrid v ^3.0.1 support Angular 2+ or Angular 4+ only?

Relative state navigation not working

First off, I can't seem to get a plunker working with angular-hybrid so I'm not able to demonstrate the issue fully. If anyone can provide me with a base that would be great!

The issue I'm seeing is that in angularjs relative children links stop working once inside one of the children.

Example

<a ui-sref='.one'>One</a>
<a ui-sref='.two'>Two</a>
<a ui-sref='.three'>Three</a>

When the current state is parent clicking on any one of those links works as expected. But once the state becomes parent.one clicking on the other links results in no behavior. No error. No nothing.

When trying to debug this myself, I tried moving the state movement into the parent controller and found that I need to actually prepend the links with ^. If in parent.one and I call $state.go('^.three') it strangely works. So it's seeming like the system is trying to look at the relative state from the current one instead of the one that the ui-sref is defined in or that the $state.go is called in.

Missing webpack config?

The build seems to expect to use webpack to bundle the code, but there is no webpack config committed, so npm run bundle fails.

named views?

does this project support named views like the base ui-reouter project does? I cant seem to get a component injected into a ui-view with a name eg

views: {
  '@home': {
    component: AppComponent
  }
}

works but

views: {
  'viewName@home': {
    component: AppComponent
  }
}

won't

Project rename.

It should probably be renamed from @ui-router/hybrid in order to account for new ng4

angular-hybrid.d.ts(1,23): error

Hi!

ERROR in node_modules/@uirouter/angular-hybrid/lib/angular-hybrid.d.ts(1,23): error TS2688: Cannot find type definition file for 'angular'.

windows 10
Node v8.9.0
npm 5.5.1
AngularJs 1.6.6
angular-cli 1.5.0
Angular 5.0.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.