From bce99a701bbfb7ab6bce5a5fca327c886a97dfc7 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Fri, 28 Dec 2018 01:56:49 -0500 Subject: [PATCH 1/2] fix(style): add SSR capabilities --- src/apps/universal-app/.editorconfig | 2 +- src/apps/universal-app/.gitignore | 43 +++++++++++ src/apps/universal-app/README.md | 4 +- src/apps/universal-app/angular.json | 71 ++++++++++++------- .../{ => e2e}/protractor.conf.js | 6 +- .../e2e/{ => src}/app.e2e-spec.ts | 4 +- .../universal-app/e2e/{ => src}/app.po.ts | 4 +- src/apps/universal-app/e2e/tsconfig.e2e.json | 5 +- src/apps/universal-app/package.json | 47 ++++++------ src/apps/universal-app/server.ts | 22 ++---- .../universal-app/src/app/app.component.html | 2 +- src/apps/universal-app/src/browserslist | 11 +++ .../src/environments/environment.ts | 16 +++-- .../universal-app/{ => src}/karma.conf.js | 8 +-- src/apps/universal-app/src/main.ts | 2 +- src/apps/universal-app/src/polyfills.ts | 34 ++++++--- src/apps/universal-app/src/styles.scss | 39 ---------- src/apps/universal-app/src/tsconfig.app.json | 2 - .../universal-app/src/tsconfig.server.json | 12 +--- src/apps/universal-app/src/tsconfig.spec.json | 2 - src/apps/universal-app/src/tslint.json | 17 +++++ src/apps/universal-app/src/typings.d.ts | 5 -- src/apps/universal-app/tsconfig.json | 11 +-- src/apps/universal-app/tslint.json | 19 ++--- .../universal-app/webpack.server.config.js | 30 +++++--- src/lib/extended/style/style.ts | 22 ++++-- tools/gulp/tasks/universal.ts | 7 +- 27 files changed, 257 insertions(+), 190 deletions(-) create mode 100644 src/apps/universal-app/.gitignore rename src/apps/universal-app/{ => e2e}/protractor.conf.js (86%) rename src/apps/universal-app/e2e/{ => src}/app.e2e-spec.ts (63%) rename src/apps/universal-app/e2e/{ => src}/app.po.ts (61%) create mode 100644 src/apps/universal-app/src/browserslist rename src/apps/universal-app/{ => src}/karma.conf.js (86%) create mode 100644 src/apps/universal-app/src/tslint.json delete mode 100644 src/apps/universal-app/src/typings.d.ts diff --git a/src/apps/universal-app/.editorconfig b/src/apps/universal-app/.editorconfig index 6e87a003d..e89330a61 100644 --- a/src/apps/universal-app/.editorconfig +++ b/src/apps/universal-app/.editorconfig @@ -1,4 +1,4 @@ -# Editor configuration, see http://editorconfig.org +# Editor configuration, see https://editorconfig.org root = true [*] diff --git a/src/apps/universal-app/.gitignore b/src/apps/universal-app/.gitignore new file mode 100644 index 000000000..85158b7a4 --- /dev/null +++ b/src/apps/universal-app/.gitignore @@ -0,0 +1,43 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp +/out-tsc + +# dependencies +/node_modules + +# profiling files +chrome-profiler-events.json +speed-measure-plugin.json + +# IDEs and editors +/.idea +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# IDE - VSCode +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log +npm-debug.log +yarn-error.log +testem.log +/typings + +# System Files +.DS_Store +Thumbs.db diff --git a/src/apps/universal-app/README.md b/src/apps/universal-app/README.md index aeb107678..7f04309f6 100644 --- a/src/apps/universal-app/README.md +++ b/src/apps/universal-app/README.md @@ -1,6 +1,6 @@ # UniversalApp -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.6. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.2. ## Development server @@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can ## Build -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. ## Running unit tests diff --git a/src/apps/universal-app/angular.json b/src/apps/universal-app/angular.json index 368e1215b..a3a46c46b 100644 --- a/src/apps/universal-app/angular.json +++ b/src/apps/universal-app/angular.json @@ -7,6 +7,12 @@ "root": "", "sourceRoot": "src", "projectType": "application", + "prefix": "app", + "schematics": { + "@schematics/angular:component": { + "styleext": "scss" + } + }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -14,11 +20,11 @@ "outputPath": "dist/browser", "index": "src/index.html", "main": "src/main.ts", - "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", + "tsConfig": "src/tsconfig.app.json", "assets": [ - "src/assets", - "src/favicon.ico" + "src/favicon.ico", + "src/assets" ], "styles": [ "src/styles.scss" @@ -27,6 +33,12 @@ }, "configurations": { "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], "optimization": true, "outputHashing": "all", "sourceMap": false, @@ -36,10 +48,11 @@ "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, - "fileReplacements": [ + "budgets": [ { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" } ] } @@ -66,16 +79,16 @@ "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", - "karmaConfig": "./karma.conf.js", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", - "scripts": [], + "karmaConfig": "src/karma.conf.js", "styles": [ "src/styles.scss" ], + "scripts": [], "assets": [ - "src/assets", - "src/favicon.ico" + "src/favicon.ico", + "src/assets" ] } }, @@ -97,28 +110,41 @@ "outputPath": "dist/server", "main": "src/main.server.ts", "tsConfig": "src/tsconfig.server.json" + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ] + } } } } }, "universal-app-e2e": { - "root": "e2e", - "sourceRoot": "e2e", + "root": "e2e/", "projectType": "application", + "prefix": "", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { - "protractorConfig": "./protractor.conf.js", + "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "universal-app:serve" + }, + "configurations": { + "production": { + "devServerTarget": "universal-app:serve:production" + } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": [ - "e2e/tsconfig.e2e.json" - ], + "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] @@ -127,14 +153,5 @@ } } }, - "defaultProject": "universal-app", - "schematics": { - "@schematics/angular:component": { - "prefix": "responsive", - "styleext": "scss" - }, - "@schematics/angular:directive": { - "prefix": "responsive" - } - } -} \ No newline at end of file + "defaultProject": "universal-app" +} diff --git a/src/apps/universal-app/protractor.conf.js b/src/apps/universal-app/e2e/protractor.conf.js similarity index 86% rename from src/apps/universal-app/protractor.conf.js rename to src/apps/universal-app/e2e/protractor.conf.js index 7ee3b5ee8..86776a391 100644 --- a/src/apps/universal-app/protractor.conf.js +++ b/src/apps/universal-app/e2e/protractor.conf.js @@ -6,7 +6,7 @@ const { SpecReporter } = require('jasmine-spec-reporter'); exports.config = { allScriptsTimeout: 11000, specs: [ - './e2e/**/*.e2e-spec.ts' + './src/**/*.e2e-spec.ts' ], capabilities: { 'browserName': 'chrome' @@ -21,8 +21,8 @@ exports.config = { }, onPrepare() { require('ts-node').register({ - project: 'e2e/tsconfig.e2e.json' + project: require('path').join(__dirname, './tsconfig.e2e.json') }); jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); } -}; +}; \ No newline at end of file diff --git a/src/apps/universal-app/e2e/app.e2e-spec.ts b/src/apps/universal-app/e2e/src/app.e2e-spec.ts similarity index 63% rename from src/apps/universal-app/e2e/app.e2e-spec.ts rename to src/apps/universal-app/e2e/src/app.e2e-spec.ts index f01a51965..82bdd044f 100644 --- a/src/apps/universal-app/e2e/app.e2e-spec.ts +++ b/src/apps/universal-app/e2e/src/app.e2e-spec.ts @@ -1,6 +1,6 @@ import { AppPage } from './app.po'; -describe('universal-app App', () => { +describe('workspace-project App', () => { let page: AppPage; beforeEach(() => { @@ -9,6 +9,6 @@ describe('universal-app App', () => { it('should display welcome message', () => { page.navigateTo(); - expect(page.getParagraphText()).toEqual('Welcome to responsive!'); + expect(page.getTitleText()).toEqual('Welcome to universal-app!'); }); }); diff --git a/src/apps/universal-app/e2e/app.po.ts b/src/apps/universal-app/e2e/src/app.po.ts similarity index 61% rename from src/apps/universal-app/e2e/app.po.ts rename to src/apps/universal-app/e2e/src/app.po.ts index e3cdbd8d8..72e463a33 100644 --- a/src/apps/universal-app/e2e/app.po.ts +++ b/src/apps/universal-app/e2e/src/app.po.ts @@ -5,7 +5,7 @@ export class AppPage { return browser.get('/'); } - getParagraphText() { - return element(by.css('responsive-root h1')).getText(); + getTitleText() { + return element(by.css('app-root h1')).getText(); } } diff --git a/src/apps/universal-app/e2e/tsconfig.e2e.json b/src/apps/universal-app/e2e/tsconfig.e2e.json index 1d9e5edf0..a6dd62202 100644 --- a/src/apps/universal-app/e2e/tsconfig.e2e.json +++ b/src/apps/universal-app/e2e/tsconfig.e2e.json @@ -1,8 +1,7 @@ { "extends": "../tsconfig.json", "compilerOptions": { - "outDir": "../out-tsc/e2e", - "baseUrl": "./", + "outDir": "../out-tsc/app", "module": "commonjs", "target": "es5", "types": [ @@ -11,4 +10,4 @@ "node" ] } -} +} \ No newline at end of file diff --git a/src/apps/universal-app/package.json b/src/apps/universal-app/package.json index 502b80b80..3af69b20a 100644 --- a/src/apps/universal-app/package.json +++ b/src/apps/universal-app/package.json @@ -1,24 +1,22 @@ { "name": "universal-app", "version": "0.0.0", - "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e", "start:ssr": "npm run build:ssr && node dist/server.js", - "build": "ng build --prod", "build:server": "webpack --config webpack.server.config.js --progress --colors", "build:ssr": "npm run build:ssr:bundle && npm run build:server", - "build:ssr:bundle": "ng build --prod && ng run universal-app:server", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" + "build:ssr:bundle": "ng build --prod && ng run universal-app:server:production" }, "private": true, "dependencies": { "@angular/animations": "file:../../../node_modules/@angular/animations", "@angular/cdk": "file:../../../node_modules/@angular/cdk", - "@angular/cli": "^7.0.0-rc.2", "@angular/common": "file:../../../node_modules/@angular/common", "@angular/compiler": "file:../../../node_modules/@angular/compiler", "@angular/core": "file:../../../node_modules/@angular/core", @@ -29,30 +27,33 @@ "@angular/platform-browser-dynamic": "file:../../../node_modules/@angular/platform-browser-dynamic", "@angular/platform-server": "file:../../../node_modules/@angular/platform-server", "@angular/router": "file:../../../node_modules/@angular/router", - "core-js": "file:../../../node_modules/core-js", + "@nguniversal/express-engine": "^7.0.2", + "core-js": "^2.5.4", "express": "^4.16.2", - "rxjs": "file:../../../node_modules/rxjs", - "zone.js": "file:../../../node_modules/zone.js" + "rxjs": "~6.3.3", + "tslib": "^1.9.0", + "zone.js": "~0.8.26" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.9.0-rc.1", + "@angular-devkit/build-angular": "~0.11.0", + "@angular/cli": "~7.1.2", "@angular/compiler-cli": "file:../../../node_modules/@angular/compiler-cli", - "@angular/language-service": "^6.0.0", - "@types/jasmine": "~2.8.3", - "@types/jasminewd2": "~2.0.2", - "@types/node": "~6.0.60", - "codelyzer": "^4.0.1", - "jasmine-core": "~2.8.0", + "@angular/language-service": "~7.1.0", + "@types/node": "~8.9.4", + "@types/jasmine": "~2.8.8", + "@types/jasminewd2": "~2.0.3", + "codelyzer": "~4.5.0", + "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", - "karma": "~2.0.0", + "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "^1.2.1", - "karma-jasmine": "~1.1.0", + "karma-coverage-istanbul-reporter": "~2.0.1", + "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", - "protractor": "~5.1.2", + "protractor": "~5.4.0", "ts-loader": "^5.2.1", - "ts-node": "~4.1.0", - "tslint": "~5.9.1", + "ts-node": "~7.0.0", + "tslint": "~5.11.0", "typescript": "file:../../../node_modules/typescript", "webpack": "^4.20.2", "webpack-cli": "^3.1.2" diff --git a/src/apps/universal-app/server.ts b/src/apps/universal-app/server.ts index 3680a731f..8a5b85b09 100644 --- a/src/apps/universal-app/server.ts +++ b/src/apps/universal-app/server.ts @@ -2,12 +2,11 @@ import 'zone.js/dist/zone-node'; import 'reflect-metadata'; -import {renderModuleFactory} from '@angular/platform-server'; +import {ngExpressEngine} from '@nguniversal/express-engine'; import {enableProdMode} from '@angular/core'; import * as express from 'express'; import {join} from 'path'; -import {readFileSync} from 'fs'; // Faster server renders w/ Prod mode (dev mode never needed) enableProdMode(); @@ -18,21 +17,14 @@ const app = express(); const PORT = process.env.PORT || 4000; const DIST_FOLDER = join(process.cwd(), 'dist'); -// Our index.html we'll use as our template -const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString(); - // * NOTE :: leave this as require() since this file is built Dynamically from webpack const {AppServerModuleNgFactory} = require('./dist/server/main'); -app.engine('html', (_, options, callback) => { - renderModuleFactory(AppServerModuleNgFactory, { - // Our index.html - document: template, - url: options.req.url - }).then(html => { - callback(null, html); - }); -}); +app.engine('html', + ngExpressEngine({ + bootstrap: AppServerModuleNgFactory, + }) +); app.set('view engine', 'html'); app.set('views', join(DIST_FOLDER, 'browser')); @@ -42,7 +34,7 @@ app.get('*.*', express.static(join(DIST_FOLDER, 'browser'))); // All regular routes use the Universal engine app.get('*', (req, res) => { - res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req }); + res.render('index', { req }); }); // Start up the Node server diff --git a/src/apps/universal-app/src/app/app.component.html b/src/apps/universal-app/src/app/app.component.html index 3533e6f32..53d282cc0 100644 --- a/src/apps/universal-app/src/app/app.component.html +++ b/src/apps/universal-app/src/app/app.component.html @@ -13,7 +13,7 @@
-
+
Column #2 - Row #1

