We Keep Coding

Component is paste to app.component.html instead of displaying clean component html

I try to create simple routing to show EmptyRoomComponent on button click from app.coponent.html but EmptyRoomComponent is pasted to app.component.html instead of use clean empty-room.component.html
app.routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
const routes: Routes = \[
{ path: 'empty', component:EmptyRoomComponent},
{ path: '\*\*', redirectTo:''}
\];
#NgModule({
imports: \[RouterModule.forRoot(routes, { enableTracing: true })\],
exports: \[RouterModule\]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { ReactiveFormsModule} from "#angular/forms";
import {EmptyRoomComponent} from "./components/empty-room/empty-room.component";
#NgModule({
declarations: \[
AppComponent,
LoginComponent,
EmptyRoomComponent
\],
imports: \[
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
\],
providers: \[\],
bootstrap: \[AppComponent\]
})
export class AppModule {
}
app.component.html
<app-login></app-login>
<label class="or">------ LUB ------</label>
<div class="container unlogged">
<button class="unlogged" routerLink="/empty">Utwórz pokój</button>
</div>
<router-outlet></router-outlet>
I tried to modify routes variable - nothing changed

Angular - RoutingLink Not Showing Page Content With No Error Found

i have an issue using angular routinglink, since the following page didnt showing after i click the link. The URL give me the right path, but its not showing anything, with no error found.
i have already read the documentation from a link and some example from stackoverflow
here's the sample of my code
app.module.ts
import { BrowserModule, enableDebugTools } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { LoginComponent } from './shared/login/login.component';
// Deklarasi Routing
const routingAplikasi : Routes = [
{path : 'login', component : LoginComponent}
];
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule.forRoot(routingAplikasi),
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { LoginComponent } from './login/login.component';
import { RegistrasiComponent } from './registrasi/registrasi.component';
import { FooterComponent } from './footer/footer.component';
#NgModule({
declarations: [NavbarComponent, LoginComponent, RegistrasiComponent, FooterComponent],
exports: [
NavbarComponent, FooterComponent, LoginComponent
],
imports: [
CommonModule,
RouterModule
]
})
export class SharedModule { }
navbar.component.html
<form class="form-inline">
<a routerLink="/login" routerLinkActive="active" class="btn btn-primary">Masuk</a>
<a routerLink="/daftar" class="btn btn-primary">Daftar</a>
</form>
app.component.html
<navbar></navbar>
<!-- Begin page content -->
<div class="container">
<router-outlet></router-outlet>
</div>
<footer-bar></footer-bar>
i expect the output of "Login Works" that is the value of LoginComponent.

ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

I have simple navigation in angular 6 app,
Here is HTML
<nav class="main-nav>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
<li class="main-nav__item">
<a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a>
</li>
</ul>
</nav>
here is app.routing module
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'what', component: WhatwedoComponent },
{ path: 'contacts', component: FooterComponent },
{ path: 'projects', component: ProjectsComponent},
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
declarations: []
})
export class AppRoutingModule { }
Here is app module
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';
#NgModule({
declarations: [
AppComponent,
NgStickyDirective,
MainLayoutComponent,
MainNavDirective,
AboutComponent,
WhatwedoComponent,
FooterComponent,
WhyChooseUsComponent,
TeamComponent,
ProjectsComponent,
ClientsComponent,
HowItWorksComponent,
PartnersComponent
],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
when I run my app and click about us i get the following error :
core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
at
I have tried different combination to solve the issue but still not able to get rid of this error,
what am I doing wrong in my code? any help will be helpfull thanks

When you use routerLink like this, then you need to pass the value of the route it should go to. But when you use routerLink with the property binding syntax, like this: [routerLink], then it should be assigned a name of the property the value of which will be the route it should navigate the user to.
So to fix your issue, replace this routerLink="['/about']" with routerLink="/about" in your HTML.
There were other places where you used property binding syntax when it wasn't really required. I've fixed it and you can simply use the template syntax below:
<nav class="main-nav>
<ul
class="main-nav__list"
ng-sticky
addClass="main-sticky-link"
[ngClass]="ref.click ? 'Navbar__ToggleShow' : ''">
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/">Home</a>
</li>
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/about">About us</a>
</li>
</ul>
</nav>
It also needs to know where exactly should it load the template for the Component corresponding to the route it has reached. So for that, don't forget to add a <router-outlet></router-outlet>, either in your template provided above or in a parent component.
There's another issue with your AppRoutingModule. You need to export the RouterModule from there so that it is available to your AppModule when it imports it. To fix that, export it from your AppRoutingModule by adding it to the exports array.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'what', component: WhatwedoComponent },
{ path: 'contacts', component: FooterComponent },
{ path: 'projects', component: ProjectsComponent},
];
#NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }

