Can't turn my app into single page


#1

I created an app using the start nativescript app.
This is my app.component html

<ActionItem class=“btn” text=“search”[nsRouterLink]="[’/search’]">
<ActionItem class=“btn” text=“forum”[nsRouterLink]="[’/forum’]">
<ActionItem class=“btn” text=“post” [nsRouterLink]="[’/post’]">

<page-router-outlet></page-router-outlet>
when I change the page-router-outlet to
<router-outlet></router-outlet>
without the *, it removes it for some reason…
It doesnt load the html and css proporly

This is my app.routing
import { NgModule } from “@angular/core”;
import { NativeScriptRouterModule } from “nativescript-angular/router”;
import { Routes } from “@angular/router”;

import { ForumMessagesComponent } from “./ForumMessage/ForumMessages.component”;
import { SearchComponent } from “./Search/search.component”;
import { PostComponent } from “./Post/post.component”;

const routes: Routes = [
{ path: “”, redirectTo: “/search”, pathMatch: “full” },
{ path: “search”, component: SearchComponent },
{ path: “post”, component: PostComponent },
{ path: “forum”, component: ForumMessagesComponent },
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

app.module

import { NgModule, NO_ERRORS_SCHEMA } from “@angular/core”;
import { NativeScriptModule } from “nativescript-angular/nativescript.module”;
import { AppRoutingModule } from “./app.routing”;
import { AppComponent } from “./app.component”;
import { DropDownModule } from “nativescript-drop-down/angular”;
import { ForumMessagesService } from “./ForumMessage/ForumMessages.service”;
import { FirebaseService } from “./FirebaseServices/firebase.service”;
import { ForumMessageComponent } from “./ForumMessage/ForumMessage.component”;
import { ForumMessagesComponent } from “./ForumMessage/ForumMessages.component”;
import { PostComponent } from “./Post/post.component”;
import { SearchComponent } from “./Search/search.component”;
import { NativeScriptRouterModule } from “nativescript-angular/router”;
import {NativeScriptFormsModule} from “nativescript-angular/forms”
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from “nativescript-angular/forms”;

// Uncomment and add to NgModule imports if you need to use the HTTP wrapper
// import { NativeScriptHttpModule } from “nativescript-angular/http”;

@NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
NativeScriptRouterModule,
AppRoutingModule,
DropDownModule,
NativeScriptFormsModule
],
declarations: [
AppComponent,
ForumMessagesComponent,
ForumMessageComponent,
PostComponent,
SearchComponent
],
providers: [
ForumMessagesService,
FirebaseService
],
schemas: [
NO_ERRORS_SCHEMA
]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from “nativescript-angular/platform”;

import { AppModule } from “./app.module”;
import firebase = require(“nativescript-plugin-firebase”);

firebase.init({
persist: false,
storageBucket: ‘gs://game-trading-center-4ea89.appspot.com’,
}).then(
(instance) => {
console.log(instance + “firebase.init done”);
},
(error) => {
console.log("firebase.init error: " + error);
}
);

platformNativeScriptDynamic().bootstrapModule(AppModule);

what do i need to do to get it to work?


#2

It would help others greatly, if you took the time to explain what you are trying to achieve.


#3

i want the top of my page will be a menu, and when i click every button it will render the page below, when the router-outlet tags are, not swap the entire page… which is what router-outlet suppose to do… any help?


#4

I am developing an app with the type of behavior you want and indeed it uses <router-outlet>. There is info on the angular navigation section of the Nativescript docs on how to use it and even an example like what you want. Can you give more details about the the error you are getting? I didn’t understand the below quote.