Coder Social home page Coder Social logo

angular-hybrid's Introduction

UI-Router angular-hybrid

Build Status

UI-Router support for Hybrid Angular/AngularJS apps

This module provides ngUpgrade integration with UI-Router. It enables UI-Router to route to both AngularJS components (and/or templates) and Angular components.

Your app will be hosted by AngularJS while you incrementally upgrade it to Angular. With @uirouter/angular-hybrid you can use either an Angular component or an AngularJS component/template as the view in a state definition.

import { Ng2AboutComponentClass } from "./about.ng2.component";

/// ...

$stateProvider.state({
  name: 'home',
  url: '/home',
  component: 'ng1HomeComponent' // AngularJS component or directive name
})

.state({
  name: 'about',
  url: '/about',
  component: Ng2AboutComponentClass // Angular component class reference
});

.state({
  name: 'other',
  url: '/other',
  template: '<h1>Other</h1>', // AngularJS template/controller
  controller: function($scope) { /* do stuff */ }
})

When routing to an Angular component, that component uses the standard Angular directives (ui-view and uiSref) from @uirouter/angular.

When routing to an AngularJS component or template, that component uses the standard AngularJS directives (ui-view and ui-sref) from @uirouter/angularjs.

See the hybrid sample app for a full example.

Getting started

Remove angular-ui-router (or @uirouter/angularjs) from your AngularJS app's package.json and replace it with @uirouter/angular-hybrid. Add the @angular/* dependencies.

dependencies: {
  ...
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/upgrade": "^6.0.0",
   ...
  "@uirouter/angular-hybrid": "^6.0.0",
  ...
}

Remove any ng-app attributes from your main HTML file. We need to use manual AngularJS bootstrapping mode.

Add AngularJS module ui.router.upgrade

  • Add 'ui.router.upgrade' to your AngularJS app module's depedencies
let ng1module = angular.module('myApp', ['ui.router', 'ui.router.upgrade']);

example

Create a root Angular NgModule

  • Import the BrowserModule, UpgradeModule, and a UIRouterUpgradeModule.forRoot() module.
  • Add providers entry for any AngularJS services you want to expose to Angular.
  • The module should have a ngDoBootstrap method which calls the UpgradeModule's bootstrap method.
export function getDialogService($injector) {
  return $injector.get('DialogService');
}

@NgModule({
  imports: [
    BrowserModule,
    // Provide angular upgrade capabilities
    UpgradeModule,
    // Provides the @uirouter/angular directives and registers
    // the future state for the lazy loaded contacts module
    UIRouterUpgradeModule.forRoot({ states: [contactsFutureState] }),
  ],
  providers: [
    // Provide the SystemJsNgModuleLoader when using Angular lazy loading
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },

    // Register some AngularJS services as Angular providers
    { provide: 'DialogService', deps: ['$injector'], useFactory: getDialogService },
    { provide: 'Contacts', deps: ['$injector'], useFactory: getContactsService },
  ]
})
export class SampleAppModuleAngular {
  constructor(private upgrade: UpgradeModule) { }

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [sampleAppModuleAngularJS.name], { strictDi: true });
  }
}

example

Defer intercept

Tell UI-Router that it should wait until all bootstrapping is complete before doing the initial URL synchronization.

ngmodule.config(['$urlServiceProvider', ($urlService: UrlService) => $urlService.deferIntercept()]);

example

Bootstrap the app

  • Bootstrap Angular
  • Angular runs ngDoBootstrap() which bootstraps AngularJS
  • Chain off bootstrapModule() and tell UIRouter to synchronize the URL and listen for further URL changes
    • Do this in the Angular Zone to avoid "digest already in progress" errors.
platformBrowserDynamic()
  .bootstrapModule(SampleAppModuleAngular)
  .then(platformRef => {
    // Intialize the Angular Module
    // get() the UIRouter instance from DI to initialize the router
    const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;

    // Instruct UIRouter to listen to URL changes
    function startUIRouter() {
      urlService.listen();
      urlService.sync();
    }

    platformRef.injector.get<NgZone>(NgZone).run(startUIRouter);
  });

example

Route to AngularJS components/templates

Your existing AngularJS routes work the same as before.

