fix: favicon linking logic

Author: patrickmichalina

package-lock.json

@@ -74,6 +74,7 @@
     "@nguniversal/express-engine": "^6.0.0",
     "@types/cookie-parser": "^1.4.1",
     "@types/express": "^4.16.0",
+    "@types/fs-extra": "^5.0.4",
     "@types/jest": "^23.1.6",
     "@types/lru-cache": "^4.1.1",
     "@types/node": "^10.5.2",
@@ -89,6 +90,7 @@
     "express": "^4.16.3",
     "favicons": "^5.1.1",
     "firebase": "^5.2.0",
+    "fs-extra": "^6.0.1",
     "fuse-box": "^3.4.0",
     "hammerjs": "^2.0.8",
     "iltorb": "^2.3.2",

package.json

@@ -316,6 +316,10 @@ function create(overwriteExisting = false) {
       flatMap(toEnsureProjectDirectoryExists, im => im),
       flatMap(im => {
         const path = resolve(im.config.fullname)
+        const faviOverrides = {
+          appName: im.config.fullname,
+          appShortName: im.config.shortname
+        }
         const firebaseConfig: FirebaseConfig | undefined = im.config.firebase
           ? {
               apiKey: im.config.firebaseApiKey,
@@ -340,7 +344,7 @@ function create(overwriteExisting = false) {
             im.config.googleAnalyticsTrackingId,
             im.config.googleSiteVerificationCode
           ),
-          generateFngConfig(path, overwriteExisting),
+          generateFngConfig(path, overwriteExisting, faviOverrides),
           generateTsConfig(path, overwriteExisting),
           generateTsDeclartionFile(path, overwriteExisting),
           im.config.ide

src/commands/create.ts

@@ -2,7 +2,7 @@ import { command } from 'yargs'
 import { logInfoWithBackground, logError } from '../utilities/log'
 import { flatMap, map, first, filter, tap } from 'rxjs/operators'
 import { rxFavicons } from '../utilities/rx-favicon'
-import { writeFile_, mkDirDeep_ } from '../utilities/rx-fs'
+import { writeFile_, mkDirDeep_, writeJsonFile_ } from '../utilities/rx-fs'
 import { resolve } from 'path'
 import { forkJoin } from 'rxjs'
 import readConfig_, {
@@ -52,8 +52,32 @@ interface configModel {
 }
 
 function mapResponsesToWriteableObservables(response: configModel) {
-  return response.result.images.map(file =>
-    writeFile_(resolve(`${response.config.output}/${file.name}`), file.contents)
+  return readConfig_().pipe(
+    flatMap(config => {
+      const _confg = {
+        ...config,
+        generatedMetaTags: response.result.html
+      }
+      return writeJsonFile_(resolve('fusing-angular.json'), _confg, true)
+    }),
+    flatMap(() => {
+      return forkJoin(
+        ...response.result.files.map(file =>
+          writeFile_(
+            resolve(`${response.config.output}/${file.name}`),
+            file.contents
+          )
+        )
+      )
+    }),
+    map(() => {
+      return response.result.images.map(file =>
+        writeFile_(
+          resolve(`${response.config.output}/${file.name}`),
+          file.contents
+        )
+      )
+    })
   )
 }
 

src/commands/favicon.ts

@@ -24,6 +24,7 @@ import { exec, execSync } from 'child_process'
 import { NgSwPlugin } from '../fusebox/ng.sw.plugin'
 import clearTerminal from '../utilities/clear'
 import readConfig_ from '../utilities/read-config'
+import { copy } from 'fs-extra'
 
 command(
   'serve [port][prod][aot][sw]',
@@ -95,7 +96,8 @@ function serve(isProdBuild = false, isServiceWorkerEnabled = false) {
             engine: 'pug',
             locals: {
               pageTitle: 'FUSING ANGULAR',
-              isLocalDev
+              isLocalDev,
+              faviconMeta: (config.generatedMetaTags || []).join('\n')
             }
           }),
           NgProdPlugin({ enabled: isProdBuild }),
@@ -223,8 +225,10 @@ function serve(isProdBuild = false, isServiceWorkerEnabled = false) {
         process.exit(1)
       })
 
-      fuseSw.run().then(() => {
-        fuseBrowser.run({ chokidar: { ignored: /^(.*\.scss$)*$/gim } })
-      })
+      copy(resolve('src/assets'), resolve('.dist/public/assets'))
+        .then(() => fuseSw.run())
+        .then(() => {
+          fuseBrowser.run({ chokidar: { ignored: /^(.*\.scss$)*$/gim } })
+        })
     })
 }

src/commands/serve.ts

@@ -5,11 +5,18 @@ import { FUSEBOX_DEFAULTS as fusebox } from '../templates/fusebox'
 
 const configPath = 'fusing-angular.json'
 
-export default function generateFngConfig(path: string, overwrite = false) {
+export default function generateFngConfig(
+  path: string,
+  overwrite = false,
+  faviconOverride?: any
+) {
   return writeJsonFile_(
     resolve(path, configPath),
     {
-      favicon,
+      favicon: {
+        ...favicon,
+        ...faviconOverride
+      },
       fusebox
     },
     overwrite

src/generators/config.gen.ts

@@ -5,6 +5,7 @@ html(lang="en")
     base(href="/")
     meta(charset="utf-8")
     meta(name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0")
+    != faviconMeta
   body
     app-root
     | $bundles

src/templates/core/app/index.pug.txt

@@ -1,5 +1,17 @@
 export const FAVICON_DEFAULTS = {
-  source: 'src/misc/logo.svg',
+  source: 'src/app/favicon.svg',
   output: 'src/assets/favicons',
-  config: {}
+  config: {
+    path: '/',
+    appName: null,
+    appDescription: null,
+    developerName: null,
+    developerURL: null,
+    lang: 'en-US',
+    background: '#fff',
+    theme_color: '#fff',
+    display: 'standalone',
+    orientation: 'any',
+    start_url: '/'
+  }
 }

src/templates/favicon.ts

@@ -42,6 +42,7 @@ export interface FusingAngularConfig {
   readonly favicon: FaviconConfig
   readonly fusebox: FuseBoxConfig
   readonly environment: EnvironmentConfig
+  readonly generatedMetaTags?: ReadonlyArray<string>
 }
 
 export default function readConfig_() {

src/utilities/read-config.ts

@@ -16,7 +16,9 @@ function callback(config: FaviconConfig) {
 export function rxFavicons(config?: FaviconConfig) {
   const _config = {
     source: resolve('src/misc/logo.svg'),
-    configuration: {},
+    configuration: {
+      path: '/assets/favicons'
+    },
     ...config
   } as FaviconConfig