angular 2 exclude url in routing

Question

I have implemented routing using angular as below -

export const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: '**', component: SearchComponent }
];

I need to match all the default urls to search. There are some statics resources like js, css files in angular application. My problem is that all the static resources are also going to search component now. Is there some way I can exclude these static resources from routing.

@Gerardlamo , I could not find a solution for this. But later angular has come up with feature "Routing Guard". I think we can use guards to handle this. You can read more about it at https://angular.io/docs/ts/latest/guide/router.html#!#guards — saurabh, Oct 01 '16 at 12:55
when you say static resources do you mean the template and css files for your component? What other static resources do you have? Are you including the resources at the component level or in the index.html file? — wickdninja, Mar 29 '17 at 18:16

score 2 · Accepted Answer · answered May 09 '17 at 02:42

Try something like this. Note that you need to import all your other modules at the top, and I'm assuming that you're setting up routes in your app.module.ts file.

This also is using the Angular1.x style http://url/#/ routing style as I've found that to be much more stable in browsers when deployed.

I would also recommend create a static assets directory at the root of your deployment directory and store static files there. Something like this:

/static/
       /css/
       /js/
       /images/

import all modules...
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', 
    component: HomeComponent, 
    pathMatch: 'full'
   },
  { path: '**', 
    component: SearchComponent
  }
];

@NgModule({
  declarations: [
    HomeComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes,
    {
      useHash: true,
      preloadingStrategy: PreloadAllModules
    }),
  ],
    bootstrap: [AppComponent]
})

export class AppModule {}

score 1 · Answer 2 · answered Jun 05 '20 at 15:19

The simplest way to do this is with a UrlMatcher.

New routes

const routes: Routes = [
  { path: '', 
    component: HomeComponent, 
    pathMatch: 'full'
   },

  { matcher: PathExcluding, component: SearchComponent },
];

Add this function in your app-routing module

export function PathExcluding(url: UrlSegment[]): any {
  return url.length === 1 && !(url[0].path.includes('url-Path-to-Exlude')) ? ({consumed: url}) : undefined;
}

you can use url[0].path to perform any kind of string checking for your path

score 0 · Answer 3 · answered Mar 25 '21 at 18:08

What helped me was adding the path te exclude to navigationUrls in ngsw-config.json.

See https://angular.io/guide/service-worker-config#matching-navigation-request-urls

While these default criteria are fine in most cases, it is sometimes desirable to configure different rules. For example, you may want to ignore specific routes (that are not part of the Angular app) and pass them through to the server.

Example:

  ...
  "navigationUrls": [
    "/**", 
    "!/**/*.*", 
    "!/**/*__*", 
    "!/**/*__*/**", 
    "!/path_to_exclude/**"]
}

angular 2 exclude url in routing

3 Answers3

Linked