@ui-router/angular-hybrid is unavailable

[MrFrankel]

cant access it vis npm.

[claudiuconstantin]

Yup, no @uirouter/angular-hybrid on npm @uirouter Org - https://www.npmjs.com/org/uirouter/ 👎

[christopherthielen]

I'm still in process of renaming the package and updating for angular 4.x.

The latest release package is named ui-router-ng2

[claudiuconstantin]

Can you please post an update here when everything will be ready?

[MrFrankel]

Checked and verified!
Works with Angular 4+.

Thanks guys!!
You rock

[MrFrankel]

Spoke to soon,
Now im getting:

angular.js:14525 Error: No component factory found for UIViewNgUpgrade. Did you add it to @NgModule.entryComponents?

If I add it to entryComponents I get:

Error: No provider for $uiRouter!

My bootstrap code is:
platformBrowserDynamic().bootstrapModule(SiteAppModule).then(platformRef => { const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; let upgradeAdapter = new UpgradeAdapter(SiteAppModule); uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter); upgrade.bootstrap(document.documentElement, ['amplify.site'], {strictDi: true}); });

[christopherthielen]

@MrFrankel can you show me entire bootstrap file, including the Angular (4.x) module?

For reference, here is what I changed to update the sample app to the latest version: ui-router/sample-app-angular-hybrid@e940739

Here is the sample app bootstrap:

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

// Create ngUpgrade adapter
export const upgradeAdapter = new UpgradeAdapter(SampleAppModule);

// Supply ui-router-ng1-to-ng1 with the upgrade adapter.
// This adds glue to the ui-router instance for angular 1 (ng1 hosts the app)
// which allows it to route to ng2 components
uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);

// Register some ng1 services as ng2 providers
upgradeAdapter.upgradeNg1Provider('DialogService');
upgradeAdapter.upgradeNg1Provider('Contacts');

angular.element(document).ready(function () {
  // Manually bootstrap the app with the Upgrade Adapter (instead of ng-app)
  upgradeAdapter.bootstrap(document.body, ['demo']);
});

[MrFrankel]

Sure,

import {NgModule}  from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {TopHeaderComponent} from './navigation/top-header/top-header.component';
import {UpgradeModule} from '@angular/upgrade/static';
import {UserService} from '../amplify/user/user.service';
import {HttpModule, JsonpModule} from '@angular/http';
import {SideNavComponent} from './navigation/side-nav/side-nav.component';
import {trackingServiceProvider} from './ajs-upgrade-providers';
import {UpgradeAdapter} from '@angular/upgrade';
import {Ng1ToNg2Module, uiRouterNgUpgrade} from '@uirouter/angular-hybrid';
import {NavigationService} from './navigation/navigation.service';

declare const window: any;

@NgModule({
  declarations: [
    TopHeaderComponent,
    SideNavComponent
  ],
  imports: [
    Ng1ToNg2Module,
    BrowserModule,
    BrowserAnimationsModule,
    UpgradeModule,
    HttpModule,
    JsonpModule
  ],
  entryComponents: [
    TopHeaderComponent,
    SideNavComponent
  ],
  providers: [
    NavigationService,
    UserService,
    trackingServiceProvider

  ]
})
export class SiteAppModule {
  ngDoBootstrap() {
  }
}

//Called from index.html when DOM is ready
export const bootstrapNG2 = window.bootstrap1 = () => {
  platformBrowserDynamic().bootstrapModule(SiteAppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    let upgradeAdapter = new UpgradeAdapter(SiteAppModule);
    uiRouterNgUpgrade.setUpgradeAdapter(upgradeAdapter);
    upgrade.bootstrap(document.documentElement, ['amplify.site'], {strictDi: true});
  });

};

package.json:

"@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.1",
    "@angular/compiler": "^4.1.1",
    "@angular/core": "^4.1.1",
    "@angular/http": "^4.1.1",
    "@angular/platform-browser": "^4.1.1",
    "@angular/platform-browser-dynamic": "^4.1.1",
    "@angular/router": "^4.1.2",
    "@angular/upgrade": "^4.1.1",
    "@uirouter/angular": "^1.0.0-beta.6",
    "@uirouter/angular-hybrid": "^2.0.0",
    "@uirouter/angularjs": "1.0.3",
    "angular": "^1.6.3",

When I run your bootstrap code I get:

Uncaught TypeError: Cannot read property 'injector' of null

[MrFrankel]

BTW,
The angular docs state that you should bootstrap the app using
platformBrowserDynamic().bootstrapModule.

[christopherthielen]

@MrFrankel we don't (yet) support @angular/upgrade/static. We only support the older ngUpgrade from @angular/upgrade.

I would have preferred to have released version 2.0.0 with support for both. However, I thought the current @angular/upgrade users deserved a release providing ng4 support ASAP. The next version should use @angular/upgrade/static which should also enable AoT hybrid apps.

[christopherthielen]

Closing because the original issue (npm package) is fixed, and we already have an issue to track the lack of @angular/upgrade/static support #26

[MrFrankel]

@christopherthielen I downgraded to using the upgrade adapter as in the sample and it works gr8!

Thanks for the help!