We Keep Coding

refreshing a detail page in Aurelia results in blank

I have created a new sample app with aurelia-cli.
A weird behaviour that got me stuck is with routing.
This is my main route.
{
route: "projects",
title: 'Project Section',
name:'project-section',
moduleId: './modules/projects/project-section',
nav: true
}
and this is my project-section file
export class ProjectSection {
configureRouter(config, router) {
config.map([
{ route: '', moduleId: './projects-list', nav: false, title: 'Projects List' },
{ route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
]);
this.router = router;
}
}
now when I open a link like http://myapp.com/projects, it works fine, and if I refresh the page, it still works.
If I click a link to open the detail page http://myapp.com/projects/9348 that also works fine. But on refreshing this detail page, browser goes blank with
GET http://localhost:9000/projects/scripts/vendor-bundle.js net::ERR_ABORTED
error message in console
Am I missing something obvious? Is there a config setting to enable the refreshing of pages with /:id like routes?
The code is here at github aurelia-sample and you clone and run as usual
au run --watch
Thanks for any help
EDIT: does it have anything to do with
config.options.pushState = true;
in the app config?

I don't know if your problem has been resolved. But Yes, it is to do with the pushState being set to true. I myself faced this issue before. It is something to do with how Aurelia loads the JS for the page. I was unable to resolve it (albeit I'll admit I looked only for about 20 mins). But from what I saw you need to configure some setting to make this work.
Ok. This will help http://aurelia.io/docs/routing/configuration#options.
Baiscally:
Add a <base href="http://localhost:9000"> to index.html to redirect loading content from the base url. The rest of the configuration can be as you have kept it.
Also add config.options.root = '/' in your router config

The point that you are missing is that, (IMHO kind of counterintuitively), the subroutes defined by ProjectsSection only come to life once you actually navigate to /projects.
In other words, the following sequence works:
navigate to projects-list component (route of '' relative to the route of the section, that is, projects/ relative to the app)
Refresh that same page
Navigate to a details page.
The reason this sequence works has to do with how Aurelia resolves routes.
It first tries to match your route against the root configuration. It sees that the url starts with projects. So it checks to which component projects leads. It is ProjectSection in your case, therefore it uses that and checks whether it finds a configureRouter method on it. It does, because you've defined one, so it invokes it.
From then on, the route that it will try to match against that configuration is the the original route without the prefix which lead to that component. It was projects/ which lead to ProjectSection, followed by nothing, so the remainder of the route is / which is resolved as per the configuration you've created inside ProjectSection. In your case, that leads to projects-list.
The important part about this is that by performing this sequence, Aurelia gets a chance to invoke the configureRouter method on ProjectSection (since at (2), it navigates once again to projects/ relative to the app root). Therefore, a configuration which can be used against the url will exist.
In the problematic case, if you immediately navigate to /projects/:id, it will be matched against the root level configuration. There is no match, and since reloading counts as a first page load, there is no route to fall back to. That's why you are getting the error.
The important part about this scenario is that, contrary to the former case, the router skips invoking the configureRouter method on ProjectSection. If you set a breakpoint in that method, you will see that it does not get invoked. That's why I commented on is behavior as being counter-intuitive, because the behavior you (and me as well, when I first faced this problem) expect is a fairly common scenario.
I don't know of any official way to resolve this, so my suggestion is that you could try defining a wildcard route on the app level config like so:
{
route: "projects/*",
title: 'Project Section',
name:'project-section',
moduleId: './modules/projects/project-section',
nav: true
}
and see if it works (I am not sure - I've tried to provide you with a reason, but I don't have the means to try to reproduce it at this very moment).

Try adding a redirect route in the ProjectSection configureRouter function like so (taking your example):
export class ProjectSection {
configureRouter(config, router) {
config.map([
{ route: '', redirect: 'list' }, // Redirects to the list route when no specific route in the project section is specified
{ route: 'list', moduleId: './projects-list', nav: false, title: 'Projects List' },
{ route: ':id', moduleId: './project-detail', nav: false, title: 'Project Detail' }
]);
this.router = router;
}
}

Thanks for all the answers posted. I finally resolved the issue. I am still not sure if this is the right way or not but here is the trick that works.
Taking hint from Rud156's and answer from this question How to remove # from URL in Aurelia I just added
<base href="/">
in the index.html file, and everything works as expected.
To further investigate the issue I cloned the aurelia sample contact app
1- when you run the app as it is after cloning, everything works great.
2- if you add
config.options.pushState = true;
in the src/app.js, child routes will stop working.
3- Add
<base href="/">
in the index.html and everything will start working.

Meteor JS Iron Router, route sub directory