Layout Dashboard

diff --git a/src/apps/universal-app/src/browserslist b/src/apps/universal-app/src/browserslist new file mode 100644 index 000000000..37371cb04 --- /dev/null +++ b/src/apps/universal-app/src/browserslist @@ -0,0 +1,11 @@ +# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers +# For additional information regarding the format and rule options, please see: +# https://github.com/browserslist/browserslist#queries +# +# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed + +> 0.5% +last 2 versions +Firefox ESR +not dead +not IE 9-11 \ No newline at end of file diff --git a/src/apps/universal-app/src/environments/environment.ts b/src/apps/universal-app/src/environments/environment.ts index b7f639aec..7b4f817ad 100644 --- a/src/apps/universal-app/src/environments/environment.ts +++ b/src/apps/universal-app/src/environments/environment.ts @@ -1,8 +1,16 @@ -// The file contents for the current environment will overwrite these during build. -// The build system defaults to the dev environment which uses `environment.ts`, but if you do -// `ng build --env=prod` then `environment.prod.ts` will be used instead. -// The list of which env maps to which file can be found in `.angular-cli.json`. +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. export const environment = { production: false }; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/apps/universal-app/karma.conf.js b/src/apps/universal-app/src/karma.conf.js similarity index 86% rename from src/apps/universal-app/karma.conf.js rename to src/apps/universal-app/src/karma.conf.js index 0840f6ca5..ee9caa152 100644 --- a/src/apps/universal-app/karma.conf.js +++ b/src/apps/universal-app/src/karma.conf.js @@ -12,14 +12,14 @@ module.exports = function (config) { require('karma-coverage-istanbul-reporter'), require('@angular-devkit/build-angular/plugins/karma') ], - client:{ + client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { - dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], + dir: require('path').join(__dirname, '../coverage'), + reports: ['html', 'lcovonly', 'text-summary'], fixWebpackSourcePaths: true }, - reporters: ['progress', 'kjhtml'], port: 9876, colors: true, @@ -28,4 +28,4 @@ module.exports = function (config) { browsers: ['Chrome'], singleRun: false }); -}; +}; \ No newline at end of file diff --git a/src/apps/universal-app/src/main.ts b/src/apps/universal-app/src/main.ts index 8a00384e5..ebf5fc9a6 100644 --- a/src/apps/universal-app/src/main.ts +++ b/src/apps/universal-app/src/main.ts @@ -10,5 +10,5 @@ if (environment.production) { document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.log(err)); + .catch(err => console.error(err)); }); diff --git a/src/apps/universal-app/src/polyfills.ts b/src/apps/universal-app/src/polyfills.ts index a7e2a728a..ee8b84da8 100644 --- a/src/apps/universal-app/src/polyfills.ts +++ b/src/apps/universal-app/src/polyfills.ts @@ -11,7 +11,7 @@ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * - * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + * Learn more in https://angular.io/guide/browser-support */ /*************************************************************************************************** @@ -34,25 +34,40 @@ // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; - -/** Evergreen browsers require these. **/ -// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. - - - /** - * Required to support Web Animations `@angular/platform-browser/animations`. - * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). **/ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; /*************************************************************************************************** * Zone JS is required by default for Angular itself. @@ -60,7 +75,6 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. - /*************************************************************************************************** * APPLICATION IMPORTS */ diff --git a/src/apps/universal-app/src/styles.scss b/src/apps/universal-app/src/styles.scss index e7ced8263..90d4ee007 100644 --- a/src/apps/universal-app/src/styles.scss +++ b/src/apps/universal-app/src/styles.scss @@ -1,40 +1 @@ /* You can add global styles to this file, and also import other style files */ -.ngx-split { - &.row-split { - > .ngx-split-handle .ngx-split-button { - top: 50%; - left: 50%; - cursor: col-resize; - transform: translate(-50%, -50%); - } - } - - &.column-split { - > .ngx-split-handle .ngx-split-button { - left: 50%; - cursor: row-resize; - top: -3px; - transform: translateX(-50%) rotate(270deg); - } - } - - .ngx-split-area { - overflow: auto; - } - - .ngx-split-handle { - position: relative; - - .ngx-split-button { - line-height: 0; - font-size: 32px; - position: absolute; - display: block; - padding: 0; - } - } -} - -.icon-split-handle::before { - content: ''\f1aa''; -} diff --git a/src/apps/universal-app/src/tsconfig.app.json b/src/apps/universal-app/src/tsconfig.app.json index 39ba8dbac..190fd300b 100644 --- a/src/apps/universal-app/src/tsconfig.app.json +++ b/src/apps/universal-app/src/tsconfig.app.json @@ -2,8 +2,6 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", - "baseUrl": "./", - "module": "es2015", "types": [] }, "exclude": [ diff --git a/src/apps/universal-app/src/tsconfig.server.json b/src/apps/universal-app/src/tsconfig.server.json index 7c9ba3058..5dbf48187 100644 --- a/src/apps/universal-app/src/tsconfig.server.json +++ b/src/apps/universal-app/src/tsconfig.server.json @@ -1,15 +1,9 @@ { - "extends": "../tsconfig.json", + "extends": "./tsconfig.app.json", "compilerOptions": { - "outDir": "../dist/server", - "baseUrl": "./", - "module": "commonjs", - "types": [] + "outDir": "../out-tsc/app-server", + "baseUrl": "." }, - "exclude": [ - "test.ts", - "**/*.spec.ts" - ], "angularCompilerOptions": { "entryModule": "app/app.server.module#AppServerModule" } diff --git a/src/apps/universal-app/src/tsconfig.spec.json b/src/apps/universal-app/src/tsconfig.spec.json index 1a18e6d00..de7733630 100644 --- a/src/apps/universal-app/src/tsconfig.spec.json +++ b/src/apps/universal-app/src/tsconfig.spec.json @@ -2,8 +2,6 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", - "baseUrl": "./", - "module": "commonjs", "types": [ "jasmine", "node" diff --git a/src/apps/universal-app/src/tslint.json b/src/apps/universal-app/src/tslint.json new file mode 100644 index 000000000..52e2c1a5a --- /dev/null +++ b/src/apps/universal-app/src/tslint.json @@ -0,0 +1,17 @@ +{ + "extends": "../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + "app", + "camelCase" + ], + "component-selector": [ + true, + "element", + "app", + "kebab-case" + ] + } +} diff --git a/src/apps/universal-app/src/typings.d.ts b/src/apps/universal-app/src/typings.d.ts deleted file mode 100644 index ef5c7bd62..000000000 --- a/src/apps/universal-app/src/typings.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/* SystemJS module definition */ -declare var module: NodeModule; -interface NodeModule { - id: string; -} diff --git a/src/apps/universal-app/tsconfig.json b/src/apps/universal-app/tsconfig.json index 7168743c0..b271fd9f3 100644 --- a/src/apps/universal-app/tsconfig.json +++ b/src/apps/universal-app/tsconfig.json @@ -1,21 +1,22 @@ { "compileOnSave": false, "compilerOptions": { + "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, + "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, + "importHelpers": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ - "es2017", + "es2018", "dom" - ], - "module": "es2015", - "baseUrl": "./" + ] } -} \ No newline at end of file +} diff --git a/src/apps/universal-app/tslint.json b/src/apps/universal-app/tslint.json index 31e8eadd6..c740a7b2a 100644 --- a/src/apps/universal-app/tslint.json +++ b/src/apps/universal-app/tslint.json @@ -1,6 +1,6 @@ { "rulesDirectory": [ - "node_modules/codelyzer" + "codelyzer" ], "rules": { "arrow-return-shorthand": true, @@ -16,6 +16,10 @@ }, "eofline": true, "forin": true, + "import-blacklist": [ + true, + "rxjs/Rx" + ], "import-spacing": true, "indent": [ true, @@ -61,6 +65,7 @@ ], "no-misused-new": true, "no-non-null-assertion": true, + "no-redundant-jsdoc": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, @@ -112,18 +117,6 @@ "check-separator", "check-type" ], - "directive-selector": [ - true, - "attribute", - "responsive", - "camelCase" - ], - "component-selector": [ - true, - "element", - "responsive", - "kebab-case" - ], "no-output-on-prefix": true, "use-input-property-decorator": true, "use-output-property-decorator": true, diff --git a/src/apps/universal-app/webpack.server.config.js b/src/apps/universal-app/webpack.server.config.js index 85db7ff17..6c98a99af 100644 --- a/src/apps/universal-app/webpack.server.config.js +++ b/src/apps/universal-app/webpack.server.config.js @@ -1,33 +1,47 @@ +// Work around for https://github.com/angular/angular-cli/issues/7200 + const path = require('path'); const webpack = require('webpack'); module.exports = { - entry: { server: './server.ts' }, - resolve: { extensions: ['.js', '.ts'] }, + mode: 'none', + entry: { + // This is our Express server for Dynamic universal + server: './server.ts' + }, target: 'node', - // this makes sure we include node_modules and other 3rd party libraries - externals: [/(node_modules|main\..*\.js)/], + resolve: { extensions: ['.ts', '.js'] }, + optimization: { + minimize: false + }, output: { + // Puts the output at the root of the dist folder path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ - { test: /\.ts$/, loader: 'ts-loader' } + { test: /\.ts$/, loader: 'ts-loader' }, + { + // Mark files inside `@angular/core` as using SystemJS style dynamic imports. + // Removing this will cause deprecation warnings to appear. + test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/, + parser: { system: true }, + }, ] }, plugins: [ - // Temporary Fix for issue: https://github.com/angular/angular/issues/11580 - // for "WARNING Critical dependency: the request of a dependency is an expression" new webpack.ContextReplacementPlugin( + // fixes WARNING Critical dependency: the request of a dependency is an expression /(.+)?angular(\\|\/)core(.+)?/, path.join(__dirname, 'src'), // location of your src {} // a map of your routes ), new webpack.ContextReplacementPlugin( + // fixes WARNING Critical dependency: the request of a dependency is an expression /(.+)?express(\\|\/)(.+)?/, path.join(__dirname, 'src'), {} ) ] -} +}; diff --git a/src/lib/extended/style/style.ts b/src/lib/extended/style/style.ts index a9ae513f0..99d788a08 100644 --- a/src/lib/extended/style/style.ts +++ b/src/lib/extended/style/style.ts @@ -8,16 +8,21 @@ import { Directive, DoCheck, - ElementRef, + ElementRef, Inject, KeyValueDiffers, - Optional, + Optional, PLATFORM_ID, Renderer2, SecurityContext, Self, } from '@angular/core'; -import {NgStyle} from '@angular/common'; +import {isPlatformServer, NgStyle} from '@angular/common'; import {DomSanitizer} from '@angular/platform-browser'; -import {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core'; +import { + BaseDirective2, + StyleUtils, + MediaMarshaller, + SERVER_TOKEN, +} from '@angular/flex-layout/core'; import { NgStyleRawList, @@ -36,6 +41,7 @@ export class StyleDirective extends BaseDirective2 implements DoCheck { protected DIRECTIVE_KEY = 'ngStyle'; protected fallbackStyles: NgStyleMap; + protected isServer: boolean; constructor(protected elementRef: ElementRef, protected styler: StyleUtils, @@ -43,7 +49,9 @@ export class StyleDirective extends BaseDirective2 implements DoCheck { protected keyValueDiffers: KeyValueDiffers, protected renderer: Renderer2, protected sanitizer: DomSanitizer, - @Optional() @Self() private readonly ngStyleInstance: NgStyle) { + @Optional() @Self() private readonly ngStyleInstance: NgStyle, + @Optional() @Inject(SERVER_TOKEN) serverLoaded: boolean, + @Inject(PLATFORM_ID) platformId: Object) { super(elementRef, null!, styler, marshal); if (!this.ngStyleInstance) { // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been @@ -53,12 +61,16 @@ export class StyleDirective extends BaseDirective2 implements DoCheck { this.init(); const styles = this.nativeElement.getAttribute('style') || ''; this.fallbackStyles = this.buildStyleMap(styles); + this.isServer = serverLoaded && isPlatformServer(platformId); } /** Add generated styles */ protected updateWithValue(value: any) { const styles = this.buildStyleMap(value); this.ngStyleInstance.ngStyle = {...this.fallbackStyles, ...styles}; + if (this.isServer) { + this.applyStyleToElement(styles); + } this.ngStyleInstance.ngDoCheck(); } diff --git a/tools/gulp/tasks/universal.ts b/tools/gulp/tasks/universal.ts index 0f997c173..d72d46d91 100644 --- a/tools/gulp/tasks/universal.ts +++ b/tools/gulp/tasks/universal.ts @@ -1,5 +1,4 @@ import {task} from 'gulp'; -import {existsSync} from 'fs'; import {execTask} from '../util/task-helpers'; import {join} from 'path'; import {buildConfig, sequenceTask} from 'lib-build-tools'; @@ -71,6 +70,7 @@ task('prerender:run:server', execTask( task('prerender:clean', sequenceTask( 'prerender:clear:deps', + 'prerender:clear:lock', 'prerender:clear:dist' )); @@ -81,14 +81,13 @@ task('prerender:clear:deps', [], execTask( } )); -task('prerender:clear:lock', [], () => existsSync(join(universalAppSource, 'package-lock.json')) ? - execTask( +task('prerender:clear:lock', [], execTask( 'rm', ['package-lock.json'], { failOnStderr: false, silent: true, cwd: universalAppSource } - ) : () => {} + ) ); task('prerender:clear:dist', [], execTask( From 988475e388bdeef2875efc289a5308d56133ade5 Mon Sep 17 00:00:00 2001 From: Adam Plumer Date: Fri, 28 Dec 2018 02:03:04 -0500 Subject: [PATCH 2/2] fixup! fix(style): add SSR capabilities --- src/apps/universal-app/src/polyfills.ts | 9 ------ src/apps/universal-app/src/styles.scss | 39 +++++++++++++++++++++++++ src/lib/extended/style/style.ts | 6 ++-- tools/gulp/tasks/universal.ts | 2 +- 4 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/apps/universal-app/src/polyfills.ts b/src/apps/universal-app/src/polyfills.ts index ee8b84da8..c06ef5e4a 100644 --- a/src/apps/universal-app/src/polyfills.ts +++ b/src/apps/universal-app/src/polyfills.ts @@ -54,15 +54,6 @@ **/ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. -/** - * By default, zone.js will patch all possible macroTask and DomEvents - * user can disable parts of macroTask/DomEvents patch by setting following flags - */ - - // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame - // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick - // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames - /* * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js * with the following flag, it will bypass `zone.js` patch for IE/Edge diff --git a/src/apps/universal-app/src/styles.scss b/src/apps/universal-app/src/styles.scss index 90d4ee007..e7ced8263 100644 --- a/src/apps/universal-app/src/styles.scss +++ b/src/apps/universal-app/src/styles.scss @@ -1 +1,40 @@ /* You can add global styles to this file, and also import other style files */ +.ngx-split { + &.row-split { + > .ngx-split-handle .ngx-split-button { + top: 50%; + left: 50%; + cursor: col-resize; + transform: translate(-50%, -50%); + } + } + + &.column-split { + > .ngx-split-handle .ngx-split-button { + left: 50%; + cursor: row-resize; + top: -3px; + transform: translateX(-50%) rotate(270deg); + } + } + + .ngx-split-area { + overflow: auto; + } + + .ngx-split-handle { + position: relative; + + .ngx-split-button { + line-height: 0; + font-size: 32px; + position: absolute; + display: block; + padding: 0; + } + } +} + +.icon-split-handle::before { + content: ''\f1aa''; +} diff --git a/src/lib/extended/style/style.ts b/src/lib/extended/style/style.ts index 99d788a08..7ef9c6996 100644 --- a/src/lib/extended/style/style.ts +++ b/src/lib/extended/style/style.ts @@ -8,9 +8,11 @@ import { Directive, DoCheck, - ElementRef, Inject, + ElementRef, + Inject, KeyValueDiffers, - Optional, PLATFORM_ID, + Optional, + PLATFORM_ID, Renderer2, SecurityContext, Self, diff --git a/tools/gulp/tasks/universal.ts b/tools/gulp/tasks/universal.ts index d72d46d91..bd8b84879 100644 --- a/tools/gulp/tasks/universal.ts +++ b/tools/gulp/tasks/universal.ts @@ -82,7 +82,7 @@ task('prerender:clear:deps', [], execTask( )); task('prerender:clear:lock', [], execTask( - 'rm', ['package-lock.json'], { + 'rm', ['-f', 'package-lock.json'], { failOnStderr: false, silent: true, cwd: universalAppSource