Using the new router and Angular 1.4, is it possible to define the default component for a particular viewport? For instance, my side and top navs are components and currently I have to define every route like this:
$router.config([
{
path: '/',
components: {
'topbar': 'topbar',
'sidebar': 'sidebar',
'default': 'dashboard'
}
},
{
path: '/notice/new',
components: {
'topbar': 'topbar',
'sidebar': 'sidebar',
'default': 'notice.new'
}
}
]);
As you can see, I have to define the topbar and sidebar components in every route, even though they are exactly the same. Is there a way to tell the new router "Always use this component for this viewport, unless overriden by a particular route"?
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
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 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 },
])
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.