Ignore a path in the root RouterModule

user_3357958 0
Viewed 2843

I am using Angular 9. I have a JSON file in the root directory that I do not want included in the app. In other words:

/src
  |-- /app
  |-- /assets
  |-- index.html
  |-- do_not_include_this_file.json

This means http://example.com/do_not_include_this_file.json should be ignored by the RouterModule and instead go straight to the file. Currently that path will redirect to a PageNotFoundComponent, e.g.

export const APP_ROUTER_PROVIDERS: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
];

How can I get the RouterModule to completely ignore a path?

angular-router angular
3 Answers

You can serve "do_not_include_this_file.json" as a static file from your root directory.

Check the root directory of your Angular application for a file called "angular.json". In "angular.json", you can use the assets entities. Any files or directories you include in the asset value array will be served statically. Add your static file here. When enabled, all of these files will also be served in a production environment / copied to the dist directory.

Following code assumes you have "do_not_include_this_file.json" in your src folder and serves it to root directory in output.

"projects": {
  "YourProject": {
      "root": "",
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              ...
              {
                "glob": "do_not_include_this_file.json",
                "input": "src/",
                "output": "/"
              },
              ...
            ]

Here is a page for more information; https://angular.io/guide/workspace-config#asset-config

user_28278200

Move your json file to assets.

In your route config jsonfile route which you are trying to ignore.

 {path: 'do_not_include_this_file.json',pathMatch: 'full', redirectTo: 'assets/do_not_include_this_file.json'}
user_109829720

EDIT: this is probably wrong, see the other answers.

I think this is not possible (or at least should not be done, see below). The point of a single page application is that it handles its routes, ie. there are no page loads, but the SPA reads what is in the URL, and displays the components accourding to your router config. This is actually not angular specific, every SPA works like this, even if they have different abstractions than router and component. What you want to do goes exactly against that.

Also, for the SPAs to work, they need a specific web server config too: for every URL under the baseHref, the index.html has to be returned. That is so bookmarks and page reloads work, because imagine if a user bookmarked myapp.com/profile/settings. The code of the SPA is linked in index.html, and it has to be loaded, so that the code can decide what to display when the URL is profile/settings. So again, when the user loads myapp.com/profile/settings, the webserver returns the index.html just as the request was myapp.com/index.html. When the SPA has loaded, it checks the URL, and displays the pages or components accordingly. If this mechanism was not set up, you couldn't directly go to /profile/settings, but you would have to open myapp.com/index.html (or maybe myapp.com/) first and then manually navigate to the profile settings inside the SPA.

Now imagine that what you want to would also require an explicit exception to this mechanism in the webserver, because when opening myapp.com/my-fancy.json, the web server has to make an exception and actually serve the json.

Here's a plan how you might still be able to implement what you described, but it's not that nice, and also might not worth the complications:

  • implement this exception in your webserver's routing, so that the index.html is returned always, except when that json is requested specifically, in that case return that json
  • create a route and a component for the json file, and when you navigate to that URL and that component has loaded, just call location.reload(true), that causes the browser to send a new request to the webserver, and the webserver will just serve the json
    • or, the component for the json's url might be an empty placeholder, and you could catch the navigation and trigger the page reload in a route guard
user_5005050
Related