angular-routing

I want to extract only the last event entry of type NavigationEnd from router.events. But somehow I can't find a proper way to do this. Whatever I try the following code snipped is the only way to get access to these objects of interest. let ne: any; router.events.filter(e => e instanceof NavigationEnd) .forEach(e => { ne = e as NavigationEnd; }); console.log('target page: ', ne.urlAfterRedirects); But do I really have to use .forEach() letting it run though all entries and using then the last entry? Isn't there a better way to handle the events as a kind of array and then say ne =

Here you can find an example app: http://ivan-khludov.com/ This is my root component: import { Component } from '@angular/core'; @Component({ selector: 'root', template: ` <h1>My Dummy Angular App</h1> <router-outlet></router-outlet> <nav> <a routerLink="/section-1/1" routerLinkActive="active">Section 1 - Page 1</a> <span>||</span> <a routerLink="/section-1/2" routerLinkActive="active">Section 1 - Page 2</a> <span>||</span> <a routerLink="/section-2/1" routerLinkActive="active">Section 2 - Page 1</a> <span>||</span> <a routerLink="/section-2/2" routerLinkActive="active">Section 2 - Page 2</a>

I believe I'm on the right track with these terms, "nested parameterized routes", but haven't found what I'm looking for yet. My objective is to create intuitive routes for my API, something like the following example: /api/v1/project/list /api/v1/project/1/item/list /api/v1/project/1/item/1/edit /api/v1/project/2/item/3/delete It's relatively easy and clear how to setup project states, but not the item states within each project. { state: 'project' config: { url:'/project' } }, { state: 'project.list' config: { url: '/list' } }, { state: 'project.detail' config: { url: '/:project_id' } } It's

I'm in the process of incorporating Angular into a single page of an existing rails app. Everything is working perfectly with the routing within the page using the following app.config(function($routeProvider, $locationProvider) { $routeProvider .when('/services/:id', { templateUrl: "/javascripts/angular/templates/service_ui/service.html", controller: "ServiceCtrl" }) $locationProvider.html5Mode(true); }); However, I'd like to maintain normal functionality for links that are not related to Angular. For example, we have a number of links in the header that link elsewhere that are now being

I'm trying to import my html template so that webpack will recognize them and include them when I build. ( webpack -d ) According to this GitHub issue I should do this declare module '*.html' { const _: string; export default _; } Then import template from './myTemplate.html'; should work. But it doesn't quite do the trick. import template from './myTemplate.html'; console.log(template); // undefined However this "works" import * as template from './myTemplate.html'; console.log(template); // <p>Hello world!</p> Very strange. But now this doesn't work $routeProvider.when("/test", { template: