Clone common-styles app to theming app

angular.json

@@ -479,6 +479,123 @@
         }
       }
     },
+    "frontend-theming": {
+      "projectType": "application",
+      "schematics": {
+        "@nrwl/angular:component": {
+          "style": "scss",
+          "changeDetection": "OnPush"
+        }
+      },
+      "root": "apps/frontend/theming",
+      "sourceRoot": "apps/frontend/theming/src",
+      "prefix": "medium-stories",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/apps/frontend/theming/browser",
+            "index": "apps/frontend/theming/src/index.html",
+            "main": "apps/frontend/theming/src/main.browser.ts",
+            "polyfills": "apps/frontend/theming/src/polyfills.ts",
+            "tsConfig": "apps/frontend/theming/tsconfig.app.json",
+            "aot": false,
+            "assets": ["apps/frontend/theming/src/favicon.ico", "apps/frontend/theming/src/assets"],
+            "styles": ["apps/frontend/theming/src/styles.scss"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["apps/frontend/theming/src/styles"]
+            },
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "apps/frontend/theming/src/environments/environment.ts",
+                  "with": "apps/frontend/theming/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "frontend-theming:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "frontend-theming:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "frontend-theming:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["apps/frontend/theming/tsconfig.app.json", "apps/frontend/theming/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**", "!apps/frontend/theming/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "apps/frontend/theming/jest.config.js",
+            "tsConfig": "apps/frontend/theming/tsconfig.spec.json",
+            "setupFile": "apps/frontend/theming/src/test-setup.ts"
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "bundleDependencies": "none",
+            "outputPath": "dist/apps/frontend/theming/server",
+            "main": "apps/frontend/theming/src/main.server.ts",
+            "tsConfig": "apps/frontend/theming/tsconfig.server.json",
+            "stylePreprocessorOptions": {
+              "includePaths": ["apps/frontend/theming/src/styles"]
+            }
+          },
+          "configurations": {
+            "production": {
+              "bundleDependencies": "all",
+              "fileReplacements": [
+                {
+                  "replace": "apps/frontend/theming/src/environments/environment.ts",
+                  "with": "apps/frontend/theming/src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": {
+                "scripts": false,
+                "styles": true
+              }
+            }
+          }
+        }
+      }
+    },
     "frontend-translation": {
       "projectType": "application",
       "schematics": {

apps/frontend/theming/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

apps/frontend/theming/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  name: 'frontend-base',
+  preset: '../../../jest.config.js',
+  coverageDirectory: '../../../coverage/apps/frontend/base',
+  snapshotSerializers: ['jest-preset-angular/AngularSnapshotSerializer.js', 'jest-preset-angular/HTMLCommentSerializer.js']
+};

apps/frontend/theming/server.ts

@@ -0,0 +1,82 @@
+/**
+ * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
+ *
+ * If your application uses third-party dependencies, you'll need to
+ * either use Webpack or the Angular CLI's `bundleDependencies` feature
+ * in order to adequately package them for use on the server without a
+ * node_modules directory.
+ *
+ * However, due to the nature of the CLI's `bundleDependencies`, importing
+ * Angular in this file will create a different instance of Angular than
+ * the version in the compiled application code. This leads to unavoidable
+ * conflicts. Therefore, please do not explicitly import from @angular or
+ * @nguniversal in this file. You can export any needed resources
+ * from your application's main.server.ts file, as seen below with the
+ * import for `ngExpressEngine`.
+ */
+import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
+import 'zone.js/dist/zone-node';
+
+import * as express from 'express';
+import { join } from 'path';
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist', 'apps');
+const appName = 'frontend/theming';
+const appBrowser = join(DIST_FOLDER, appName, 'browser');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {
+  AppServerModuleNgFactory,
+  LAZY_MODULE_MAP,
+  ngExpressEngine,
+  provideModuleMap
+} = require('../../../dist/apps/frontend/theming/server/main');
+
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine(
+  'html',
+  ngExpressEngine({
+    bootstrap: AppServerModuleNgFactory,
+    providers: [provideModuleMap(LAZY_MODULE_MAP)]
+  })
+);
+
+app.set('view engine', 'html');
+app.set('views', appBrowser);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Serve static files from /browser
+app.get(
+  '*.*',
+  express.static(appBrowser, {
+    maxAge: '1y'
+  })
+);
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render(join(appBrowser, 'index.html'), {
+    req,
+    res,
+    providers: [
+      {
+        provide: REQUEST,
+        useValue: req
+      },
+      {
+        provide: RESPONSE,
+        useValue: res
+      }
+    ]
+  });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});

