ui-router / angular-hybrid Goto Github PK
View Code? Open in Web Editor NEWUpgrade an ng1 UI-Router app to a ng1+ng2 hybrid using ng-upgrade
License: MIT License
Upgrade an ng1 UI-Router app to a ng1+ng2 hybrid using ng-upgrade
License: MIT License
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.
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?
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.
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
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"
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>]
Normally, people prevent typescript from compiling their node_modules folder, with good reason.
Unfortunately, your package.json points towards ng1-to-ng2.ts
, which is a typescript file.
This means that anyone using your library must compile it. Ensure you build your library first, to JS, in a dist folder, and then point your package.json to that file.
The issue may very well be https://github.com/ui-router/ng1-to-ng2/blob/master/.gitignore#L3
Hello,
There is someway to inject Angular 2 Resolvers using angular-hybrid?
Thanks in Advanced!
cant access it vis npm.
When a state view routes to an ng2 component, supply BOTH an ng1 and an ng2 ViewConfig. If a ng1 ui-view exists, it will use the ng1 config (and similar for ng2)
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
If a component is in the root module's declarations:
, they can't use uiSref
, uiSrefActive
, etc.
Following the README, I:
$stateProvider
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
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.
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 {
}
`
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 :-)
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!
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).
I can't find a way to make it work with the new way of using the UpgradeAdapter with Angular 2.2.3.
Only states from a lazy loaded module are registered. States in the NgModule being bootstrapped are not registered.
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.
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?
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 ?
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.
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?
Currently if you lazy load an ng2 module, it fails when diffing the parent/child injectors for new values: https://github.com/ui-router/ng2/blob/5f3d731667229bfdf89483d514c0a61f1f725ae3/src/lazyLoad/lazyLoadNgModule.ts#L182-L196
This isn't a problem in standard ui-router-ng2 because those apps all have to have a forRoot()
module.
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.
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))
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)"
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
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?
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.
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>]
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.
Hi,
I have un example projet using ui-router
with ngUpgrade
, but the state jenkins.risques.evaluations.view
is not working : https://github.com/Xen3r0/angular-jenkins
Do you have an idea ?
Thanks
Setup:
Steps to reproduce:
npm init
to a fresh foldernpm 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
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?
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:
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();
});
});
});
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.
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.
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:
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!
Hi,
Is there any intention in upgrading the peer dependencies for this package to include Angular 4?
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
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?
Is the hybrid setup compatible with the new upgrade module (@angular/upgrade/static). Please provide a sample or directions.
Does @uirouter/angular-hybrid
v ^3.0.1
support Angular 2+ or Angular 4+ only?
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.
The build seems to expect to use webpack to bundle the code, but there is no webpack config committed, so npm run bundle
fails.
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
It should probably be renamed from @ui-router/hybrid
in order to account for new ng4
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.