We Keep Coding

How to Create Route Links with Svelte Routify

I am learning how to use Routify to wire up some routes and links. I need help.
At the Routify docs it says:
"Links can be handled in an array of different ways. This might be the easiest way".
via: https://routify.dev/guide/navigation
It then gives this example:
<script>
import {isActive, url} from '#sveltech/routify'
const links =
[
['./index', 'Home'], //add index if you don't want siblings to be considered children
['./blog', 'Blog'],
['./about', 'About'],
['./contact', 'Contact']
]
</script>
<style>
.active {font-weight: bold}
</style>
<ul>
{#each links as [path, name]}
<!-- Svelte magic. If isActive is true, the "active" class is applied. -->
<li class:active={$isActive(path)}>
<a href={$url(path)}>
{name}
</a>
</li>
{/each}
</ul>
Unfortunately it doesn't give any instructions on how to wire this up to your app (if it does it's too complex for me to figure out).
I am using the Routify Template and I have copied the above code into the following directory:
pages/_components/Navigation.svelte
I then attempted to import it into pages/index.svelte as so:
pages/index.svelte
<script>
import Navigation from './_components/Navigation.svelte';
</script>
<div>
<Navigation/>
</div>
The links appear at the top of the page. When I click them the endpoint follows this pattern:
http://localhost:5000/index/home
http://localhost:5000/index/blog
http://localhost:5000/index/about
http://localhost:5000/index/contact
In my /pages directory I have pages that match the pages listed in the code such as:
/pages/Home.svelte
When I click the links my browser stays on the same page and does not embed the page associated with the link. Also, my browser developer tools say:
Uncaught Error: Route could not be found for "/index/home".
at urlToRoute (urlToRoute.js:15)
at updatePage (navigator.js:13)
at pushstate (navigator.js:60)
at History.history.<computed> [as pushState] (navigator.js:51)
What do I need to do so that I can see the respective pages and why is their an intermediate directory named "index"? How do I get rid of the word "index" in the url ?
UPDATE
Okay I have the navigation listed on all pages and semi-working.
I have my Navigation code (below) imported into pages/_layout.svelte.
The code is as follows:
pages/_layout.svelte
<script>
import Navigation from './_components/Navigation.svelte';
</script>
<!--TABS-->
<Navigation/>
pages/_components/Navigation.svelte
<script>
import {isActive, url} from '#sveltech/routify'
const links =
[
['./index', 'Home'], //add index if you don't want siblings to be considered children
['./form', 'Form']
]
</script>
<style>
.active {font-weight: bold}
</style>
<ul>
{#each links as [path, name]}
<!-- Svelte magic. If isActive is true, the "active" class is applied. -->
<li class:active={$isActive(path)}>
<a href={$url(path)}>
{name}
</a>
</li>
{/each}
</ul>
The navigation links appear but the problem now is that the content of the selected page does not appear.
In the image below, the form endpoint is being rendered. The form component has working HTML but the HTML does not appear on the page.
I am also getting a warning my my developer tools that says: " received an unexpected slot "default"

You shouldn't import your Navigation component into the index.svelte file but instead into a _layout.svelte file in the same directory.
They show the setup in the TV Shows App and although they don't show the above code imported in a Nav file like you're trying it will work if the component with the above code is imported in the _layout file since the url helper resolves paths relative to the page/layout in which it's used.
Importing it into the index file creates paths relative to the index file which is why you're seeing index in all routes.
UPDATE:
In response to needing to render the content of each page. This is done using a slot in the _layout file, in your example it would look like this:
<Navigation/>
<main>
<slot />
</main>

Creating Tabs and calling sub-components with Bulma and Angular 5

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.

whole page navigation angular 4

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)

angular2 Router-outlet wont work after logged in

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>

Cannot find primary outlet to load angular 2

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.