I am working on a admin and client portal in Meteor JS using Iron:Router.
I know i can create a route using:
this.route('tasks',{path:'/projects', layoutTemplate: 'adminLayout'});
But is it possible to make a route with a sub directory such as:
this.route('tasks',{path:'/admin/projects', layoutTemplate: 'adminLayout'});
So that way i can also have a sub directory of:
this.route('/admin/projects', {name: 'admin.projects', template: 'projects', layoutTemplate: 'adminLayout'}
and
this.route('/client/projects', {name: 'client.projects', template: 'projects', layoutTemplate: 'adminLayout'}
Thanks for any input.

All the paths you have can coexist in one app quite happily.
The router (or your browser) doesn't have any concept of directories/subdirectories, all it understands are strings and regular expressions. The nesting is purely something we (should) create to enable ourselves to understand how an app/api(/codebase, etc) is structured.
As Sasikanth points out that is not the full error message. However looking at packages/iron_middleware-stack/lib/middleware_stack.js line 31 it's easy to confirm what is happening:
throw new Error("Handler with name '" + name + "' already exists.");
This is within the Router.route function, which is documented here.
Router.route('/post/:_id', {
// The name of the route.
// Used to reference the route in path helpers and to find a default template
// for the route if none is provided in the "template" option. If no name is
// provided, the router guesses a name based on the path '/post/:_id'
name: 'post.show',
// To support legacy versions of Iron.Router you can provide an explicit path
// as an option, in case the first parameter is actually a route name.
// However, it is recommended to provide the path as the first parameter of the
// route function.
path: '/post/:_id',
// If we want to provide a specific RouteController instead of an anonymous
// one we can do that here. See the Route Controller section for more info.
controller: 'CustomController',
// If the template name is different from the route name you can specify it
// explicitly here.
template: 'Post',
// and more options follow
So for the code you included above, you provide explicit paths. Therefore the first parameter is the route name. These must be unique as they are used to lookup the path in the pathFor, urlFor and linkTo helpers. As you are not providing an explicit template option, the name is also used for that, but your code is throwing this exception before it gets that far.
I think what you were trying to achieve is this:
this.route('/projects', {name: 'projects', template: 'tasks', layoutTemplate: 'adminLayout'});
this.route('/admin/projects', {name: 'admin.projects', template: 'tasks', layoutTemplate: 'adminLayout'});
this.route('/client/projects', {name: 'client.projects', template: 'tasks', layoutTemplate: 'adminLayout'});

iron-router does not render template in Meteor

I have installed the atmosphere package iron:router for my meteor application. I am trying to add a simple route like this:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound'
});
Router.route('/', {
name : 'homeIndex'
});
I defined a template:
<template name="homeIndex">
<h1>Test for my meteor application</h1>
</template>
And I add a yield - field to my layoutTemplate:
<template name="layout">
<div class="container">
{{> yield}}
</div>
</template>
But still when I go to '/', I don't see anything of my template.
Also when I'm trying to add another route with another template, it doesn't work. I have installed the package through this command: meteor add iron:router
Can someone please tell me what I'm doing wrong?

If you want to render a template when a user goes to a particular route, you should use this.render('templateName');. In your case, you only defined a named route, but you didn't specify which template to render.
Router.route('/', function () {
this.render('homeIndex');
}, {
name: 'homeIndex'
});

When I looked at my console in the browser, I saw the iron router package was throwing an exception that EJSON was undefined in the javascript of the package. I installed the EJSON package with the command meteor add ejson, and it was fixed! But thanks anyway for the help!

Ember.js Rails Error while loading route:

I'm currently reading the Master Time and Space Ember.js tutorial and trying to build the sample application. I'm building the ember app with rails using the ember-rails gem.
I have followed the instructions for building my index route, controller, model and template. However, my index.hbs template is not being rendered due to this error that I am receiving in the console:
Error while loading route: undefined logToConsole
this function logToConsole is defined within the ember.js file that the gem compiles for you.
My router is defined as app/assets/javascripts/routes/app_router.js
TimeTravel.Router.reopen({
location: "history"
});
TimeTravel.Router.map(function(){
this.route("index", {path: "/"});
});
The index route is defined as app/assets/javascripts/routes/index_route.js
TimeTravel.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('trip');
}
});
The controller app/assets/javascripts/controllers/index_controller.js
TimeTravel.IndexController = Ember.ArrayController.extend({
});
Can someone please explain this error? Or at least point out some good debugging tools for ember. Thanks in advance!

Emberjs rename '/' route

I often used routes with the path '/' to specify them as the default route.
Now I noticed that it didnt work as expected with the link-to helper.
I used this in an older version of emberjs and I think it worked.
So when I have a language route with a dynamic segment which contains a courceCategories route that has the path '/' and use the {{#link-to "language" model}}click{{/link-to}} helper I get the following error:
Assertion failed: The attempt to link-to route 'language' failed (also tried 'language.index'). The router did not find 'language' in its possible routes: 'loading', 'error', 'languages', 'language.loading', 'language.error', 'language.courceCategories', 'index'
Why cant the router resolve this url?
demonstration: http://emberjs.jsbin.com/umeFeBe/2/edit
Thanks

This is a bug in Ember, and it's been reported here.
This PR should fix this, Try with the canary build once the PR is merged.
UPDATE: The PR has been merged, and this works now, check here

That's because you're overriding the language.index value when you do the route / path inside its function. You now need to link to language.courceCategories
<script type="text/x-handlebars" data-template-name="languages">
{{#each this}}
{{#link-to "language.courceCategories" this}}{{id}}{{/link-to}}
{{/each}}
</script>