angular2-routing

Angular 2 routes not working after building the project

[亡魂溺海] 提交于 2019-12-05 17:58:54
These are my routes: import { Routes } from '@angular/router'; import {WelcomeComponent} from "./welcome/welcome.component"; import { LoginComponent } from './login/login.component'; export const routes: Routes = [ {path: '', component: WelcomeComponent}, {path: 'login', component: LoginComponent}, {path: '**', component: WelcomeComponent} ]; I buid my project using ng buid . When I enter a not defined path, I expect the application to redirect to '/' path as it happens during development, but I get an 404 Error. I get the same error even when I manually enter /login URL. What am I missing?

Angular2 : How to refresh resolver dependent components?

↘锁芯ラ 提交于 2019-12-05 17:53:50
问题 I have three components, each have their own resolver that fetch data from a different API. To do so, these components rely on an url, that is shared between them using a service. I want that when a change to that url happens, each components reloads itself, i.e to restart the resolvers. I had a look at several related S.O questions, but none mention how to do so when using resolvers, cf : question 1,question 2,question 3 I can think of two ways : The dirty way : Force the refreshing of the

Angular2- When refresh the page, url remains same but appropriate view doesn't get loaded

寵の児 提交于 2019-12-05 16:15:56
In Angular2, I am facing this issue. When you refresh the page. The URL remains same but it doesn't load appropriate view in RouterOutlet . Everything works fine except refreshing page issue. app.ts import {Component,bind} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {FORM_DIRECTIVES} from 'angular2/form'; import{HomeCmp} from 'Angular/src/Home/home.ts'; import {ContactUsCmp} from 'Angular/src/ContactUs/contactus.ts'; import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2

How to access static data added for particular route in angular 2/4 in service?

試著忘記壹切 提交于 2019-12-05 16:13:25
const routes: Routes = [ { path: 'somepath', component: SomeComponent, data: { showSidebar: true, title: 'test' } }, { path: 'somepath2', component: SomeComponent2, data: { showSidebar: false, title: 'test2' } } ]; How can I access data object from currently activates route? If my current route is localhost:4200/app/somepath2 then I want to access data: { showSidebar: false, title: 'test2' } You could use this.route.snapshot.data Inject router in the constructor import { ActivatedRoute } from '@angular/router'; constructor(private route:ActivatedRoute) ngOnInit() { const myData = this.route

Angular2 trigger CanActivate while page is active

核能气质少年 提交于 2019-12-05 16:07:08
As far as I understand it the CanActivate interface in Angular2 is only effective on route changes. So if I have a page p that requires the user to be logged in I can create a guard that implements the CanActivate interface which will allow the RouterModule to activate p only if the user is logged in. But what happens when p is active and the user gets logged out? I have tried to find best practices on checking if a page is allowed to be active without changing the route in the RouterModule but I can't find anything useful. Lets say page p is active and requires a login. Now a logout is

ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4

一笑奈何 提交于 2019-12-05 15:06:23
i am new to Angular 4 and trying to build a simple routing but when i am trying to redirect on successful register using this.router.navigate(['./admin/login']); so its throwing this error ViewDestroyedError: Attempt to use a destroyed view: detectChanges in console.log . Here is how my register.component.ts file looks like: import { Component, OnDestroy } from '@angular/core'; import { Router } from "@angular/router"; import { ChangeDetectionStrategy } from '@angular/core'; import { FormValidationService } from "../../validations/form-validation.service"; import { FlashMessagesService } from

How to redirect not-existing link to Home page in Angular 2?

99封情书 提交于 2019-12-05 13:57:01
If user input a not-existing link, I want the page redirect to Home page. How can I do it? Thanks @RouteConfig([ {path: '/home', name: 'Home', component: HomeComponent}, {path: '/about', name: 'About', component: AboutComponent}, {path: '/???', name: 'not-found', redirectTo: ['Home']} ]) This will redirect all unregistered routes to Home { path: "/**", redirectTo: ["Home"] } In Routing of the version v4 name property no more exist. route define without name property. so you should use path instead of name redirectTo: '/redirectPath' and no leading slash for path so use path: '404' instead of

Angular2 - Html link to file download routes to home after click

送分小仙女□ 提交于 2019-12-05 13:39:49
I have an Angular2 application that expose some direct download links to files. The files are located under : [MY_APP_FOLDER]\src\assets\OffertFile An example of the link href is this: /assets/OffertFile/test.xlsx The component.html link example is this: <a href="/assets/OffertFile/test.xlsx" target="_self"> <i class="fa fa-download fa-2x text-primary" aria-hidden="true"></i> </a> The link works, I can download the file. The problem is that once I click the link, the application routes to home... How can I avoid this? Thanks to support Please add the download attribute to the <a> tag. This

Angular2 add class when route is inactive

狂风中的少年 提交于 2019-12-05 13:29:07
Angular2 has a routerLinkActive directive which adds class to the element if the route is active. I want to add a class when route is inactive . Is there a way to do this? <a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'"> </a> 来源: https://stackoverflow.com/questions/41982000/angular2-add-class-when-route-is-inactive

How to skip a page in browser history when navigating back?

陌路散爱 提交于 2019-12-05 10:41:49
I have an Angular 2 app with the Router. Let's say the user is on a page A in the app, he then navigates to a page B and then to a page C. At this moment when he clicks the Back button on the browser I want him to get back to the page A (by skipping B). How can I achieve it? When navigating from B to C one has to set { replaceUrl: true }: this.router.navigate(["/c"], { replaceUrl: true }); This replaces the page B by C in the browser history. Quick and easy solution is Use navigation in your typescript instead of html file . And specify the parameter { skipLocationChange: true } Proper