I have a problem with routerlinks in angular. I use routerlinks to redirect to the next page in my application.
If I start my applicaton with ng serve everything works fine. If I build my application with ng build --prod routerlinks return in some cases a 404.
The exact problem:
I am using a routeroutlet to display the different components. If I click on a routerlink which is in a component that is displayed in the routeroutlet I get a 404. If I use a routerlink that is in my component.html outside of the routeroutlet everything works fine.
That is my routeroutlet
<div class="">
<router-outlet></router-outlet>
</div>
That is my routerlink
<a [routerLink]="['overview']" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}"
class="btn btn-primary searchbutton">suchen</a>
and that are my routes:
const routes: Routes = [
{ path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'overview/:brand', component: OverviewComponent },
{ path: 'overview/:product', component: OverviewComponent },
{ path: 'coupons', component: CouponComponent },
{ path: 'impressum', component: ImpressumComponent },
{ path: 'datenschutz', component: DatenschutzComponent },
{ path: 'details/:id', component: ProductDetailsComponent },
{ path: 'home', component: LandingpageComponent },
{ path: '', component: LandingpageComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Related
I'm currently working on a portfolio. My intention is to only change the route ("portfolio" and its child route "all" which is displayed immediately) as soon as the images on that specific route are fully loaded. When the route was clicked as progress bar from Angular Materials shall be displayed.
Since I'm a beginner with angular I unfortunately can't provide any code, but my app-routing.module.
Browsing the internet I found a similar question, which I didn't really understand:
https://forum.vuejs.org/t/load-images-before-changing-route/11479
App-Routing.Module:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent},
{ path: 'portfolio', component: PortfolioComponent, children: [
{ path: '', redirectTo: 'all', pathMatch: 'full'},
{ path: 'all', component: AllComponent},
{ path: 'wedding', component: PortfolioweddingComponent},
{ path: 'adventure', component: PortfolioadventureComponent},
]},
{ path: 'book-me', component: BookMeComponent},
{ path: 'book-me/wedding', component: WeddingComponent},
{ path: 'book-me/adventuresession', component: AdventuresessionComponent},
];
#NgModule({
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}), RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I have an issue with routing in my app. In my local all works right but not on the server. The program has the following routes:
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'thankyou', component: ThankyouComponent },
{ path: 'home', component: UserHomeComponent, canActivate: [AuthGuard] },
{ path: 'publish', component: PublishComponent, canActivate: [AuthGuard] },
{ path: '**', component: PageNotFoundComponent }
];
The root route always works.
If on my computer I send request directly, for example, the route:
http://localhost:4200/publish
Assuming that I have logged in there are no problems loading it. But if execute that route in server with the route:
http://myserver/mypath/dist/publish
It doesn't find the route.
I modified index.html as well, to execute on server.
<base href="/"> by <base href="/mypath/dist/">
If I execute that route by the template html using directive
routerLink="/publish"
It works fine.
Does anyone know why this happens?
Your webserver needs to be configured to reroute requests to your index.html, excluding assets.
For nginx, add this inside your server block of your nginx.conf or your site config:
location / {
try_files $uri $uri/ /path/to/index.html;
}
For apache, check this answer.
Here is an example of a file that creates a routing structure for the routes to hit when they are put into the url. So far I have not seen anything in your question that suggests you are actually handling routes from outside your app. In other words, how does some url from your server know where to go if you haven't defined a route that would be typed in as a url? Seems you don't have a root path. That's what I've been driving at.
import { Routes, RouterModule } from '#angular/router';
import { SomeComponent } from 'app/components/some-component';
import { Path1Component } from 'app/components/path1-component';
import { Path2Component } from 'app/components/path2-component';
import { Path3Component } from 'app/components/path3-component';
const MyRoutes: Routes = [
{
path: 'root/',
component: SomeComponent,
children: [
{
path: 'path1',
component: Path1Component
},
{
path: 'path2',
component: Path2Component
},
{
path: 'path3',
component: Path3Component
},
{
path: '**', // default path
component: Path2Component
}
],
}
];
#NgModule({
imports: [
RouterModule.forChild(MyRoutes)
],
exports: [
RouterModule
]
})
export class MyRouting { }
I have found the solution in this site https://github.com/angular/angular/issues/11884
but I don't have full access to server. I have switched in root module to HashLocationStrategy as the angular guide says here https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles
and it works!
I have problem with HTML like the images below:
Error :
I clicked a button to move to the page with path: /page/:beecow, the last HTML will show if '/page/:beecow' have an error. The last HTML is 'market' in app-routing
I'm using angular version 4.3.5
// Here is my app-routing
const appRoutes: Routes = [
{
path: '',
component: LandingPageComponent,
pathMatch: 'full'
},
{
path: 'page', // Navigate to here
loadChildren: './page/page.module#PageModule'
},
{
path: 'market',
loadChildren: './market/market.module#MarketModule'
},
{
path: '**', redirectTo: ''
}
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// Here is my page-routing
const routes: Routes = [{
path: '', component: PageComponent,
canActivate: [AuthGuardService],
children: [
{
path: 'upload-product',
component: ProductComponent,
pathMatch: 'full',
data: {
authorities: ['ROLE_STORE'],
pageTitle: 'beecow.store.item.productTitle'
},
canActivate: [RoleGuardService],
canDeactivate: [NavigationService]
},
{
path: ':beecow', // if The component have error, html expanded
component: ManageItemComponent
}
]
}];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PageRoutingModule { }
My Link
<a [routerLink]="['/login']">
<i class="glyphicon glyphicon-user"></i> Login
</a>
My Routes
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: UserRegisterComponent },
{ path: 'auctions', component: AuctionListComponent },
{ path: 'auction/:id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
{ path: 'supplier/:id', component: SupplierDetailComponent }
];
the routerlinks that navigates to auctions, auction/:id and supplier/:id works as intended, but login and register does not, when i click either one of them i get navigated to the correct component, the URL however changes to localhost:xxxx/login for a split second before it goes back to localhost:xxxx/previousUrl
Here is the other routerlink, that works as intended
<a [routerLink]="['/auction', auction.id]">
{{category.name }} - {{auction.name}}
</a>
When you have child routes, it's better to use the children: [].
This is how you use it:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: UserRegisterComponent },
{ path: 'auctions', component: AuctionListComponent, children: [
{ path: ':id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
{ path: ':id/edit', component: AuctionDetailEditComponent }
]},
{ path: 'supplier/:id', component: SupplierDetailComponent }
];
// This is what you can place on the item
<a [routerLink]="[idOfItem]">Link to Item</a>
// And this method you call in your component.ts file
// Add relativeTo to make it relative to the current route
// so you'll add the "edit" after the called ID.
this.router.navigate(['edit'], { relativeTo: this.route });
Can you please try login and register in the following way:
<a routerLink="/login">
<i class="glyphicon glyphicon-user"></i> Login
</a>
I am trying to set URLs to my items got via json.
So I have a structure like that:
<div class="releases-component">
<div *ngFor="let release of releases" [routerLink]="['/releases', { id:release.id }]">
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div>
</div>
And I've got json of type:
[
{
"id":"release-1",
"name": "Release1 name",
"image": "./cover1.jpg",
"year": "2014"
},
{
"id":"release-2",
"name": "Release2 name",
"image": "./release2.jpg",
"year": "2015"
}
]
My router:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
The problem is that when I click on any *ngFor generated div I get url like
http://localhost:3000/releases;id=release-1
And I want it to look like
http://localhost:3000/releases/release-1
Didn't manage to find a working solution in Angular2 to me.
There are few small syntax mistakes in the code above, here is the code with the fixes.
Structure:
<div class="releases-component">
<div *ngFor="let release of releases" [routerLink]="['/releases',release.id ]">
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div>
</div>
Router:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases/:id', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
Here is a one page similar working example plunkr code: http://plnkr.co/edit/UyNkK9?p=preview,
you can see the url changes on this plunkr url,
http://run.plnkr.co/plunks/UyNkK9/
Here is how the url will look after you click on releases, http://run.plnkr.co/plunks/UyNkK9/releases/release-1
html:
<div class="releases-component">
<div *ngFor="let release of releases"
(click)=onSelect(release)>
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div
</div>
routes:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases/:id', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
component:
import {Router} from '#angular/router';
...
...
constructor(private router: Router) {}
onSelect(release): any {
this.router.navigate(['/release', release.id]);
}