var foo = {
  name: 'foo',
  url: '/foo',
  component: 'fooComponent'
};
$stateProvider.state(foo);

var bar = {
  name: 'foo.bar',
  url: '/bar',
  templateUrl: '/bar.html',
  controller: 'BarController'
};
$stateProvider.state(bar);

Route to Angular components

Register states using either Angular or AngularJS code. Use component: in your state declaration.

var leaf = {
  name: 'foo.bar.leaf',
  url: '/leaf',
  component: MyNg2CommponentClass
};
$stateProvider.state(leaf);

Create Angular Feature Modules (optional)

@NgModule({
  imports: [
    UIRouterUpgradeModule.forChild({
      states: [featureState1, featureState2],
    }),
  ],
  declarations: [FeatureComponent1, FeatureComponent2],
})
export class MyFeatureModule {}

example

Add the feature module to the root NgModule imports

@NgModule({
  imports: [BrowserModule, UIRouterUpgradeModule.forChild({ states }), MyFeatureModule],
})
class SampleAppModule {}

example

Limitations:

Nested Routing

We currently support routing either Angular (2+) or AngularJS (1.x) components into an AngularJS (1.x) ui-view. However, we do not support routing AngularJS (1.x) components into an Angular (2+) ui-view.

If you create an Angular (2+) ui-view, then any nested ui-view must also be Angular (2+).

Because of this, apps should be migrated starting from leaf states/views and work up towards the root state/view.

Resolve

Resolve blocks on state definitions are always injected using AngularJS style string injection tokens.

  • UI-Router for AngularJS injects objects using string tokens, such as '$transition$', '$state', or 'currentUser'.
resolve: {
  roles: ($authService, currentUser) => $authService.fetchRoles(currentUser);
}
  • UI-Router for Angular uses the Transition.injector() API. The resolve function receives the Transition object as the first argument.
  // In Angular, the first argument to a resolve is always the Transition object
  // The resolver (usually) must be exported
  export const rolesResolver = (transition) => {
    const authService = transition.injector().get(AuthService);
    const currentUser = transition.injector().get('currentUser');
    return authService.fetchRoles(currentUser);
  }

  ...

  resolve: {
    roles: rolesResolver
  }

In UI-Router for Angular/AngularJS hybrid mode, all resolves are injected using AngularJS style. If you need to inject Angular services by class, or need to use some other token-based injection such as an InjectionToken, access them by injecting the $transition$ object using string-based injection. Then, use the Transition.injector() API to access your services and values.

import { AuthService, UserToken } from './auth.service';

// Notice that the `Transition` object is first injected
// into the resolver using the '$transition$' string token
export const rolesResolver = function($transition$) {
  // Get the AuthService using a class token
  const authService: AuthService = transition.injector().get(AuthService);

  // Get the user object using an InjectionToken
  const user = transition.injector().get(UserToken);

  return authService.fetchRoles(user).then(resp => resp.roles);
};

export const NG2_STATE = {
  name: 'ng2state',
  url: '/ng2state',
  component: Ng2Component,
  resolve: {
    roles: rolesResolver,
  },
};

onEnter/Exit/Retain

When a state has an onEnter, onExit, or onRetain, they are always injected (AngularJS style), even if the state uses Angular 2+ components or is added to an UIRouterUpgradeModule NgModule.

export function ng2StateOnEnter(transition: Transition, svc: MyService) {
  console.log(transition.to().name + svc.getThing());
}
ng2StateOnEnter.$inject = [Transition, 'MyService'];
export const NG2_STATE = {
  name: 'ng2state',
  url: '/ng2state',
  onEnter: ng2StateOnEnter,
};

Examples

The minimal example of @uirouter/angular-hybrid can be found here: https://github.com/ui-router/angular-hybrid/tree/master/example

A minimal example can also be found on stackblitz: https://stackblitz.com/edit/ui-router-angular-hybrid

A large sample application example with lazy loaded modules can be found here: https://github.com/ui-router/sample-app-angular-hybrid

The same sample application can be live-edited using Angular CLI and StackBlitz here: https://stackblitz.com/github/ui-router/sample-app-angular-hybrid/tree/angular-cli

UpgradeAdapter vs UpgradeModule

