@acknow-srl/error

Provide an error page to display a given error message based on a route parameter.

Usage no npm install needed!

<script type="module">
  import acknowSrlError from 'https://cdn.skypack.dev/@acknow-srl/error';
</script>

README

Error

Provide an error page to display a given error message based on a route parameter.

AckErrorModule (Module)

Methods

  • forRoot(config: AckErrorConfig): void: configures errors codes, titles, messages and some other options, like the route parameter name and a URL to redirect from the error page.

AckErrorData (Interface)

  • code (string|number): error code.
  • title (string): error title.
  • message (string): error message.
  • back (string): the path the error page must take the user to. Defaults to back (the button in the error page will take the user to the page visited just before). If not provided or empty, defaults to nothing (the error page has no way to take the user to another page).

AckErrorConfig (Interface)

  • errors (ErrorData[]): the collection of all error data to handle.
  • param (string): the route parameter name that holds the error code. Defaults to code.

AckError (Component)

Selector

ack-error

Example

/**
 * 1. Import the module and the error configuration model in your main module (usually app.module.ts).
 */

import { AckErrorModule, AckErrorConfig } from '@acknow-srl/error';

/**
 * 2. Set up the error handling configuration.
 */

const config: AckErrorConfig = {
    param: 'error',
    errors: [
        {
            code: 'unauthorized',
            title: 'Unauthorized',
            message: 'This user is not allowed to view this page.',
            back: '/login'
        },
        {
            code: 404,
            title: 'Not found',
            message: 'Sorry, but the page you are trying to view was not found.'
        },
        ...
    ]
};

/**
 * 3. Add the module to your app imports and configure it.
 */

@NgModule({
  declarations: [
    AppComponent
    ...
  ],
  imports: [
    ...
    AckErrorModule.forRoot(config),
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

/**
 * 4. Set a route for the error page in your router configuration (usually in app-routing.module.ts).
 */

import { AckError } from '@acknow-srl/error';

// As we set "error" as error parameter name in the module configuration, we have to use it for the error route.

const routes = [
    ...
    {
        path: 'error',
        redirectTo: '/error/404',
        pathMatch: 'full'
    },
    {
        path: 'error/:error',
        component: AckError
    },
    ...
];