In case you need the [] syntax, useful for "edit forms" when you need to pass parameters like id with the route, you would do something like:
[routerLink]="['edit', business._id]"
As for an "about page" with no parameters like yours,
[routerLink]="/about"
or
[routerLink]=['about']
will do the trick.

As the error says your router link should match the existing routes configured
It should be just routerLink="/about"

i founded the correct answer by search of many days ;
just convert routerLink="['/jkh',id]"
to
[routerLink]="['/jkh',id]"
and give it all the requerments and its solve
;

You need to use:
[routerLink]="/about"
If you wanted to pass a parameter like id, lets say like a course with an id parameter you will need to use it like this:
[routerLink]="['/course/', course.id]"
It should help any related error.

Direct loading routes in Angular 2

I have an Angular application that navigates to two routes:
http://localhost:8080/ /* Landing page */
http://localhost:8080/details/:id /* Result page */
Whenever I navigate to, for example, http://localhost:8080/details/4235. I'm met with the error: Cannot GET /details/4235
Here is how I setup my routes, in my:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage, pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
Which I import into my:
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { RouterModule, Routes } from '#angular/router';
import { AppComponent } from './app.component';
import { LandingPage } from './components/landingpage/landingpage.component';
import { ResultPage } from './components/resultpage/resultpage.component';
import { AppRoutingModule } from './app-routing.module';
#NgModule({
declarations: [
AppComponent,
LandingPage,
ResultPage
],
imports: [
BrowserModule,
FormsModule, // <-- import the FormsModule before binding with [(ngModel)]
HttpModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm having trouble finding a working Angular 2 method of dealing with direct-linking to a url.
How can I setup direct linking in Angular 2, so that when I load, say, http://localhost:8080/details/4235 it loads my ResultPage component.
edit:
Loading http://localhost:8080/#/details/4235 , is valid, but it re-loads the LandingPage component. And I am trying to load the ResultPage component when there is an extended url.

import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from
'./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{ path: '', component: LandingPage },
{
path: 'details/:id', component: ResultPage
}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
here you're loading the empty path first. Then the other paths will load. Update the empty path route. Keep it at last in the hierarchy.
Updated Code:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { LandingPage } from '
./components/landingpage/landingpage.component';
import { ResultPage } from
'./components/resultpage/resultpage.component';
import { TitleService } from './services/title.service';
const routes: Routes = [
{
path: 'details/:id', component: ResultPage
},
{ path: '', component: LandingPage } //<-- here
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: [TitleService]
})
export class AppRoutingModule { }
EDIT:
Also there might be problem that your browser doesn't support HTML5 pushState. I'm referring some SO links that might help out.
Configure history.pushState for Angular 2
enter link description here
Angular 2.0 router not working on reloading the browser

Angular 4 routing is not working

Angular routing is not working.. here is the code
routs.ts: routing url definitions file.
import {BlankComponent} from "../layouts/blank.component";
export const routes=[
{
path:'',
component:BlankComponent,
children:[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: '../pages/dashboard/dashboard.module#DashboardModule' }
]
},
{ path: '**', redirectTo: 'home' }
]
routes.module.ts: routing module
import {NgModule} from "#angular/core";
import {RouterModule} from "#angular/router";
import { routes } from './routes';
#NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule,]
})
export class RoutesModule{
constructor(){
}
}
Layout module:
import {NgModule} from "#angular/core";
import { RouterModule } from '#angular/router';
import {BlankComponent} from "./blank.component";
import {TopnavComponent} from "./topnav.component";
#NgModule({
declarations:[BlankComponent,TopnavComponent],
exports:[BlankComponent,TopnavComponent,RouterModule],
imports:[]
})
export class LayoutsModule{}
BlankComponent:
import {Component} from "#angular/core";
#Component({
selector:"sig-blank",
templateUrl:'./blank.component.html'
})
export class BlankComponent{}
App module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import {LayoutsModule} from './layouts/layouts.module'
import {RoutesModule} from "./routes/routes.module"
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LayoutsModule,
RoutesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
blank.component.html
<div class="wrapper">
<section>
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
app.component.html
<router-outlet></router-outlet>
This is the code i used in my project. but the routing is not working .
What is the wrong in my code. actually i have markup in my ./blank.component.html which i not included in the question. now the page displaying is the content in app.component.html only

You need to give the component name at {path:'home',component:ComponentName,loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'}