apps/frontend/theming/src/app/app.browser.module.spec.ts

@@ -0,0 +1,15 @@
+import { async, TestBed } from '@angular/core/testing';
+
+import { AppBrowserModule } from './app.browser.module';
+
+describe('AppBrowserModule', () => {
+  beforeEach(async(() => {
+    return TestBed.configureTestingModule({
+      imports: [AppBrowserModule]
+    }).compileComponents();
+  }));
+
+  it('should create', () => {
+    expect(AppBrowserModule).toBeTruthy();
+  });
+});

apps/frontend/theming/src/app/app.browser.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+
+import { BrowserStorageModule } from '@medium-stories/storage';
+import { BrowserTranslationModule } from '@medium-stories/translation';
+
+import { AppModule } from './app.module';
+import { CoreModule } from './core/core.module';
+import { AppComponent } from './core/containers/app/app.component';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  imports: [
+    AppModule,
+    CoreModule,
+    BrowserAnimationsModule,
+    BrowserStorageModule.forRoot(),
+    BrowserTranslationModule.forRoot({
+      config: environment.translation
+    }),
+    !environment.production ? StoreDevtoolsModule.instrument({ logOnly: environment.production }) : []
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppBrowserModule {}

apps/frontend/theming/src/app/app.module.spec.ts

@@ -0,0 +1,15 @@
+import { async, TestBed } from '@angular/core/testing';
+
+import { AppModule } from './app.module';
+
+describe('AppModule', () => {
+  beforeEach(async(() => {
+    return TestBed.configureTestingModule({
+      imports: [AppModule]
+    }).compileComponents();
+  }));
+
+  it('should create', () => {
+    expect(AppModule).toBeTruthy();
+  });
+});

apps/frontend/theming/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { TransferHttpCacheModule } from '@nguniversal/common';
+
+import { APP_DIST } from '@medium-stories/common';
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'medium-stories' }),
+    HttpClientModule,
+    BrowserTransferStateModule,
+    TransferHttpCacheModule
+  ],
+  providers: [
+    {
+      provide: APP_DIST, // need to get translation path on Universal
+      useValue: 'frontend/translation'
+    }
+  ]
+})
+export class AppModule {}

apps/frontend/theming/src/app/app.server.module.spec.ts

@@ -0,0 +1,15 @@
+import { async, TestBed } from '@angular/core/testing';
+
+import { AppServerModule } from './app.server.module';
+
+describe('AppServerModule', () => {
+  beforeEach(async(() => {
+    return TestBed.configureTestingModule({
+      imports: [AppServerModule]
+    }).compileComponents();
+  }));
+
+  it('should create', () => {
+    expect(AppServerModule).toBeTruthy();
+  });
+});

apps/frontend/theming/src/app/app.server.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+import { ServerStorageModule } from '@medium-stories/storage';
+import { ServerTranslationModule } from '@medium-stories/translation';
+
+import { environment } from '../environments/environment';
+import { AppModule } from './app.module';
+import { CoreModule } from './core/core.module';
+import { AppComponent } from './core/containers/app/app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    CoreModule,
+    ServerStorageModule.forRoot(),
+    ServerModule,
+    ServerTranslationModule.forRoot({
+      config: environment.translation
+    }),
+    ModuleMapLoaderModule,
+    ServerTransferStateModule
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppServerModule {}

apps/frontend/theming/src/app/core/containers/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

apps/frontend/theming/src/app/core/containers/app/app.component.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
+  beforeEach(async(() => {
+    return TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/frontend/theming/src/app/core/containers/app/app.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { TranslationFacade } from '@medium-stories/translation';
+
+@Component({
+  selector: 'medium-stories-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  constructor(private translationFacade: TranslationFacade) {
+    this.translationFacade.init();
+  }
+}