Version 2.0.0 of @uirouter/angular-hybrid only supports UpgradeAdapter, which works fine but is no longer in development. Version 3.0.0+ of @uirouter/angular-hybrid only supports UpgradeModule from @angular/upgrade/static, which is what the Angular team actively supports for hybrid mode. Because we dropped support for UpgradeAdapter, current users of @uirouter/angular-hybrid 2.x will have to switch to UpgradeModule when upgrading to 3.x.

angular-hybrid's People

Contributors

christopherthielen avatar dependabot-preview[bot] avatar dependabot[bot] avatar greenkeeper[bot] avatar uirouterbot avatar greenkeeperio-bot avatar amcdnl avatar jonrimmer avatar wawyed avatar ahardin13 avatar Pittan avatar neilellis avatar ngehlert avatar petebacondarwin avatar ly-cultureiq avatar weareoutman avatar

Stargazers

 avatar dbaspider avatar Ilya avatar  avatar Kemal Kenan Calisan avatar Jack Wang avatar Wilson.S.Weng avatar Jordan Berry avatar Vuong Dang avatar Lilit Poghosyan avatar Igor Wolbers avatar Michael Zalla avatar Arjun Suresh avatar Adam Kwiatek avatar Christopher Cortes avatar Jay avatar Andrew avatar Michael Powell avatar Lavdim Xhelili avatar Jason avatar mehdi hambli avatar Artemas Muzanenhamo avatar Richmond  avatar Chen Gen avatar Davide avatar Pradeep Kumar avatar 叶俊青 avatar Yong Zhao avatar Mikhail Kolesnikov avatar Mohammad Mahdi Kabir avatar Hsien Wei avatar Florent CLAPIÉ avatar Robert avatar ahmed avatar Gabe avatar x0rzkov avatar James Fuller avatar  avatar 潘杰 avatar Piotr Fert avatar Alexander Malitsky avatar  avatar Toni D'Angelo avatar Denis T avatar  avatar Swapnil Mhaske avatar Kirill Gromik avatar Oleg Dikusar avatar Amon Keishima avatar Chris Dufour avatar Víctor Collado avatar Oscar Valdes avatar Giovanni Filippi avatar Kamil Maraz avatar  avatar 卢飞鹏 avatar  avatar Adriano Machado avatar P E avatar Piotr Błażejewicz (Peter Blazejewicz) avatar Evgenii Koriakin avatar  avatar Alexander La Bianca avatar The Nameless One avatar Semyon Danilov avatar Jon Repp avatar Andrey Poznyak avatar Ilya Borisov avatar Benoit Jehanno avatar Ben Black avatar Mahammad avatar yangxiaowei avatar Brian avatar GAURAV avatar Ian Corne avatar Benedict Khoo avatar freemember007 avatar  avatar John Ericson avatar Arthur avatar  avatar Owen Buckley avatar Austin Cawley-Edwards avatar Alina Mihai avatar Pramod Sankar Lakshmanan avatar Hazel avatar Ebere Abanonu avatar Josue Rios avatar Juan Antelo-Justiniano avatar Siraj Kakeh avatar Blake McCool avatar Fab avatar Fernando Espinosa avatar Freddy Jimenez avatar Matt Kirchstein avatar Daniel Ramirez avatar Nicolas Gehlert avatar  avatar Peter Henson Valdes II avatar Yohan Lasorsa avatar

Watchers

Eddie Monge Jr avatar James Cloos avatar NetEvolutions avatar Wesley Cho avatar Chris Thielen avatar  avatar Andrew Smirnykh avatar  avatar geekchow avatar  avatar

angular-hybrid's Issues

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.

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

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>]

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.

$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 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.

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: {
  '[email protected]': {
    component: AppComponent
  }
}

won't

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.

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

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.

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?

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!

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.

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 {

}
`

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"

[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)"

[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!

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

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.

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

Project rename.

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

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?

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.

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.

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 :-)

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();
    });
  });
});

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?

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>]

"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.

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

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 ?

Unable to install @uirouter/angular-hybrid with [email protected]

Currently it's not possible to install @uirouter/angular-hybrid via [email protected]. 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).

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?

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?

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?

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

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.

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

Angular 2.0+?

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

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.