Update build process:

* To get the config from .json files, this should support multi environment with different config (dev, test, stage and prod as fro example)
* Getting Google Tag Manager to index page by config file, if it is missing it will not add <sccript> tag to index page (this is replacing Google Analytics)

config/build-utils.js

@@ -3,8 +3,11 @@ const path = require('path');
 const fs = require('fs');
 const helpers = require('./helpers');
 
+const APP_COMMON_CONFIG = require('./config.common.json');
+
 const DEFAULT_METADATA = {
-  title: 'Angular Starter by @gdi2290 from @TipeIO',
+  title: APP_COMMON_CONFIG.title,
+  description: APP_COMMON_CONFIG.description,
   baseUrl: '/',
   isDevServer: helpers.isWebpackDevServer(),
   HMR: helpers.hasProcessFlag('hot'),

config/config.common.json

@@ -0,0 +1,4 @@
+{
+  "title": "Angular Starter by @gdi2290 from @TipeIO",
+  "description": "An Angular starter kit featuring Angular 5, Ahead of Time Compile, Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack by Tipe.io"
+}

config/config.dev.json

@@ -0,0 +1,10 @@
+{
+  "firebase": {
+    "apiKey": "",
+    "authDomain": "XXXXXX.firebaseapp.com",
+    "databaseURL": "https://XXXXXX.firebaseio.com",
+    "projectId": "XXXXXX",
+    "storageBucket": "XXXXXX.appspot.com",
+    "messagingSenderId": "000000000000"
+  }
+}

config/config.prod.json

@@ -0,0 +1,11 @@
+{
+  "firebase": {
+    "apiKey": "",
+    "authDomain": "XXXXXX.firebaseapp.com",
+    "databaseURL": "https://XXXXXX.firebaseio.com",
+    "projectId": "XXXXXX",
+    "storageBucket": "XXXXXX.appspot.com",
+    "messagingSenderId": "000000000000"
+  },
+  "gtmKey" : "GTM-XXXXXXX"
+}

config/webpack.common.js

@@ -21,15 +21,18 @@ const ngcWebpack = require('ngc-webpack');
 
 const buildUtils = require('./build-utils');
 
-
 /**
  * Webpack configuration
  *
  * See: https://webpack.js.org/configuration/
  */
 module.exports = function (options) {
   const isProd = options.env === 'production';
-  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
+  const APP_CONFIG = require(process.env.ANGULAR_CONF_FILE || (isProd ? './config.prod.json' : './config.dev.json'));
+
+  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA,options.metadata || {});
+  const GTM_API_KEY = process.env.GTM_API_KEY || APP_CONFIG.gtmKey;
+
   const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
   const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
 
@@ -179,7 +182,8 @@ module.exports = function (options) {
         'AOT': METADATA.AOT,
         'process.env.ENV': JSON.stringify(METADATA.ENV),
         'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
-        'process.env.HMR': METADATA.HMR
+        'process.env.HMR': METADATA.HMR,
+        // 'FIREBASE_CONFIG': JSON.stringify(APP_CONFIG.firebase),
       }),
 
       /**
@@ -238,6 +242,7 @@ module.exports = function (options) {
           return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
         },
         metadata: METADATA,
+        gtmKey: GTM_API_KEY,
         inject: 'body',
         xhtml: true,
         minify: isProd ? {
@@ -321,4 +326,4 @@ module.exports = function (options) {
     }
 
   };
-}
+};

package.json

@@ -61,6 +61,7 @@
     "server:prod": "http-server dist -c-1 --cors",
     "server:prod:ci": "http-server dist -p 3000 -c-1 --cors",
     "server": "npm run server:dev",
+    "start:prod:hmr": "cross-env ANGULAR_CONF_FILE=./config.prod.json npm run server:dev:hmr",
     "start:hmr": "npm run server:dev:hmr",
     "start": "npm run server:dev",
     "start:aot": "npm run server:aot:dev",

src/custom-typings.d.ts

@@ -60,6 +60,16 @@ declare module 'modern-lru' {
 declare var ENV: string;
 declare var HMR: boolean;
 declare var System: SystemJS;
+// declare const FIREBASE_CONFIG: FirebaseConfig;
+
+interface FirebaseConfig {
+  apiKey: string;
+  authDomain: string;
+  databaseURL: string;
+  projectId: string;
+  storageBucket: string;
+  messagingSenderId: string;
+}
 
 interface SystemJS {
   import: (path?: string) => Promise<any>;
@@ -70,6 +80,7 @@ interface GlobalEnvironment {
   HMR: boolean;
   SystemJS: SystemJS;
   System: SystemJS;
+  // FIREBASE_CONFIG: FirebaseConfig;
 }
 
 interface Es6PromiseLoader {

src/environments/environment.e2e.prod.ts

@@ -5,6 +5,8 @@ import { Environment } from './model';
 
 enableProdMode();
 
+// export const ENV_FIREBASE_CONFIG: any = FIREBASE_CONFIG;
+
 export const environment: Environment = {
   production: true,
   showDevModule: true,

src/environments/environment.prod.ts

@@ -5,6 +5,8 @@ import { Environment } from './model';
 
 enableProdMode();
 
+// export const ENV_FIREBASE_CONFIG: any = FIREBASE_CONFIG;
+
 export const environment: Environment = {
   production: true,
   showDevModule: false,

src/environments/environment.ts

@@ -7,6 +7,8 @@ import { Environment } from './model';
 Error.stackTraceLimit = Infinity;
 require('zone.js/dist/long-stack-trace-zone');
 
+// export const ENV_FIREBASE_CONFIG: any = FIREBASE_CONFIG;
+
 export const environment: Environment = {
   production: false,
 

src/index.html

@@ -5,7 +5,7 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><%= htmlWebpackPlugin.options.title %></title>
-  <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">
+  <meta name="description" content="<%= htmlWebpackPlugin.options.metadata.description %>">
   <!-- base url -->
   <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
   <% if (webpackConfig.htmlElements.headTags) { %>
@@ -21,13 +21,16 @@
   <script src="/webpack-dev-server.js"></script>
   <% } %>
 
-  <!-- Async Google Analytics: change UA-71073175-1 to be your site's ID -->
-  <script>
-    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-    ga('create', 'UA-71073175-1', 'auto');
-    ga('send', 'pageview');
-  </script>
-  <script async src="https://www.google-analytics.com/analytics.js"></script>
+  <!-- Async Google Tag Manager: change gtmKey value inside config.prod.conf to your to be your site's ID-->
+  <% if (htmlWebpackPlugin.options.gtmKey) { %>
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','<%= htmlWebpackPlugin.options.gtmKey %>');</script>
+  <!-- End Google Tag Manager -->
+  <% } %>
   <!-- End Google Analytics -->
 
   <!-- CSS will be injected by webpack here -->
@@ -36,6 +39,12 @@
 </head>
 
 <body>
+<% if (htmlWebpackPlugin.options.gtmKey) { %>
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<%= htmlWebpackPlugin.options.gtmKey %>"
+                  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+<% } %>
 
   <app>
     Loading...