route exception after modify css

[dreambo8563]

after adding the route in this guide. when I modify any css file, I will get the exception.

them command I use: tns livesync android --watch.

I have to Ctrl+C to kill the watch process and restart manually.

JS: Page loaded
JS: BOOTSTRAPPING...
JS: EXCEPTION: Error during instantiation of Router! (PageRouterOutlet -> Router).
JS: ORIGINAL EXCEPTION: Route config should contain exactly one "as" or "name" property.
JS: ORIGINAL STACKTRACE:
JS: Error: Route config should contain exactly one "as" or "name" property.
JS:     at new BaseException (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/facade/exceptions.js:16:23)
JS:     at Object.normalizeRouteConfig (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_config/route_config_normalizer.js:29:15)
JS:     at RouteRegistry.config (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:75:44)
JS:     at /data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:117:72
JS:     at Array.forEach (native)
JS:     at RouteRegistry.configFromComponent (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:117:31)
JS:     at new RootRouter (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router.js:446:23)
JS:     at routerFactory (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router_providers_common.js:23:22)
JS:     at Injector._instantiate (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:786:27)
JS:     at Injector._instantiateProvider (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:715:25)
JS: ERROR CONTEXT:
JS: [object Object]
JS: ERROR BOOTSTRAPPING ANGULAR
JS: EXCEPTION: Error during instantiation of Router! (PageRouterOutlet -> Router).
JS: ORIGINAL EXCEPTION: Route config should contain exactly one "as" or "name" property.
JS: ORIGINAL STACKTRACE:
JS: Error: Route config should contain exactly one "as" or "name" property.
JS:     at new BaseException (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/facade/exceptions.js:16:23)
JS:     at Object.normalizeRouteConfig (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_config/route_config_normalizer.js:29:15)
JS:     at RouteRegistry.config (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:75:44)
JS:     at /data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:117:72
JS:     at Array.forEach (native)
JS:     at RouteRegistry.configFromComponent (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/route_registry.js:117:31)
JS:     at new RootRouter (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router.js:446:23)
JS:     at routerFactory (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/router/router_providers_common.js:23:22)
JS:     at Injector._instantiate (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:786:27)
JS:     at Injector._instantiateProvider (/data/data/org.nativescript.groceries/files/app/tns_modules/angular2/src/core/di/injector.js:715:25)
JS: ERROR CONTEXT:
JS: [object Object]

[tjvantoll]

Thanks for reporting this @dreambo8563. I’ve ran into the same thing a few times and I’m not sure what’s up. Anytime this happens if I start rebuild the app from scratch it works. I need to take some time to play with this a bit more thoroughly on Monday. @hdeshev or @vakrilov might have some ideas too.

[hdeshev]

This is a known issue with nativescript-cli: NativeScript/nativescript-cli#1517

[vakrilov]

You can try using name instead of as when defining routes to avoid the 'Route config should contain exactly one "as" or "name" property.' exception when livesync-ing.
The exception comes form here and the reason probably is that when livesync-ed the same route definitions are used.

[tjvantoll]

Closed by f6409be.

[tjvantoll]

@vakrilov: Success! Thanks! Should I open a bug on the nativescript-angular for the odd behavior when using as, or was I just doing this wrong the whole time? It seems kind of weird to me that everything worked fine with name unless I changed CSS.

[vakrilov]

I'm not sure we can do something about it. It is caused by angular when trying to load a component with route definitions containing as twice. The first time the value form as is passed to name and the second exception is thrown because there are both as and name defined.
It will probably happen in an pure web angular2 if you try to bootstrap two apps, containing the same component, at the same time, but I didn't have the time to investigate enough to file a proper bug report.