When im logged in, and navigate to otherpage or login i get the following error:
EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'customComponent'
Error: Cannot find primary outlet to load 'customComponent'
But when im not logged in, navigating works.
I also noticed that if i remove one of the router-outlets the navigation will work. Lets say i remove the router-outlet in loggedin, the navigation within user.username will work as normal.
How come?
How can i make it work as it should? if not logged in, show router outlet there, else if im online, show it somewhere else?
Code:
<div *ngIf="user.username">
<a routerLink="/murder" routerLinkActive="active">Murder</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
<div>
<router-outlet></router-outlet>
</div>
</div>
<div *ngIf="loggedin == false">
<a routerLink="/murder" routerLinkActive="active">Murder</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
// other things
<div>
<router-outlet></router-outlet>
</div>
</div>
Update:
i made the router-outlet in login to:
<router-outlet name="regular"></router-outlet>
and outside:
<router-outlet name="aux"></router-outlet>
and changed my routing:
path: 'murder',
component: MurderComponent,
outlet: 'regular'
but when i navigate i get:
EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'murder'
how come?
full code routing:
RouterModule.forRoot([
{
path: 'login',
component: LoginhandlerComponent,
outlet: 'aux'
},
{
path: 'murder',
component: MurderComponent,
outlet: 'regular'
},
]
)
You need add outlet to your router link. Try like this:
<a [routerLink]="['/', {outlets: {'regular': 'murder'}}]" routerLinkActive="active">Murder</a>
Related
I'm unable to get a layout view to be properly filled with the view-ports I'm specifying in the route config. I have a route "styleguide" which should use the "sidebar" layout, filling the "sidebar" router-view with "sidebar.html" and the "content" router-view with "content.ts / html"
app.ts
export class App {
configureRouter(config: RouterConfiguration, router: Router) {
config.map([{
route: "styleguide",
name: "styleguide",
layoutView: "layout/sidebar.html",
viewPorts: {
sidebar: { moduleId: "styleguide/sidebar.html" },
content: { moduleId: "styleguide/index" },
}
}]);
}
}
app.html
<template>
<router-view layout-view="layout/default.html"></router-view>
</template>
layout/default.html (not used in this example)
<template>
<router-view></router-view>
</template>
layout/sidebar.html
<template>
<router-view name="sidebar"></router-view>
<router-view name="content"></router-view>
</template>
styleguide/sidebar.html
<template>
SIDEBAR!!
</template>
styleguide/index.ts
export class Index { }
styleguide/index.html
<template>
CONTENT
</template>
Issues:
"There was no router-view found in the view for styleguide/sidebar.html." -- Although I have specified the router-view name, etc.
I do have another route which does not specify a layoutView, and thus uses the default. This only works when I replace the router-view element in layout/default.html with slot. I tried to use slots in both layouts but the sidebar layout gives me the same error.
The error you got is because of your app.html doesn't support viewPorts. There is only one <router-view/> with the default name, so with your route configuration with 2 viewports, it failed with the above error.
Layout, according to the documentation, seems like a way to achieve slot like behavior for your routes, not a place to put <router-view/> to me, it seems.
I want to create a navigation panel with tabs, I'm using Bulma, I'll show an example from the documentation.
I'm using routing for the navigation of the project, but from my Matches component, I want to call a subcomponent from each tab.
<div class="tabs">
<ul>
<li class="is-active"><a>Upcoming</a></li>
<li><a>Past</a></li>
</ul>
</div>
Working like this:
From the matches component call a subcomponent app-upcoming and app-past
<div class="upcoming">
<app-upcoming></app-upcoming>
</div>
<div class="past">
<app-past></app-past>
</div>
Use the router-outlet to specify where to display the route components:
https://angular.io/tutorial/toh-pt5#add-routeroutlet
When you use a route component, like this from the documentation.
import { HeroesComponent } from './heroes/heroes.component';
const routes: Routes = [
{ path: 'heroes', component: HeroesComponent }
];
The component will get loaded into the router-outlet when the path matches heroes. I'd recommend reading the routing documentation and following it along.
It is super easy you just go with router. Take a look of https://angular.io/guide/router.
I'm new to angular and starting to get the hang of routing and components. However I have a question regarding:
How I can navigate to a second page (component) and display only that content and not just load component data into <router-outlet></router-outlet>.
First page component
Second page component
When I click the button I want the whole page to display the second component data only. I basically would like to know how I can do whole page navigation in Angular 4.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ApplyComponent } from './apply/apply.component';
import { RouterModule, Routes } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
ApplyComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'apply', component: ApplyComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.componenter.html
<div class="container">
<br><br>
<h1 class="header center orange-text">First page</h1>
<div class="row center">
</div>
<div class="row center">
<a
routerLink="/apply"
class="btn waves-effect waves-light"
type="submit"
name="action">
Second page
</a>
</div>
<br><br>
</div>
<router-outlet></router-outlet>
apply.component (second page)
<div class="container">
<br><br>
<h1 class="header center orange-text">Second page</h1>
<div class="row center">
</div>
<div class="row center">
<a
routerLink="/"
class="btn waves-effect waves-light"
type="submit"
name="action">
Back
</a>
</div>
<br><br>
</div>
If you have any questions or need clarification don't hesitate to ask!
Thanks beforehand!
/E
In Angular, you can nest one component into another thereby keeping the parent component and then loading the child component within the parent. Components can also exist without being nested into another. Where you declare your component tags really matters.
Let's say we have site which has a navigation bar we want to show on all pages. First of all, a primary component (named app.component) which usually has the selector name <app-root></app-root> (that is if you create your angular project using the Angular cli) is inserted into the index.html, which loads the app.component when the application starts. Now, since we want to show the navbar on all pages, you can create a navbar component and place it's selector tags in the app.component.html (which is the view for app component) and also place your <router-outlet></router-outlet> . Since the app.component is the parent for all the other components, the navbar will show on every other component. Now, what if we can don't want the navbar to show on every component? Then we do the opposite, we don't place <navbar></navbar> in the root. We place it in the component where we want it to show and then every other child component will show it too. Now, every component that is placed in the app.component won't show the navbar
So in short, if you want to 'display the second component data only', make it a parent component. Hope I answered your question.
You need a route entry for / like shown in
RouterModule.forRoot([
{
path: '', component: DummyComponent, pathMatch: 'full',
path: 'apply', component: ApplyComponent
}
])
for this you need some component (like DummyComponent) that might not have any content in the view. It is used just to satisfy the router.
pathMatch: 'full' is required for routes with an empty path '' and no child routes.
your app-root html and parent component will always display; what you need is the components of your front page in its own component.
> app-component (always displays) //the parent
> child components
> Home
> About
> Products
> ...
your router can then route/display each component (using a navbar in the parent)
Here is my error:
core.es5.js:1020 ERROR Error: Uncaught (in promise):
Error: Cannot match any routes. URL Segment: 'home'
This is the code from the view.html:
<div class="container">
This is the main app;
<a routerLink="second">Click to go to second</a>
<a routerLink="third">Click to go to third</a>
<a routerLink="app">Go to Home</a>
<router-outlet></router-outlet>
</div>
And this is my array of objects which includes the path to the home and other paths. The path to the home is correct, hence I don't see why the error pops up every time I click on it.
const appRoutes: Routes=[
{path:'second', component:SecondComponent},
{path:'third', component:ThirdComponent},
{path:'', redirectTo:'./app', pathMatch:'full'},
]
When I click on the third and second component url, everything works fine.
NOTE: I want to hide the second and third component when I click on the home component.
You need to define the home route:
const appRoutes: Routes=[
{path:'home', component:HomeComponent},
{path:'second', component:SecondComponent},
{path:'third', component:ThirdComponent},
{path:'', redirectTo:'/home', pathMatch:'full'},
{path:'**', redirectTo:'/home', pathMatch:'full'}
];
This solves my problem, my home path is empty and therefor the home page does not duplicate itself once I click on the home tag.
const APP_ROUTES: Routes=[
{path:'first', component:FirstComponent},
{path:'second', component:SecondComponent},
{path:'third', component:ThirdComponent},
{path:'', redirectTo:'', pathMatch:'full'},
];
I have an angular 2 app with authentication, using this html as the main layout
<div *ngIf="auth.loggedIn" class="container">
<router-outlet></router-outlet>
</div>
<div *ngIf="!auth.loggedIn" class="login">
<router-outlet></router-outlet>
</div>
Yet when I login to the app I get the Error: Cannot find primary outlet to load error. This error is gone when I reload the page, but keeps happening when I login without refreshing the page after. What am I doing wrong?
There should be one <router-outlet></router-outlet> ,
in your code there is no meaning of putting two <router-outlet></router-outlet> ,
Logically it does nothing.
You should put all your conditions within , your component html , not into the root html part , as per your code.