I'm trying to do a master / detail type view in my Angular2 application. In my main app component, I have the following routes defined:
#Routes([
{ path: '/', component: HomeComponent },
{ path: '/brands/:brandId/...', component: BrandShowComponent },
{ path: '/brands', component: BrandListComponent }
])
I can navigate just fine to /brands where I show a list of Brands. When selecting a specific Brand, I'm trying to show the details of said Brand. In addition, the BrandShowComponent will also have child routes. Note the ... in the above route config. In BrandShowComponent I've defined a child route like so:
#Routes([
{ path: '/regions', component: RegionListComponent }
])
And I've added a <router-outlet></router-outlet> to the template for BrandShowComponent.
As I said, I can view the list of brands, but when I click on a specific brand, I get the following error in the console:
browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): Component 'BrandListComponent' does not have route configuration
I want BrandShowComponent to be the master, not BrandListComponent. I'm unsure what I might have configured incorrectly to make Angular think otherwise. Or if I'm getting bit by a RC issue.
This is a known issue in the current router.
Sort the routes so that the most significant came first:
#Routes([
{ path: '/brands/:brandId/...', component: BrandShowComponent },
{ path: '/brands', component: BrandListComponent }
{ path: '/', component: HomeComponent },
])
Related
I have tips.pdf that I would like to live at /tips.
When a user manually types in /tips I want it to redirect to /tips.pdf, preferably in a new tab.
When I updated my routing module I get Error: Cannot match any routes. URL Segment: 'tips'.
const ROUTES: Routes = [
{
path: '', redirectTo: '/home', pathMatch: 'full'
},
{
path: 'home', component: HomeComponent
},
{
path: 'fun', component: FunComponent
},
{
path: 'tips', redirectTo: '../assets/pdfs/tips.pdf', pathMatch: 'full'
}
]
Is this because I don't have a component? Obviously I don't want to create a component just for a stationary pdf in my asset folder.
It's because you don't have any route maching '../assets/pdfs/tips.pdf'. The first redirection works because home is matching the second entry in ROUTES.
You don't need Angular to do that, you need to add the redirection in your server configuration.
I don't think Angular can do that.
One thing you can try is create a dummy component that opens a url using window.open.
{
path: 'tips', component: FilOpenerComponent
}
export class FilOpenerComponent {
constructor(private router: Router) {
window.open("../assets/pdfs" + this.router.url + ".pdf");
}
}
And you can further generalize this component using query params to know exactly where to look for the file.
Either the current path or redirected path should have a component in Angular.
so as mentioned in one of the answer the logic has to be added in component
Using the last version of angular 2 router (3.0.0-rc.1) and angular 2 (RC5). My router has the following routes:
{ path: 'transport', redirectTo: 'transport/entity-list', pathMatch: 'full'},
{ path: 'transport/entity-list', component: EntityListComponent },
{ path: 'transport/cover-list', component: CoverListComponent },
{ path: 'transport/invoice-list', component: InvoiceListComponent },
{ path: 'transport/damage-list', component: DamageListComponent }
My server (ExpressJS) has the pug library and renders my index as follow:
res.render('index');
I also have the base tag in my index.pug
head
base(href="/")
In MyComponent I also import the ROUTER_DIRECTIVES
When I load the index, everything renders but I get the following error:
Error: Uncaught (in promise): Error: Cannot match any routes: 'index'
From what I understand, angular's router is trying to route index but doesn't see it in the path. So I've tried to add index as a path but get:
Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'MyComponent'
I have two questions:
What am I doing wrong and how can I get rid of this error?
How can I get index load transport/entity-list from the beginning?
You're missing index path on your routing, so what you did is correct.
For your other issue:
Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'MyComponent'
Do you have this defined on your template?
<router-outlet></router-outlet>
You have to add pathMatch: 'full' to your instead of useAsDefault
{ path: 'transport', redirectTo: 'transport/entity-list', pathMatch: 'full'},
I'm trying to do something seemingly simple. I have the following defined:
#Routes([
{ path: '/stores', component: StoresComponent },
{ path: '/stores/new', component: StoresCreateComponent}
])
When I navigate to /stores I display a list of existing stores. I have a link on that page to navigate to a screen to create a new store. However, when I navigate to /stores/new, I get the following:
browser_adapter.ts:78Error: Uncaught (in promise): Component 'StoresComponent' does not have route configuration
I'm pretty new to Angular so I'm not entirely sure what I need to do in order to get a route like that working.
Order routes so that more specific ones come first and less specific ones last. That's a current limitation of the RC.1 router.
#Routes([
{ path: '/stores/new', component: StoresCreateComponent}
{ path: '/stores', component: StoresComponent },
])
I'm using angular new router and configured it as following:
this.$router.config([
{path: '/', component: 'home', as:'home'},
{path: '/home', component: 'home'},
{path: '/home/:type/:id', component: 'home'}
]);
How can I define a default route when the URL isn't mapped in the list?
I'm searching for something similar to "otherwise" option for a default route.
e.g. when user send /home/group I want it to be mapped to default component, currently I'm getting the following error:
Cannot read property 'canonicalUrl' of undefined
I want to use the alternate configuration of React Router: https://github.com/rackt/react-router/blob/1.0.x/docs/guides/basics/RouteConfiguration.md#alternate-configuration
However, I'm having trouble getting redirect to work. I tried this:
const routes = {
childRoutes: [
{ path: '/test', component: Test },
],
component: App,
path: '/',
redirect: {
from: '/',
to: '/test',
},
};
As far as I could tell, there is no documentation for this. Does the functionality exist? How should it be done?
Comparing the sample code in the link you posted, with the sample above (in Preserving URLs), I think both samples refer to setting the same routes (the only difference probably is that the last one uses the Alternate Configuration). And we can infer that the current way of making redirects is using the onEnter function.
For instance, if you want this (using JSX):
<Redirect from="messages/:id" to="/messages/:id" />
And you use the Alternate Configuration, you'll have to write it like this:
{ path: 'messages/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id)
}
}
Update: Your particular case is special, because you want to redirect from /, so you might want to try using IndexRedirect or indexroute.