Feature/angular load correct versioned files from symfony (#122)

* Allow loading of angular prod build files (quick'n dirty files)

* Lighter Controller for Ng and Cache to prevent calling again and again the controller

Author: Rebolon

config/services.yaml

@@ -34,6 +34,7 @@ services:
             $apiPlatformPrefix: '%api_platform_prefix%'
             $tokenJwtTtl: '%token_jwt_ttl%'
             $tokenJwtBearer: '%token_jwt_bearer%'
+            $kernelProjectDir: '%kernel.project_dir%'
 
     # makes classes in src/ available to be used as services
     # this creates a service per class whose id is the fully-qualified class name

src/Controller/FormDevXpressAngularController.php

@@ -2,19 +2,27 @@
 
 namespace App\Controller;
 
+use App\Tools\AngularCli;
+use Sensio\Bundle\FrameworkExtraBundle\Configuration\Cache;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
 use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Yaml\Yaml;
 
 class FormDevXpressAngularController extends Controller
 {
     /**
+     * @var string $kernelProjectDir
      * @Route("/demo/form/devxpress-angular/{ngRouteName}", requirements={"ngRouteName"=".*"}, defaults={"ngRouteName"="home"})
      * @Method({"GET"})
+     * @Cache(maxage="2 weeks")
      */
-    public function index()
+    public function index(string $kernelProjectDir)
     {
+        $ngFiles = AngularCli::getNgBuildFiles($kernelProjectDir);
+
         return $this->render('form-devxpress-angular/app.html.twig', [
+            'ngFiles' => $ngFiles,
             'appName' => 'devxpress-angular',
             'title' => 'DevxpressAngular',
             'preventParentJs' => true, // since Angular6, but maybe need to build nativeElement to solve this

src/Tools/AngularCli.php

@@ -0,0 +1,67 @@
+<?php
+namespace App\Tools;
+
+class AngularCli
+{
+    /**
+     * @param string $kernelProjectDir
+     * @return array
+     */
+    public static function getNgBuildFiles(string $kernelProjectDir): array
+    {
+        // Quick'n a bit dirty solution to load correct ng files (until now, prod build with version string in name cannot be loaded)
+        $ngFiles = [
+            'js' => [ // take care at the order it's very important !!!
+                'runtime' => 'runtime.js',
+                'polyfills' => 'polyfills.js',
+                'vendor' => 'vendor.js',
+                'main' => 'main.js',
+            ],
+            'css' => [
+                'styles' => 'styles.css',
+            ]
+        ];
+        $json = file_get_contents($kernelProjectDir . '/assets/js/form-devxpress-angular/angular.json');
+        $jsonDecoded = json_decode($json, true);
+        $path = $jsonDecoded['projects']['devxpress']['targets']['build']['options']['outputPath'];
+        $pathParts = explode('/', $path);
+        $ngBuildDir = [];
+        $startBuildBir = false;
+        foreach ($pathParts as $oneDir) {
+            if ($oneDir === 'public') {
+                $startBuildBir = true;
+            }
+
+            if (!$startBuildBir) {
+                continue;
+            }
+
+            $ngBuildDir[] = $oneDir;
+        }
+
+        // find build files
+        $ngBuildDirFromProject = '/' . implode('/', $ngBuildDir);
+        $ngBuildDirFromPublic = '/' . implode('/', array_slice($ngBuildDir, 1));
+        $dirIt = new \DirectoryIterator($kernelProjectDir . $ngBuildDirFromProject);
+        foreach ($dirIt as $iteration) {
+            if ($iteration->isFile()) {
+                // improve this using array_* functions
+                foreach ($ngFiles['js'] as $jsKey => $jsNgFile) {
+                    if (strpos($iteration->getBasename(), $jsKey) !== false) {
+                        $ngFiles['js'][$jsKey] = $ngBuildDirFromPublic.$iteration->getBasename();
+                        continue;
+                    }
+                }
+
+                foreach ($ngFiles['css'] as $cssKey => $cssNgFile) {
+                    if (strpos($iteration->getBasename(), $cssKey) !== false) {
+                        $ngFiles['css'][$cssKey] = $ngBuildDirFromPublic.$iteration->getBasename();
+                        continue;
+                    }
+                }
+            }
+        }
+
+        return $ngFiles;
+    }
+}

templates/form-devxpress-angular/app.html.twig

@@ -12,24 +12,23 @@
 
 {% block stylesheets %}
     {# this one is generated by --extract-css option from build command #}
-    <link rel="stylesheet" type="text/css" href="/dist-ng/devxpress/styles.css" />
+    {% for cssFile in ngFiles.css %}
+    <link rel="stylesheet" type="text/css" href="{{ cssFile }}" />
+    {% endfor %}
 
     {{ parent() }}
-<!-- preload JS -->
-<link rel="preload" href="/dist-ng/devxpress/runtime.js" as="script"/>
-<link rel="preload" href="/dist-ng/devxpress/polyfills.js" as="script"/>
-<link rel="preload" href="/dist-ng/devxpress/vendor.js" as="script"/><!-- not in prod, only dev -->
-<link rel="preload" href="/dist-ng/devxpress/main.js" as="script"/>
+    <!-- preload JS -->
+    {% for jsFile in ngFiles.js %}
+    <link rel="preload" href="{{ jsFile }}" as="script"/>
+    {% endfor %}
 {% endblock %}
 
 {% block body %}
     <app-root></app-root>
 {% endblock %}
 
 {% block javascripts %}
-    <!-- HardCoded part whereas it should be generated with ngcli build system: it should be better to serve the  -->
-    <script type="text/javascript" src="/dist-ng/devxpress/runtime.js"></script>
-    <script type="text/javascript" src="/dist-ng/devxpress/polyfills.js"></script><!-- generate Zone already loaded. Error -->
-    <script type="text/javascript" src="/dist-ng/devxpress/vendor.js"></script><!-- not in prod, only dev -->
-    <script type="text/javascript" src="/dist-ng/devxpress/main.js"></script>
+    {% for jsFile in ngFiles.js %}
+    <script type="text/javascript" src="{{ jsFile }}"></script>
+    {% endfor %}
 {%  endblock %}