How to handle routing in Angular 5+ Service Workers?

TL;DR: I’ve identified at least two issues causing breakage in my case; you can use this build script for now to try my fix, and see the app work offline here. Further testing & pull requests needed. While I’ve been unable to find a documented answer, here’s what I’ve been able to find thus far, … Read more

Angularjs routing in different files

In AngularJS routes are defined in configuration block. Each AngularJS module can have multiple configuration blocks and you can define routes in each and every configuration block. The final routing for the entire application is a sum of routes defined in all modules. In practice you can do it like: angular.module(‘myModule1’, []).config(function($routeProvider){ //define module-specific routes … Read more

Handling trailing slashes in angularUI router

There is a link to working plunker And this is the updated rule definition: $urlRouterProvider.rule(function($injector, $location) { var path = $location.path(); var hasTrailingSlash = path[path.length-1] === “https://stackoverflow.com/”; if(hasTrailingSlash) { //if last charcter is a slash, return the same url without the slash var newPath = path.substr(0, path.length – 1); return newPath; } }); And these … Read more

Circular dependency found: $http

It appears that $state service is resulting in a circular dependency with the $http service. This may be caused by the fact that the templateFactory (see https://github.com/angular-ui/ui-router/blob/master/src/templateFactory.js) is being injected with the $http service in addition to the interceptor itself being composed with the $http service. To get around this circular dependency issue, you can … Read more

How can I conditionally use either [href] or [routerLink] on an anchor?

The simplest way would be to use *ngIf / else: <ng-container *ngIf=”outside; else internalBlock”> <a [href]=”externalUrl”>External</a> </ng-container> <ng-template #internalBlock> <a [routerLink]=”[‘/route’, id]”>Internal</a> </ng-template> EDIT#1: (Ugly workaround) Since you don’t want to use *ngIf (I still don’t understand why), you can do this: Template: <a href=”javascript:void(0)” (click)=”handleClick(outside, ‘/route’, id, externalUrl)”>Link</a> Component: handleClick(outside: boolean, internalUrl: string, internalId: … Read more

Deploy single page application Angular: 404 Not Found nginx

for those not using a Staticfile might wanna try this. I had the same problem with nginx serving angular. The following is the default config file, probably found somewhere in /etc/nginx/sites-available/yoursite location / { # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri … Read more

Angular 4 Circular dependency detected

As the warning says, work-session-list.routing.ts depends on index.ts: import { WorkSessionListComponent } from ‘./index’; And index.ts depends on work-session-list.routing.ts: export * from ‘./work-session-list.routing’; The first dependency is not necessary, since you could import WorkSessionListComponent directly from its source file: import { WorkSessionListComponent } from ‘./work-session-list.component’; This change should fix the problem.

tech