From d0fcfd9d03b4437b3ff64f038b171774caaf48b0 Mon Sep 17 00:00:00 2001
From: iRealNirmal <nil4u.you@gmail.com>
Date: Sat, 8 May 2021 14:21:21 +0530
Subject: [PATCH] docs: fixed animation broken stackblitz example

This commit fixes the broken stackblitz example of animation.

Closes #41838.
---
 aio/content/examples/i18n/stackblitz.json     |  3 +-
 aio/content/examples/testing/stackblitz.json  |  3 +-
 .../shared/boilerplate/i18n/package.json      |  3 +-
 aio/tools/stackblitz-builder/builder.js       | 29 ++++++++++++++++---
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/aio/content/examples/i18n/stackblitz.json b/aio/content/examples/i18n/stackblitz.json
index 8326f3902b8b2d..d00974aa1d8556 100644
--- a/aio/content/examples/i18n/stackblitz.json
+++ b/aio/content/examples/i18n/stackblitz.json
@@ -8,5 +8,6 @@
       "**/*.xlf"
     ],
     "file": "src/app/app.component.ts", 
-    "tags": ["Angular", "i18n", "internationalization"]
+    "tags": ["Angular", "i18n", "internationalization"],
+    "devDependencies": ["@angular/compiler-cli", "typescript"]
 }
diff --git a/aio/content/examples/testing/stackblitz.json b/aio/content/examples/testing/stackblitz.json
index 5575ff85110502..3264b6dd994955 100644
--- a/aio/content/examples/testing/stackblitz.json
+++ b/aio/content/examples/testing/stackblitz.json
@@ -14,5 +14,6 @@
 
     "!src/**/*.spec.ts"
   ],
-  "tags": ["testing"]
+  "tags": ["testing"],
+  "devDependencies": ["jasmine-core", "jasmine-marbles"]
 }
diff --git a/aio/tools/examples/shared/boilerplate/i18n/package.json b/aio/tools/examples/shared/boilerplate/i18n/package.json
index 2c4997d3a22e33..9a81bafe844351 100644
--- a/aio/tools/examples/shared/boilerplate/i18n/package.json
+++ b/aio/tools/examples/shared/boilerplate/i18n/package.json
@@ -47,7 +47,6 @@
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.1.5"
+    "tslint": "~6.1.0"
   }
 }
diff --git a/aio/tools/stackblitz-builder/builder.js b/aio/tools/stackblitz-builder/builder.js
index d24a559ce87f0e..0967a55ab09ebd 100644
--- a/aio/tools/stackblitz-builder/builder.js
+++ b/aio/tools/stackblitz-builder/builder.js
@@ -40,19 +40,40 @@ class StackblitzBuilder {
     }
   }
 
-  _addDependencies(config, postData) {
+  _addDependencies(config, postData, stackBlitzJson) {
     // Extract npm package dependencies
     const exampleType = this._getExampleType(config.basePath);
     const packageJson = this._getBoilerplatePackageJson(exampleType) || this._getBoilerplatePackageJson('cli');
+    const testStackblitzestPath = path.join(this.basePath, '/testing/stackblitz.json');
+    const stackblitzJsonDevDependencies = this._getDevDependencies(stackBlitzJson);
+    const stackblitzJsonTestDependencies = this._getDevDependencies(testStackblitzestPath);
     const exampleDependencies = packageJson.dependencies;
 
-    // Add unit test packages from devDependencies for unit test examples
+    
     const devDependencies = packageJson.devDependencies;
-    ['jasmine-core', 'jasmine-marbles'].forEach(dep => exampleDependencies[dep] = devDependencies[dep]);
+    // Add unit test packages from devDependencies for unit test examples
+    stackblitzJsonTestDependencies.forEach(dep => exampleDependencies[dep] = devDependencies[dep]);
+    // Add unit test packages from devDependencies for unit example if exists
+    stackblitzJsonDevDependencies.forEach(dep => exampleDependencies[dep] = devDependencies[dep]);
 
     postData.dependencies = JSON.stringify(exampleDependencies);
   }
 
+  /**
+    * Get devDependecies from the file path passed as parameter
+    * 
+    * @param path file path to get from and reuse this method
+    * @returns devDependencies of file else blank array in case it doesn't exists
+    */
+  _getDevDependencies(path) {
+    let file;
+    if (path) {
+      const filePath = `${path}`;
+      file = fs.existsSync(filePath) ? require(filePath) : null;
+    }
+    return file?.devDependencies|| [];
+  }
+
   _getExampleType(exampleDir) {
     const configPath = `${exampleDir}/example-config.json`;
     const configSrc = fs.existsSync(configPath) && fs.readFileSync(configPath, 'utf-8').trim();
@@ -100,7 +121,7 @@ class StackblitzBuilder {
     try {
       const config = this._initConfigAndCollectFileNames(configFileName);
       const postData = this._createPostData(config, configFileName);
-      this._addDependencies(config, postData);
+      this._addDependencies(config, postData, configFileName);
       const html = this._createStackblitzHtml(config, postData);
       fs.writeFileSync(outputFileName, html, 'utf-8');
       if (altFileName) {