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.
Related
ERROR
ERROR Error: Uncaught (in promise): Error: Type PrincipalTemplateComponent is part of the declarations of 2 modules: AppModule and AuthModule! Please consider moving PrincipalTemplateComponent to a higher module that imports AppModule and AuthModule. You can also create a new NgModule that exports and includes PrincipalTemplateComponent then import that NgModule in AppModule and AuthModule.
Error: Type PrincipalTemplateComponent is part of the declarations of 2 modules: AppModule and AuthModule! Please consider moving PrincipalTemplateComponent to a higher module that imports AppModule and AuthModule. You can also create a new NgModule that exports and includes PrincipalTemplateComponent then import that NgModule in AppModule and AuthModule
APP MODULE
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { PrincipalTemplateComponent } from './layouts/principal-template/principal-template.component';
import { NavComponent } from './layouts/nav/nav.component';
import { FooterComponent } from './layouts/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
NotFoundComponent,
PrincipalTemplateComponent,
NavComponent,
FooterComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
AUTH MODULE
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CommonModule } from '#angular/common';
import { SignInComponent } from './sign-in/sign-in.component';
import { LogInComponent } from './log-in/log-in.component';
import { FormComponent } from './form/form.component';
import { PrincipalTemplateComponent } from 'src/app/layouts/principal-template/principal-template.component';
import { FooterComponent } from 'src/app/layouts/footer/footer.component';
import { NavComponent } from 'src/app/layouts/nav/nav.component';
const routes: Routes = [
{ path: 'sign-in', component: SignInComponent },
{ path: 'log-in', component: LogInComponent },
];
#NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
declarations: [
SignInComponent,
LogInComponent,
FormComponent,
PrincipalTemplateComponent,
NavComponent,
FooterComponent
]
})
export class AuthModule {}
APP ROUTING MODULE
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'auth', loadChildren: './components/auth/auth.module#AuthModule' },
{ path: 'ad', loadChildren: './components/ad/ad.module#AdModule' },
{ path: '**', component: NotFoundComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
HOME COMPONENT && SIGN-IN COMPONENT
<ng-template #template>
hola
</ng-template>
<app-principal-template></app-principal-template>
<ng-template #template>
hola 2
</ng-template>
<app-principal-template></app-principal-template>
Issue
You had desclared the same component PrincipalTemplateComponent in two modules AppModule and AuthModule.
Fix
You just remove PrincipalTemplateComponent from AppModule
Note : If you are using PrincipalTemplateComponent in other modules (excluding AuthModule) then you should declare in Shared Module.
shared.module.ts
#NgModule({
declarations: [
PrincipalTemplateComponent
],
exports:[PrincipalTemplateComponent]
})
export class SharedModule {}
The whole information you need is in the error message including the solution. Basically you only can 'declare' a component as part of a single module.
For this case, you should create a module that declares this shared component then import this shared 'module' within the other 2 modules, this way you can use the component in these 2 modules.
I have a module for routing and, since it needs to reference the components it will route to, I have to import those as well.
import { NgModule } from "#angular/core";
import { Routes, RouterModule } from "#angular/router";
import { RegisterComponent } from "./admin/register/register.component";
import { LoginComponent } from "./admin/login/login.component";
import { ErrorComponent } from "./admin/error/error.component";
const routes: Routes = [
{ path: "register", component: RegisterComponent },
{ path: "login", component: LoginComponent },
{ path: "**", component: ErrorComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The components are placed in another module - AdminModule. All future components will be placed there (or in an appropriate module of their own). I wanted to replace the three imports with a single one like this.
// import { RegisterComponent } from "./admin/register/register.component";
// import { LoginComponent } from "./admin/login/login.component";
// import { ErrorComponent } from "./admin/error/error.component";
import { RegisterComponent, LoginComponent, ErrorComponent } from "./admin/admin.module";
This doesn't work and the message says that the module Admin has no exported member with name RegisterComponent etc. So I added exports section to the decorator of the AdminModule class like this.
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";
#NgModule({
imports: [CommonModule],
exports: [RegisterComponent, LoginComponent, ErrorComponent],
declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }
Regrettably, the error message remains and I'm not sure how to make the components to be recognized as exportees of AdminModule. How come that neither exports section nor declaration section seems to expose them and what can I do to make it so recognizable?
You are mixing Typescript exports with Angular exports. #NgModule's exports array is designed to describe the module's public API. It does not affect how Typescript will resolve your file imports.
For this line to work like expected:
import {
RegisterComponent,
LoginComponent,
ErrorComponent
} from "./admin/admin.module";
You need to export the components from the file itself.
import { NgModule } from "#angular/core";
import { CommonModule } from "#angular/common";
import { RegisterComponent } from "./register/register.component";
import { LoginComponent } from "./login/login.component";
import { ErrorComponent } from "./error/error.component";
export { RegisterComponent } from "./register/register.component";
export { LoginComponent } from "./login/login.component";
export { ErrorComponent } from "./error/error.component";
#NgModule({
imports: [CommonModule],
exports: [RegisterComponent, LoginComponent, ErrorComponent],
declarations: [RegisterComponent, LoginComponent, ErrorComponent]
})
export class AdminModule { }
Read more about Typescript's import, export and modules in the official docs.
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
I created Angular 2 router module but it doen't work at the moment and I get an error when I want to open link /city 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet'
But I can open this link manually
Here is the code of:
Router module
import { NgModule }from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import {WeatherListComponent} from "../weather-list/weather-list.component";
import {AddedCityComponent} from "../added-city/added-city.component";
import {AppComponent} from "../app.component";
const routes: Routes = [
{ path: '', redirectTo: '/weather-list', pathMatch: 'full'},
{ path: 'city', component: AddedCityComponent },
{ path: 'weather-list', component: WeatherListComponent }
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
2) Appmodule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule} from '#angular/material';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { WeatherListComponent } from './weather-list/weather-list.component';
import { WeatherService } from './service/weather.service';
import { WeatherSearchComponent } from './weather-search/weather-search.component';
import { CloudsComponent } from './clouds/clouds.component';
import { SunComponent } from './sun/sun.component';
import { RainComponent } from './rain/rain.component';
import { AddedCityComponent } from './added-city/added-city.component';
import { AppRoutingModule } from './service/app.routing';
#NgModule({
declarations: [
AppComponent,
WeatherListComponent,
AddedCityComponent,
WeatherSearchComponent,
CloudsComponent,
SunComponent,
RainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
MdButtonModule,
MdCardModule,
MdInputModule,
NgbModule.forRoot(),
AppRoutingModule
],
providers: [
WeatherService
],
bootstrap: [AppComponent]
})
export class AppModule { }
3) AppComponentHTML
<div class="page-wrapper" [ngClass]="{
'sun-background': weatherDesc == 'Clear',
'rain-background': weatherDesc == 'Rain',
'clouds-background': weatherDesc == 'Clouds'
}">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<header>
<div class="header-wrapper">
<h3 class=" text-left">Weather App</h3>
<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>
<app-weather-search></app-weather-search>
</div>
</header>
</div>
</div>
</div>
<!--<app-weather-list (notify)="background($event)"></app-weather-list>-->
<!--<app-weather-list></app-weather-list>-->
<router-outlet></router-outlet>
</div>
try
const routes: Routes = [
{ path: 'city', component: AddedCityComponent },
{ path: 'weather-list', component: WeatherListComponent },
{ path: '', redirectTo: '/weather-list', pathMatch: 'full'}
];
and move appRoutingModule to the start of the list in the imports declaration
i see that you don't have router-outlet in your App component. Try to copy this code in your app.component.html :
<router-outlet></router-outlet>
then try to enter to open links.
Remove the leading slashes in the /weather-list to weather-list. This will make the first path work which might be causing the problem. Just try this out and let me know.
It looks as though your routerLinks are not setup correctly in the component html.
Try changing your link tags from ...
<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>
To ...
<a [routerLink]="['/city']" routerLinkActive="active">
<a [routerLink]="['/weather-list']" routerLinkActive="active">
You might also try removing the .forRoot on your routing module import, I am not sure that it is necessary in this case.
I am trying to find out the reason for the following error.
app/src/app.module.ts(13,33): error TS2307: Cannot find module 'src/components/test/test.module
I am using Angular2 RC5 and created a feature module and imported it in app.module.ts file. I am using lazy loading of the module with the router.
app.module.ts looks like this
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
/* App Root */
import { AppComponent } from './app.component';
/* Feature module */
import { TestModule } from 'src/components/test/test.module';
#NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: []
})
export class AppModule { }
test.module.ts looks like this
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TestComponent } from './test.component';
import { routing } from './test.routes';
#NgModule({
imports: [ CommonModule, routing ],
declarations: [ TestComponent ],
providers: []
})
export default class TestModule { }
app.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
export const routes: Routes = [
{
path: '',
redirectTo: '/test',
pathMatch: 'full'
},
{
path: 'test',
loadChildren: 'src/components/test/test.module'
}
];
export const routing = RouterModule.forRoot(routes);
test.routes.ts looks like
import { Routes, RouterModule } from '#angular/router';
import { TestComponent } from './test.component';
const routes: Routes = [
{ path: '',
component: TestComponent }
];
export const routing = RouterModule.forChild(routes);
Above error appears when I try to compile test.module.ts file with default keyword. If I remove it, error disappears. but of course, in that case, I won't be able to use lazy loading for feature module.
Does anyone come across this?
I see multiple errors in your code.
You are importing wrong module in your AppModule.
Your export class name of test.module.ts is TestModule, but you are importing DashboardModule in your AppModule.
Instead of:
import { DashboardModule } from 'src/components/test/test.module';
You should import:
import { TestModule } from 'src/components/test/test.module';
And, of course, you need to add TestModule to your AppModule imports.