Angular Modular Routing with '**' no matching route

Question

To have the in each separate sub-module with routes.forchild is a great method to modularize the application, fine. But how to handle all not matching urls? If I implement into the main (bootstrap) AppRoutingModule following routes

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: '**', ErrorComponent, pathMatch: 'full'},

anytime the '**' route will execute unless a correct child route exists.

If I implement in the last child module.ts such

{path: '**', ErrorComponent },

It will never work.

The only way seems to have all routes in the common root module, but at least modularization is not possible in the smart way (components and routes in the same folder)

Answer 1

For the apache server inside the .htaccess file (perl)

The /404 in the ErrorDocument and RewriteRule directives is the URL of your custom error component. You will need to replace this with the actual URL of your component in your Angular app.

ErrorDocument 404 /404

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /404 [L]

what it does so far

The RewriteEngine directive is used to turn on Apache's URL rewriting engine, and the RewriteCond and RewriteRule directives are used to redirect all invalid URL requests to the custom error page.

with extra modifications https://httpd.apache.org/docs/2.4/howto/htaccess.html