Comments (11)
I'm still in process of renaming the package and updating for angular 4.x.
The latest release package is named ui-router-ng2
from angular-hybrid.
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
from angular-hybrid.
Yup, no @uirouter/angular-hybrid
on npm @uirouter
Org - https://www.npmjs.com/org/uirouter/ 👎
from angular-hybrid.
Can you please post an update here when everything will be ready?
from angular-hybrid.
Checked and verified!
Works with Angular 4+.
Thanks guys!!
You rock
from angular-hybrid.
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}); });
from angular-hybrid.
@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']);
});
from angular-hybrid.
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
from angular-hybrid.
BTW,
The angular docs state that you should bootstrap the app using
platformBrowserDynamic().bootstrapModule.
from angular-hybrid.
@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.
from angular-hybrid.
@christopherthielen I downgraded to using the upgrade adapter as in the sample and it works gr8!
Thanks for the help!
from angular-hybrid.
Related Issues (20)
- Jest test suite failed to run AngularJS v1.x is not loaded! after upgrade from angular 7 to 9 HOT 6
- How to augment all routes with additional resolve using decorator HOT 2
- ui.router.upgrade' is not available! HOT 1
- Angular 9 - optimization: true breaks build HOT 1
- Version 12 causes "Unknown provider" on Angular states HOT 12
- Upgraded AngularJS component renders itself in ui-view HOT 1
- The target entry-point "@uirouter/angular-hybrid" has missing dependencies HOT 2
- Support for angular12 HOT 5
- UIViewNgUpgrade downgradedModule not specified HOT 1
- ngcc fails
- Angular 14 compatibility HOT 6
- Error bootstrapping AppModule Error: Cannot read properties of undefined (reading 'when') HOT 1
- Failure to inject $transition$ into a downgraded ng2 component HOT 9
- Angular 15 compatibility HOT 3
- After update to 15: UI router error TypeError: this.factory is undefined HOT 19
- random error: Cannot find module '@uirouter/angularjs' or its corresponding type declarations. HOT 3
- Add support for v16 in @uirouter/angular-hybrid HOT 3
- After update to v15.0.2 I get this error "Cannot read properties of undefined (reading 'inherit')"
- Wrong NATIVE_INJECTOR_TOKEN import HOT 2
- Add support for v17 in @uirouter/angular-hybrid HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-hybrid.