feat(ssr): add ionic angular server (#18880)

ionic-team · Aug 6, 2019 · 84e306c · 84e306c
1 parent 713ea8a
commit 84e306c
Show file tree

Hide file tree

Showing 44 changed files with 466 additions and 11,616 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -91,6 +91,23 @@ jobs:
           paths:
             - "*"
 
+  build-angular-server:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/angular-server
+      - run:
+          command: npm run build.prod
+          working_directory: /tmp/workspace/packages/angular-server
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -208,7 +225,11 @@ workflows:
 
       - build-angular:
           requires: [build-core]
+      - build-angular-server:
+          requires: [build-angular]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:
-          requires: [build-angular]
+          requires:
+            - build-angular
+            - build-angular-server
diff --git a/angular/package.json b/angular/package.json
@@ -19,6 +19,10 @@
     "type": "git",
     "url": "https://github.com/ionic-team/ionic.git"
   },
+  "bugs": {
+    "url": "https://github.com/ionic-team/ionic/issues"
+  },
+  "homepage": "https://ionicframework.com/",
   "scripts": {
     "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
@@ -38,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "module": "dist/fesm5.js",
-  "main": "dist/fesm5.js",
+  "main": "dist/fesm5.cjs.js",
   "types": "dist/core.d.ts",
   "files": [
     "dist/",
@@ -82,8 +86,8 @@
     "tsickle": "^0.34.0",
     "tslint": "^5.12.1",
     "tslint-ionic-rules": "0.0.21",
-    "typescript": "3.2.4",
-    "zone.js": "^0.8.28"
+    "typescript": "~3.2.2",
+    "zone.js": "~0.8.26"
   },
   "schematics": "./dist/schematics/collection.json"
 }
diff --git a/angular/scripts/clean.js b/angular/scripts/clean.js
@@ -1,12 +1,12 @@
 const fs = require('fs-extra');
 const path = require('path');
 
+const ROOT_DIR = path.join(__dirname, '..');
 
 const cleanDirs = [
-  'dist'
+  path.join(ROOT_DIR, 'dist')
 ];
 
 cleanDirs.forEach(dir => {
-  const cleanDir = path.join(__dirname, '../', dir);
-  fs.removeSync(cleanDir);
+  fs.emptyDirSync(dir);
 });
diff --git a/angular/scripts/rollup.config.js b/angular/scripts/rollup.config.js
@@ -2,10 +2,12 @@ import resolve from 'rollup-plugin-node-resolve';
 
 export default {
   input: 'build/es2015/core.js',
-  output: {
-    file: 'dist/fesm2015.js',
-    format: 'es'
-  },
+  output: [
+    {
+      file: 'dist/fesm2015.js',
+      format: 'es'
+    }
+  ],
   external: (id) => {
     // anything else is external
     // Windows: C:\xxxxxx\xxx

diff --git a/angular/scripts/rollup.config.legacy.js b/angular/scripts/rollup.config.legacy.js
@@ -4,6 +4,15 @@ const newConfig = {
   ...config,
   input: 'build/es5/core.js',
 };
-newConfig.output.file = 'dist/fesm5.js';
+newConfig.output = [
+  {
+    file: 'dist/fesm5.js',
+    format: 'es'
+  },
+  {
+    file: 'dist/fesm5.cjs.js',
+    format: 'cjs'
+  }
+];
 
 export { newConfig as default };
diff --git a/angular/test/test-app/.npmrc b/angular/test/test-app/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/angular/test/test-app/angular.json b/angular/test/test-app/angular.json
@@ -13,11 +13,11 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/test-app",
+            "outputPath": "dist/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               {
@@ -31,9 +31,7 @@
                 "output": "./svg"
               }
             ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -86,37 +84,13 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.css"
-            ],
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "styles": ["src/styles.css"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "test-app-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -126,20 +100,39 @@
           "configurations": {
             "production": {
               "devServerTarget": "test-app:serve:production"
+            },
+            "ci": {
+              "devServerTarget": "test-app:serve:ci"
             }
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
           }
         }
       }
     }
   },
   "defaultProject": "test-app"
-}
+}
diff --git a/angular/test/test-app/browserslist b/angular/test/test-app/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'.
diff --git a/angular/test/test-app/e2e/protractor.conf.js b/angular/test/test-app/e2e/protractor.conf.js
@@ -1,19 +1,22 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
 const { SpecReporter } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
-    './**/*.e2e-spec.ts'
+    './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    browserName: 'chrome',
-
-    chromeOptions: {
-       args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
-     }
+    'browserName': 'chrome'
+  },
+  chromeOptions: {
+     args: [ "--headless", "--disable-gpu", "--window-size=400,1000", "--start-maximized" ]
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
@@ -25,8 +28,8 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
+      project: require('path').join(__dirname, './tsconfig.json')
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
-};
+};
diff --git a/angular/test/test-app/e2e/tsconfig.e2e.json → angular/test/test-app/e2e/tsconfig.json b/angular/test/test-app/e2e/tsconfig.e2e.json → angular/test/test-app/e2e/tsconfig.json
diff --git a/angular/test/test-app/src/karma.conf.js → angular/test/test-app/karma.conf.js b/angular/test/test-app/src/karma.conf.js → angular/test/test-app/karma.conf.js