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'},
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 have started using "ngNewRouter". In my application, using javascript I need to switch between multiple component. I have used $location.path(path); however it is not working consistent. Following are details.
//Define routes
$router.config([
{path: "/", redirectTo: "userauthentication"}, // The default URL is redirected to userauthentication component.
{path: "/userauthentication", component: "userauthentication"},
{path: "/adminview", component: "adminview"},
{path: "/clubonboarding/:clubid", component: "clubonboarding"},
{path: "/membermanagement", component: "membermanagement"}
]);
$locationProvider.html5Mode(true);
Code which are working:
$location.path("adminview");
Code which is not working:
$location.path("userauthentication");
Its surprise me as it works at few place and doesn't work for others. Am I missing anything here.
Please advice.
Your path is relative an not absolute.
If you are at view /clubonboarding/:clubid and you wanna go to userauthentication the router will resolve the relativ path to /clubonboarding/userauthentication.