I created a custom page type called 'Angular page' and a custom twig template for it which loads my angular scripts and prints the <app-root> tag.

I set the page URL to /angularpage and the page will display the data correctly.

The issue is - my angular app supports routing so I want all the angular routes also to load the same node:

For example:


Does anyone know of a way in which I can take the URL alias the user filled and use it as a base for my page so that all routes that start with it lead me to the same node?

(Drupal 8)

Thanks Yaron

1 Answer 1


You should be able to accomplish this with use of a custom route and controller.

Let's assume you have a custom module angular_router. You'll want to create a controller file, which should be located at angular_router/src/Controller/AngularPageController.php:


namespace Drupal\angular_router\Controller;

use Symfony\Component\HttpFoundation\Request;

 * AngularPageController class.

class AngularPageController {

   * Creates the response for the angular page.
   * @param string $user
   * @param Request $request
   * @return array
  public function content($param, Request $request) {
    // This is a hardcoded node ID, you'll probably want to load 
    // this from config, or something.
    $nid = 3;
    $entity_type = 'node';
    $view_mode = 'default';

    $view_builder = \Drupal::entityTypeManager()->getViewBuilder($entity_type);
    $storage = \Drupal::entityTypeManager()->getStorage($entity_type);
    $node = $storage->load($nid);
    $build = $view_builder->view($node, $view_mode);
    return $build;


As noted, this example is hardcoding node ID of '3'. You could create a Form that could store a configurable value, and load this up here. But the point is, this will render the given node ID in the specified view mode, "default" in this case, but again, this could be configurable.

Now that you have a controller, you'll just have to wire it up to your path. So create a routing yml file - the path should be angular_router/angular_router.routing.yml. You can wire up the route by adding this to the file:

  path: '/angularpage/{param}'
    _controller: '\Drupal\angular_router\Controller\AngularPageController::content' 
    _permission: 'access content' 

Note the _controller points to the controller created above. The {param} is just an arbitrary placeholder for an expected user provided parameter. This should serve as the "wildcard", so that going to /angularpage/foo, /angularpage/bar, etc. should all point at this controller, which you have now setup to only ever serve the specified node output.

Hopefully, I've understood what you're wanting to do, and this will work out for your implementation. I can't say that I've verified it against Angular or anything, but I think this answers your question.

  • Tyler, thanks for answering. In your answer you defined the URL for the page hardcoded, and I wanted it to be used from the URL alias of a Content Type: Angular Page. I found a way to do it by creating routes dynamically. My problem now is how to override/erase the path that Drupal sets from the URL alias so that my configured route works. (if the URL alias is /angularpage then i want my dynamic route to work instead of the Drupal route system.. i there must be some hook that disables it.. I'll try to find it. Thanks !
    – Yaron
    Commented May 21, 2019 at 10:50
  • You need a route to kick off the Controller
    – Kevin
    Commented May 21, 2019 at 10:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.