Nette Framework - Return an Angular 2 app

I'm creating an application using Nette framework in the backend and for frontend I would like to use an app built on Angular 2 framework.

So in my solution, I need to send the Angular 2 based app from Nette in the backend right to the user. How to use Nette for providing this app?

Solution

Let's assume that right after visiting your page (for example - myapp.com) the request goes to Homepage presenter.

Routing

If you haven't already, please set this route in your RouterFactory (commonly in /app/RouterFactory.php)

$router[] = new Route('/', 'Homepage:default');

Homepage presenter

/app/presenters/HomepagePresenter.php

<?php

namespace App\Presenters;

use Nette;
use Latte\Engine;
use Nette\Bridges\ApplicationLatte\Template;

class HomepagePresenter extends BasePresenter {
    public function renderDefault() {
        $this->setView('angular2App');
    }
}

After accessing this default() action, we need to render a template, which contains the Angular 2 app.

Angular2 app

With our template angular2App.latte, is also needed to return the Angular 2 stuff. Commonly this consists of maximum of 4 files if you compile it well.

For compilation use Gulp or Grunt, which translates, compiles, uglifyies and finally joins all your Angular 2 files into 3 or 4 (just like in production)

The final directory with Angular 2 app compiled looks this way

/dist
├───src
│   └───app.min.js
├───styles
│   ├───app.css
│   └───vendor.css
└───index.html

This is what is needed to be returned with our template. Take the /dist folder and put it into the public /www folder in Nette, you can also rename it into /myapp-frontend

This all could be automated later.

Template

/app/presenters/templates/@layout.latte

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <base href="/" />

    <title>myapp.com</title>

    {block styles}{/block}

    <script>window.module = 'aot';</script>
</head>
<body>
    <div class="page">
        <app>For full functionality of this app, please enable Javascript in your browser.</app>
    </div>

    {block scripts}{/block}
</body>
</html>

/app/presenters/templates/Homepage/angular2App.latte

{block styles}
    <link href="/myapp-frontend/styles/vendor.css" rel="stylesheet" />
    <link href="/myapp-frontend/styles/app.css" rel="stylesheet" />
{/block}

{block scripts}
    <script src="/myapp-frontend/src/app.min.js" async defer></script>
{/block}

Let Angular 2 do the routing instead of Nette

Take a look at this post Nette Framework - Route everything to one presenter