angular-material-extensions · Jun 17, 2018 · Jun 17, 2018 · Jun 17, 2018 · Jun 17, 2018 · Jun 17, 2018
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,49 +1,188 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
 version: 2
-jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:8.9.4
 
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
+job_defaults: &job_defaults
+  docker:
+    - image: circleci/node:10-browsers
+      environment:
+        CHROME_BIN: '/usr/bin/google-chrome'
+  working_directory: ~/project/repo
+
+#app
+cache_key: &cache_key pages-app-deps-cache-{{ .Branch }}-{{ checksum "package-lock.json" }}
+dist_key: &dist_key pages-app-dist-{{ .Revision }}
 
-    working_directory: ~/repo
+#pages dist package
+cache_pages_key: &cache_pages_key pages-deps-cache-{{ .Branch }}-{{ checksum "package-lock.json" }}
+dist_pages_key: &dist_pages_key pagess-dist-{{ .Revision }}
 
+jobs:
+  install:
+    <<: *job_defaults
     steps:
       - checkout
+      - restore_cache:
+          key: *cache_key
+      - run:
+          name: install-dependencies
+          command: npm ci
+      - run:
+          name: Install Semantic Release globally
+          command: sudo npm i -g semantic-release@15
+      - run:
+          name: Install resync command
+          command: sudo apt install rsync
+      - save_cache:
+          key: *cache_key
+          paths:
+            - node_modules
 
-      # Download and cache dependencies
+  lint:
+    <<: *job_defaults
+    steps:
+      - checkout
       - restore_cache:
-          keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
-      - run: ls -la && pwd
-      - run: git --version
-      - run: npm install
-      - run: npm install --only=dev
-      - run: npm run build
-      - run: ls -la && pwd
+          key: *cache_key
+      - run:
+          name: lint
+          command: npm run lint
 
+  test-app:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - restore_cache:
+          key: *dist_key
+      - run:
+          name: test
+          command: npm run test
+
+  build-library:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - run:
+          name: Install resync command
+          command: sudo apt install rsync
+      - run:
+          name: build @angular-material-extensions/pages library
+          command: cd projects/angular-material-extensions/pages && npm run build
       - save_cache:
+          key: *dist_pages_key
           paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+            - dist/angular-material-extensions/pages
 
-      - persist_to_workspace:
-                root: .
-                paths:
-                  - dist
-      # run tests!
-      #- run: npm test
+  build-prerender-app:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - restore_cache:
+          key: *dist_pages_key
+      - run:
+          name: check dist files
+          command: ls projects/angular-material-extensions/pages/
+      - run:
+          name: link library
+          command: sudo npm run link
+      - run:
+          name: build-prerender
+          command: sudo npm run build:prerender
+      - save_cache:
+          key: *dist_key
+          paths:
+            - dist
 
+  release-app:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - restore_cache:
+          key: *dist_key
+      - run:
+          name: release-app
+          command: npm run semantic-release || true
 
+  release-pages-lib:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - restore_cache:
+          key: *dist_pages_key
+      - run:
+          name: release-pages-lib
+          command: cd projects/angular-material-extensions/pages && npx semantic-release || true
 
+  deploy-app-dev:
+    <<: *job_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: *cache_key
+      - restore_cache:
+          key: *dist_key
+      - restore_cache:
+          key: *dist_pages_key
+      - run:
+          name: dist outlook
+          command: ls dist
+      - run:
+          name: Set git email config
+          command: git config --global user.email "anthony.na@hotmail.de"
+      - run:
+          name: Set git name config
+          command: git config --global user.name "Anthony Nahas"
+      - run:
+          name: deploy-app-dev
+          command: npm run deploy:gh
 
+workflows:
+  version: 2
+  build-test-release:
+    jobs:
+      - install
+      #      - lint:
+      #          requires:
+      #            - install
+      #      - test-app:
+      #          requires:
+      #            - install
+      - build-library:
+          requires:
+            - install
+      - build-prerender-app:
+          requires:
+            - build-library
+      #            - test-app
+      - release-pages-lib:
+          requires:
+            - build-library
+          filters:
+            branches:
+              only: pages
+      - release-app:
+          requires:
+            - build-prerender-app
+          filters:
+            branches:
+              only: master
+      - deploy-app-dev:
+          requires:
+            - release-app
+          filters:
+            branches:
+              only: master
+#      - deploy-app-dev:
+#          requires:
+#            - build-prerender-app
+#          filters:
+#            branches:
+#              only: dev
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "@angular-material-extensions/pages"
+  }
+}
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: angular-material-extensions
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: npm/@angular-material-extensions/pages
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: ['https://github.com/AnthonyNahas','anahas.de']
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules

diff --git a/.travis.yml b/.travis.yml
@@ -11,18 +11,16 @@ addons:
 
 language: node_js
 node_js:
-  - "6"
   - "10"
 
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - npm install --quiet -g gulp-cli
 
-script: gulp test:ci
+script: npx ng build @angular-material-extensions/pages
 
 after_success: gulp coveralls
 
 cache:
   yarn: true
-
diff --git a/.yo-rc.json b/.yo-rc.json
@@ -4,8 +4,8 @@
     "authorName": "anthonynahas",
     "authorEmail": "anthony.na@hotmail.de",
     "githubUsername": "anthonynahas",
-    "githubRepoName": "ngx-material-pages",
-    "projectName": "ngx-material-pages",
+    "githubRepoName": "@angular-material-extensions/pages",
+    "projectName": "@angular-material-extensions/pages",
     "projectVersion": "0.0.1",
     "projectDescription": "Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes)",
     "projectKeywords": [
@@ -38,4 +38,4 @@
       "config/setupJest.ts"
     ]
   }
-}
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,127 +1,173 @@
-<a name="1.3.2"></a>
-## [1.3.2](https://github.com/anthonynahas/ngx-material-pages/compare/v1.3.1...v1.3.2) (2018-06-16)
+# [4.0.0](https://github.com/angular-material-extensions/pages/compare/3.0.0...4.0.0) (2020-02-09)
+
+
+### Bug Fixes
+
+* **project:** upgraded the project to angular v9 ([1564896](https://github.com/angular-material-extensions/pages/commit/1564896dc90462684e708b4765e1f8a48ae3cb26))
+
+# [4.0.0](https://github.com/angular-material-extensions/pages/compare/3.0.0...4.0.0) (2020-02-09)
+
+
+### Bug Fixes
+
+* **project:** upgraded the project to angular v9 ([1564896](https://github.com/angular-material-extensions/pages/commit/1564896dc90462684e708b4765e1f8a48ae3cb26))
+
+# [4.0.0](https://github.com/angular-material-extensions/pages/compare/3.0.0...4.0.0) (2020-02-09)
+
+
+### Bug Fixes
+
+* **project:** upgraded the project to angular v9 ([1564896](https://github.com/angular-material-extensions/pages/commit/1564896dc90462684e708b4765e1f8a48ae3cb26))
+
+# [4.0.0](https://github.com/angular-material-extensions/pages/compare/3.0.0...4.0.0) (2020-02-09)
+
+
+### Bug Fixes
+
+* **project:** upgraded the project to angular v9 ([1564896](https://github.com/angular-material-extensions/pages/commit/1564896dc90462684e708b4765e1f8a48ae3cb26))
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# [2.1.0](https://github.com/angular-material-extensions/pages/compare/v2.0.0...v2.1.0) (2018-11-02)
+
+
+### Bug Fixes
+
+* **package:** adjusted the "ngswConfigPath" ([abf40a8](https://github.com/angular-material-extensions/pages/commit/abf40a8))
+* **project:** minor ([da3f437](https://github.com/angular-material-extensions/pages/commit/da3f437))
+
+
+### Features
+
+* **package:** support of angular v7 ([0f51db6](https://github.com/angular-material-extensions/pages/commit/0f51db6))
+
+
+
+# [2.0.0](https://github.com/angular-material-extensions/pages/compare/v1.3.2...v2.0.0) (2018-08-11)
+
+
+
+## [1.3.2](https://github.com/angular-material-extensions/pages/compare/v1.3.1...v1.3.2) (2018-06-16)
 
 
 
-<a name="1.3.1"></a>
-## [1.3.1](https://github.com/anthonynahas/ngx-material-pages/compare/v1.3.0...v1.3.1) (2018-05-15)
+## [1.3.1](https://github.com/angular-material-extensions/pages/compare/v1.3.0...v1.3.1) (2018-05-15)
 
 
 ### Features
 
-* **ngx-material-pages:** supporting lazy loading for each page ([e78441b](https://github.com/anthonynahas/ngx-material-pages/commit/e78441b))
+* **ngx-material-pages:** supporting lazy loading for each page ([e78441b](https://github.com/angular-material-extensions/pages/commit/e78441b))
 
 
 
-<a name="1.3.0"></a>
-# [1.3.0](https://github.com/anthonynahas/ngx-material-pages/compare/v1.2.1...v1.3.0) (2018-05-10)
+# [1.3.0](https://github.com/angular-material-extensions/pages/compare/v1.2.1...v1.3.0) (2018-05-10)
 
 
 ### Bug Fixes
 
-* **package:** update [@angular](https://github.com/angular)/cdk to version 6.0.1 ([e77a9f7](https://github.com/anthonynahas/ngx-material-pages/commit/e77a9f7))
+* **package:** update [@angular](https://github.com/angular)/cdk to version 6.0.1 ([e77a9f7](https://github.com/angular-material-extensions/pages/commit/e77a9f7))
 
 
 
-<a name="1.2.1"></a>
-## [1.2.1](https://github.com/anthonynahas/ngx-material-pages/compare/v1.2.0...v1.2.1) (2018-04-22)
+## [1.2.1](https://github.com/angular-material-extensions/pages/compare/v1.2.0...v1.2.1) (2018-04-22)
 
 
 
-<a name="1.2.0"></a>
-# [1.2.0](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.6...v1.2.0) (2018-04-16)
+# [1.2.0](https://github.com/angular-material-extensions/pages/compare/v1.1.6...v1.2.0) (2018-04-16)
 
 
 ### Bug Fixes
 
-* **ngx-material-pages:** replaced ng-deep with internal manipulation with renderer2 ([51c75dc](https://github.com/anthonynahas/ngx-material-pages/commit/51c75dc))
+* **ngx-material-pages:** replaced ng-deep with internal manipulation with renderer2 ([51c75dc](https://github.com/angular-material-extensions/pages/commit/51c75dc))
 
 
 
-<a name="1.1.6"></a>
-## [1.1.6](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.5...v1.1.6) (2018-04-15)
+## [1.1.6](https://github.com/angular-material-extensions/pages/compare/v1.1.5...v1.1.6) (2018-04-15)
 
 
 ### Bug Fixes
 
-* **ngx-material-pages:** added the peerDependencies ([3d225b3](https://github.com/anthonynahas/ngx-material-pages/commit/3d225b3))
-* **ngx-material-pages:** ng-deep will not affect external tabs ([48fad96](https://github.com/anthonynahas/ngx-material-pages/commit/48fad96))
-* **ngx-material-pages:** removed duplicated dependencies under dev ([2cd576e](https://github.com/anthonynahas/ngx-material-pages/commit/2cd576e))
+* **ngx-material-pages:** added the peerDependencies ([3d225b3](https://github.com/angular-material-extensions/pages/commit/3d225b3))
+* **ngx-material-pages:** ng-deep will not affect external tabs ([48fad96](https://github.com/angular-material-extensions/pages/commit/48fad96))
+* **ngx-material-pages:** removed duplicated dependencies under dev ([2cd576e](https://github.com/angular-material-extensions/pages/commit/2cd576e))
 
 
 
-<a name="1.1.5"></a>
-## [1.1.5](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.4...v1.1.5) (2018-04-12)
+## [1.1.5](https://github.com/angular-material-extensions/pages/compare/v1.1.4...v1.1.5) (2018-04-12)
 
 
 
-<a name="1.1.4"></a>
-## [1.1.4](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.3...v1.1.4) (2018-04-12)
+## [1.1.4](https://github.com/angular-material-extensions/pages/compare/v1.1.3...v1.1.4) (2018-04-12)
 
 
 
-<a name="1.1.3"></a>
-## [1.1.3](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.2...v1.1.3) (2018-04-12)
+## [1.1.3](https://github.com/angular-material-extensions/pages/compare/v1.1.2...v1.1.3) (2018-04-12)
 
 
 ### Features
 
-* **ngx-material-pages:** input for the title of the toolbar ([da60598](https://github.com/anthonynahas/ngx-material-pages/commit/da60598))
+* **ngx-material-pages:** input for the title of the toolbar ([da60598](https://github.com/angular-material-extensions/pages/commit/da60598))
 
 
 
-<a name="1.1.2"></a>
-## [1.1.2](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.1...v1.1.2) (2018-04-11)
+## [1.1.2](https://github.com/angular-material-extensions/pages/compare/v1.1.1...v1.1.2) (2018-04-11)
 
 
 
-<a name="1.1.1"></a>
-## [1.1.1](https://github.com/anthonynahas/ngx-material-pages/compare/v1.1.0...v1.1.1) (2018-04-10)
+## [1.1.1](https://github.com/angular-material-extensions/pages/compare/v1.1.0...v1.1.1) (2018-04-10)
 
 
 
-<a name="1.1.0"></a>
-# [1.1.0](https://github.com/anthonynahas/ngx-material-pages/compare/v1.0.1...v1.1.0) (2018-04-10)
+# [1.1.0](https://github.com/angular-material-extensions/pages/compare/v1.0.1...v1.1.0) (2018-04-10)
 
 
 ### Features
 
-* **lib:** added mode to sidenav and template navigation buttons + added pageChanged and done events ([a750582](https://github.com/anthonynahas/ngx-material-pages/commit/a750582))
-* **ngx-material-pages:** added optional title input to the outlook component ([5237ea8](https://github.com/anthonynahas/ngx-material-pages/commit/5237ea8))
+* **lib:** added mode to sidenav and template navigation buttons + added pageChanged and done events ([a750582](https://github.com/angular-material-extensions/pages/commit/a750582))
+* **ngx-material-pages:** added optional title input to the outlook component ([5237ea8](https://github.com/angular-material-extensions/pages/commit/5237ea8))
 
 
 
-<a name="1.0.1"></a>
-## [1.0.1](https://github.com/anthonynahas/ngx-material-pages/compare/v1.0.0...v1.0.1) (2018-04-09)
+## [1.0.1](https://github.com/angular-material-extensions/pages/compare/v1.0.0...v1.0.1) (2018-04-09)
 
 
 
-<a name="1.0.0"></a>
-# [1.0.0](https://github.com/anthonynahas/ngx-material-pages/compare/v0.0.1...v1.0.0) (2018-04-09)
+# [1.0.0](https://github.com/angular-material-extensions/pages/compare/v0.0.1...v1.0.0) (2018-04-09)
 
 
 ### Bug Fixes
 
-* **components:** deleted old versions ([514d252](https://github.com/anthonynahas/ngx-material-pages/commit/514d252))
-* **ngx-material-pages:** added addtional material module (toolbar and button) ([f19c33d](https://github.com/anthonynahas/ngx-material-pages/commit/f19c33d))
-* **ngx-material-pages:** removed the template in the loader component ([6988556](https://github.com/anthonynahas/ngx-material-pages/commit/6988556))
-* **ngx-material-pages:** removed unwanted component and service (default) ([0511527](https://github.com/anthonynahas/ngx-material-pages/commit/0511527))
+* **components:** deleted old versions ([514d252](https://github.com/angular-material-extensions/pages/commit/514d252))
+* **ngx-material-pages:** added addtional material module (toolbar and button) ([f19c33d](https://github.com/angular-material-extensions/pages/commit/f19c33d))
+* **ngx-material-pages:** removed the template in the loader component ([6988556](https://github.com/angular-material-extensions/pages/commit/6988556))
+* **ngx-material-pages:** removed unwanted component and service (default) ([0511527](https://github.com/angular-material-extensions/pages/commit/0511527))
 
 
 ### Features
 
-* **ngx-material-pages:** added page content component ([e40b4f5](https://github.com/anthonynahas/ngx-material-pages/commit/e40b4f5))
-* **ngx-material-pages:** added page loader component ([7bb6be4](https://github.com/anthonynahas/ngx-material-pages/commit/7bb6be4))
-* **ngx-material-pages:** added page outlook component ([72186c8](https://github.com/anthonynahas/ngx-material-pages/commit/72186c8))
-* **ngx-material-pages:** added synchronization between the page content and outlook ([650ac80](https://github.com/anthonynahas/ngx-material-pages/commit/650ac80))
-* **ngx-material-pages:** added the main ngx-material-pages component ([509ff32](https://github.com/anthonynahas/ngx-material-pages/commit/509ff32))
-* **ngx-material-pages:** improved the layout ([51630c9](https://github.com/anthonynahas/ngx-material-pages/commit/51630c9))
-* **project:** added cricleci configuration ([df72046](https://github.com/anthonynahas/ngx-material-pages/commit/df72046))
-* **ts-lint:** added codelyzer module as dev dependencies ([9317edb](https://github.com/anthonynahas/ngx-material-pages/commit/9317edb))
+* **ngx-material-pages:** added page content component ([e40b4f5](https://github.com/angular-material-extensions/pages/commit/e40b4f5))
+* **ngx-material-pages:** added page loader component ([7bb6be4](https://github.com/angular-material-extensions/pages/commit/7bb6be4))
+* **ngx-material-pages:** added page outlook component ([72186c8](https://github.com/angular-material-extensions/pages/commit/72186c8))
+* **ngx-material-pages:** added synchronization between the page content and outlook ([650ac80](https://github.com/angular-material-extensions/pages/commit/650ac80))
+* **ngx-material-pages:** added the main ngx-material-pages component ([509ff32](https://github.com/angular-material-extensions/pages/commit/509ff32))
+* **ngx-material-pages:** improved the layout ([51630c9](https://github.com/angular-material-extensions/pages/commit/51630c9))
+* **project:** added cricleci configuration ([df72046](https://github.com/angular-material-extensions/pages/commit/df72046))
+* **ts-lint:** added codelyzer module as dev dependencies ([9317edb](https://github.com/angular-material-extensions/pages/commit/9317edb))
 
 
 
-<a name="0.0.1"></a>
 ## 0.0.1 (2018-04-08)
 
 

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Anthony Nahas
+Copyright (c) 2019 Anthony Nahas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
diff --git a/demo/angular.json → angular.json b/demo/angular.json → angular.json
@@ -3,14 +3,15 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "bsr": {
+    "demoapp": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -27,6 +28,12 @@
           },
           "configurations": {
             "hmr": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -35,6 +42,12 @@
               ]
             },
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -45,7 +58,7 @@
               "vendorChunk": false,
               "buildOptimizer": true,
               "serviceWorker": true,
-              "ngswConfigPath": "/src/ngsw-config.json",
+              "ngswConfigPath": "src/ngsw-config.json",
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -58,21 +71,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "bsr:build"
+            "browserTarget": "demoapp:build"
           },
           "configurations": {
             "hmr": {
-              "browserTarget": "bsr:build:hmr"
+              "browserTarget": "demoapp:build:hmr"
             },
             "production": {
-              "browserTarget": "bsr:build:production"
+              "browserTarget": "demoapp:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "bsr:build"
+            "browserTarget": "demoapp:build"
           }
         },
         "test": {
@@ -108,13 +121,50 @@
           "builder": "@angular-devkit/build-angular:server",
           "options": {
             "outputPath": "dist/server",
-            "main": "main.server.ts",
+            "main": "server.ts",
             "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "demoapp:build",
+            "serverTarget": "demoapp:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demoapp:build:production",
+              "serverTarget": "demoapp:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "demoapp:build:production",
+            "serverTarget": "demoapp:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
           }
         }
       }
     },
-    "bsr-e2e": {
+    "demoapp-e2e": {
       "root": "",
       "sourceRoot": "",
       "projectType": "application",
@@ -123,7 +173,7 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "bsr:serve"
+            "devServerTarget": "demoapp:serve"
           }
         },
         "lint": {
@@ -138,9 +188,49 @@
           }
         }
       }
+    },
+    "@angular-material-extensions/pages": {
+      "projectType": "library",
+      "root": "projects/angular-material-extensions/pages",
+      "sourceRoot": "projects/angular-material-extensions/pages/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/angular-material-extensions/pages/tsconfig.lib.json",
+            "project": "projects/angular-material-extensions/pages/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/angular-material-extensions/pages/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/angular-material-extensions/pages/src/test.ts",
+            "tsConfig": "projects/angular-material-extensions/pages/tsconfig.spec.json",
+            "karmaConfig": "projects/angular-material-extensions/pages/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/angular-material-extensions/pages/tsconfig.lib.json",
+              "projects/angular-material-extensions/pages/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
-  "defaultProject": "bsr",
+  "defaultProject": "demoapp",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
@@ -149,5 +239,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": "57a85e3d-c639-4361-a525-e907f763572e"
   }
 }
diff --git a/assets/angular-material-extensions-logo.png b/assets/angular-material-extensions-logo.png
diff --git a/browserslist b/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/demo/.editorconfig b/demo/.editorconfig
diff --git a/demo/.firebaserc b/demo/.firebaserc
diff --git a/demo/.gitignore b/demo/.gitignore
diff --git a/demo/README.md b/demo/README.md
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
diff --git a/demo/server.ts b/demo/server.ts
diff --git a/demo/src/app/app-routing.module.ts b/demo/src/app/app-routing.module.ts
diff --git a/demo/src/app/app.component.spec.ts b/demo/src/app/app.component.spec.ts
diff --git a/demo/src/app/home/home-routing.module.ts b/demo/src/app/home/home-routing.module.ts
diff --git a/demo/src/app/shared/header/header.component.spec.ts b/demo/src/app/shared/header/header.component.spec.ts
diff --git a/demo/src/main.server.ts b/demo/src/main.server.ts
diff --git a/demo/src/main.ts b/demo/src/main.ts
diff --git a/demo/src/testing/index.ts b/demo/src/testing/index.ts
diff --git a/demo/src/testing/router-stubs.ts b/demo/src/testing/router-stubs.ts
diff --git a/demo/src/tsconfig.spec.json b/demo/src/tsconfig.spec.json
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
diff --git a/demo/tslint.json b/demo/tslint.json
diff --git a/demo/webpack.server.config.js b/demo/webpack.server.config.js
diff --git a/demo/e2e/app.e2e-spec.ts → e2e/app.e2e-spec.ts b/demo/e2e/app.e2e-spec.ts → e2e/app.e2e-spec.ts
@@ -1,6 +1,6 @@
 import { NgxMaterialPagesDemoPage } from './app.po';
 
-describe('ngx-material-pages-demo App', () => {
+describe('@angular-material-extensions/pages-demo App', () => {
   let page: NgxMaterialPagesDemoPage;
 
   beforeEach(() => {

diff --git a/demo/e2e/app.po.ts → e2e/app.po.ts b/demo/e2e/app.po.ts → e2e/app.po.ts
diff --git a/demo/e2e/tsconfig.e2e.json → e2e/tsconfig.e2e.json b/demo/e2e/tsconfig.e2e.json → e2e/tsconfig.e2e.json
diff --git a/demo/firebase.json → firebase.json b/demo/firebase.json → firebase.json
@@ -1,5 +1,5 @@
 {
-  "firebase": "ngx-material-pages",
+  "firebase": "@angular-material-extensions/pages",
   "public": "dist/browser",
   "ignore": [
     "firebase.json",

diff --git a/greenkeeper.json b/greenkeeper.json
@@ -0,0 +1,10 @@
+{
+  "groups": {
+    "default": {
+      "packages": [
+        "demo/package.json",
+        "package.json"
+      ]
+    }
+  }
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -77,8 +77,8 @@ const argv = yargs
   .argv;
 
 const config = {
-  libraryName: 'ngx-material-pages',
-  unscopedLibraryName: 'ngx-material-pages',
+  libraryName: '@angular-material-extensions/pages',
+  unscopedLibraryName: 'pages',
   allSrc: 'src/**/*',
   allTs: 'src/**/!(*.spec).ts',
   allSass: 'src/**/*.+(scss|sass)',
@@ -284,6 +284,18 @@ gulp.task('build', ['clean'], (cb) => {
   runSequence('compile', 'npm-package', 'rollup-bundle', cb);
 });
 
+// Build the schematics in dist
+gulp.task('build:schematics', () => {
+  // return execDemoCmd(`build --preserve-symlinks --prod --aot --build-optimizer`, {cwd: `${config.demoDir}`});
+  return execCmd('tsc', '-p src/schematics/tsconfig.json').then(exitCode => {
+    if (exitCode === 0) {
+      return execCmd('webpack', '--config src/schematics/webpack.config.js --progress --colors');
+    } else {
+      Promise.reject(1);
+    }
+  });
+});
+
 // Same as 'build' but without cleaning temp folders (to avoid breaking demo app, if currently being served)
 gulp.task('build-watch', (cb) => {
   runSequence('compile', 'test', 'npm-package', 'rollup-bundle', cb);
@@ -313,7 +325,7 @@ gulp.task('build:watch-fast', ['build-watch-no-tests'], () => {
 gulp.task('npm-package', (cb) => {
   let pkgJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
   let targetPkgJson = {};
-  let fieldsToCopy = ['version', 'description', 'keywords', 'author', 'repository', 'license', 'bugs', 'homepage'];
+  let fieldsToCopy = ['version', 'description', 'keywords', 'author', 'repository', 'license', 'bugs', 'homepage', 'schematics'];
 
   targetPkgJson['name'] = config.libraryName;
 
@@ -503,8 +515,7 @@ gulp.task('serve:doc', ['clean:doc'], (cb) => {
 const execDemoCmd = (args, opts) => {
   if (fs.existsSync(`${config.demoDir}/node_modules`)) {
     return execCmd('ng', args, opts, `/${config.demoDir}`);
-  }
-  else {
+  } else {
     gulpUtil.log(gulpUtil.colors.yellow(`No 'node_modules' found in '${config.demoDir}'. Installing dependencies for you...`));
     return helpers.installDependencies({cwd: `${config.demoDir}`})
       .then(exitCode => exitCode === 0 ? execCmd('ng', args, opts, `/${config.demoDir}`) : Promise.reject())
@@ -656,7 +667,7 @@ gulp.task('create-new-tag', (cb) => {
 });
 
 // Build and then Publish 'dist' folder to NPM
-gulp.task('npm-publish', ['build'], () => {
+gulp.task('npm-publish', ['build', 'build:schematics'], () => {
   return execExternalCmd('npm', `publish ${config.outputDir} --access public`)
 });
 
@@ -671,8 +682,7 @@ gulp.task('release', (cb) => {
   if (!readyToRelease()) {
     gulpUtil.log(gulpUtil.colors.red('# Pre-Release Checks have failed. Please fix them and try again. Aborting...'));
     cb();
-  }
-  else {
+  } else {
     gulpUtil.log(gulpUtil.colors.green('# Pre-Release Checks have succeeded. Continuing...'));
     runSequence(
       'bump-version',

diff --git a/karma.conf.js b/karma.conf.js
@@ -1 +1,33 @@
-module.exports = require('./config/karma.conf.js');
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,126 +1,110 @@
 {
-  "name": "ngx-material-pages",
-  "description": "Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes)",
-  "version": "1.3.2",
-  "homepage": "https://github.com/anthonynahas/ngx-material-pages",
-  "author": {
-    "name": "anthonynahas",
-    "url": "https://github.com/anthonynahas"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/anthonynahas/ngx-material-pages.git"
-  },
+  "name": "demo",
+  "version": "0.0.0",
   "license": "MIT",
-  "keywords": [
-    "ngx",
-    " angular",
-    " library",
-    " material",
-    " material-ui",
-    " material-design",
-    " material-components",
-    "pages",
-    "pagination",
-    "turorials"
-  ],
-  "bugs": {
-    "url": "https://github.com/anthonynahas/ngx-material-pages/issues"
-  },
-  "private": true,
+  "description": "Demo app for @angular-material-extensions/pages",
   "scripts": {
-    "build": "gulp build",
-    "build:watch": "gulp build:watch",
-    "build:watch:fast": "gulp build:watch-fast",
-    "test": " gulp test",
-    "test:watch": " gulp test:watch",
-    "demo": " gulp build:demo",
-    "check-travis": " travis-status --repo=anthonynahas/ngx-material-pages --branch=master --fail-pending || echo 'Not yet passing'"
+    "ng": "ng",
+    "start": "ng serve --port 4901",
+    "build": "ng build",
+    "build:client-and-server-bundles:ghpages": "npm run build:prod:ghpages && ng run pages:server:production --bundleDependencies all",
+    "build:docs": "npx compodoc -p projects/angular-material-extensions/pages/tsconfig.lib.json --hideGenerator --disableCoverage -d dist/browser/doc/",
+    "build:lib": "ng build @angular-material-extensions/pages",
+    "build:lib:Watch": "ng build @angular-material-extensions/pages --watch",
+    "build:prod": "ng build --prod",
+    "build:prod:ghpages": "ng build --preserve-symlinks --prod --aot --build-optimizer --base-href /pages/ --deploy-url /pages/",
+    "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
+    "build:prerender:ghpages": "npm run build:client-and-server-bundles:ghpages && npm run compile:server && npm run generate:prerender",
+    "deploy": "ng deploy --base-href=/pages/ --no-build",
+    "generate:prerender": "cd dist && node prerender",
+    "test": "jest",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "serve:prerender": "cd dist/browser && http-server",
+    "release": "release-it",
+    "test:watch": "jest --watch",
+    "compile:server_bak": "webpack --config webpack.server.config.js --progress --colors",
+    "build:ssr_bak": "npm run build:client-and-server-bundles && npm run compile:server",
+    "serve:ssr_bak": "node dist/server",
+    "build:client-and-server-bundles_bak": "ng build --prod && ng run pages:server:production --bundleDependencies all",
+    "dev:ssr": "ng run pages:serve-ssr",
+    "serve:ssr": "node dist/server/main.js",
+    "build:ssr": "ng build --prod && ng run pages:server:production",
+    "prerender": "ng run pages:prerender"
   },
+  "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.5",
-    "@angular/cdk": "^6.2.1",
-    "@angular/common": "^6.0.5",
-    "@angular/core": "^6.0.5",
-    "@angular/material": "^6.2.1"
+    "@angular/animations": "^9.0.0",
+    "@angular/cdk": "^9.0.0",
+    "@angular/common": "^9.0.0",
+    "@angular/compiler": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "@angular/flex-layout": "^9.0.0-beta.29",
+    "@angular/forms": "^9.0.0",
+    "@angular/material": "^9.0.0",
+    "@angular/platform-browser": "^9.0.0",
+    "@angular/platform-browser-dynamic": "^9.0.0",
+    "@angular/platform-server": "^9.0.0",
+    "@angular/router": "^9.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
+    "@nguniversal/express-engine": "^9.0.0",
+    "bootstrap": "^4.4.1",
+    "core-js": "^3.6.4",
+    "express": "^4.15.2",
+    "font-awesome": "^4.7.0",
+    "include-media": "^1.4.9",
+    "material-design-icons": "^3.0.1",
+    "ngx-clipboard": "^12.3.0",
+    "ngx-disqus": "^2.4.2",
+    "ngx-highlightjs": "^4.0.2",
+    "rxjs": "^6.5.4",
+    "rxjs-compat": "^6.5.4",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular/compiler": "^6.0.5",
-    "@angular/compiler-cli": "^6.0.5",
-    "@angular/language-service": "^6.0.5",
-    "@angular/flex-layout": "^6.0.0-beta.16",
-    "@angular/forms": "^6.0.5",
-    "@angular/platform-browser": "^6.0.5",
-    "@angular/platform-browser-dynamic": "^6.0.5",
-    "@angular/platform-server": "^6.0.5",
-    "@compodoc/gulp-compodoc": "0.0.9",
-    "@types/jasmine": "2.8.8",
-    "@types/lodash": "4.14.109",
-    "@types/node": "10.3.3",
-    "angular-cli-ghpages": "0.5.2",
-    "angular2-template-loader": "0.6.2",
-    "autoprefixer": "^8.6.2",
-    "awesome-typescript-loader": "^5.0.0",
-    "codelyzer": "^4.3.0",
-    "commitplease": "3.2.0",
-    "conventional-github-releaser": "3.0.0",
-    "core-js": "2.5.7",
-    "css-loader": "0.28.11",
-    "del": "3.0.0",
-    "gulp": "3.9.1",
-    "gulp-bump": "3.1.1",
-    "gulp-conventional-changelog": "2.0.1",
-    "gulp-coveralls": "0.1.4",
-    "gulp-file": "0.4.0",
-    "gulp-git": "2.7.0",
-    "gulp-hub": "0.8.0",
-    "gulp-inline-ng2-template": "4.1.0",
-    "gulp-tslint": "^8.1.3",
-    "gulp-util": "3.0.8",
-    "html-loader": "0.5.5",
-    "is-docker": "1.1.0",
-    "istanbul-instrumenter-loader": "3.0.1",
-    "jasmine-core": "3.1.0",
-    "karma": "2.0.3",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage": "1.1.2",
-    "karma-jasmine": "1.1.2",
-    "karma-jasmine-html-reporter": "1.1.0",
-    "karma-mocha-reporter": "2.2.5",
-    "karma-remap-coverage": "0.1.5",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "3.0.0",
-    "lodash": "4.17.10",
-    "node-sass": "4.9.0",
-    "postcss": "6.0.22",
-    "postcss-strip-inline-comments": "0.1.5",
-    "pump": "3.0.0",
-    "raw-loader": "0.5.1",
-    "rollup": "0.60.7",
-    "rollup-plugin-commonjs": "9.1.3",
-    "rollup-plugin-node-resolve": "3.3.0",
-    "rollup-plugin-sourcemaps": "0.4.2",
-    "rollup-plugin-uglify": "3.0.0",
-    "run-sequence": "2.2.1",
-    "rxjs": "6.2.1",
-    "sass-loader": "7.0.3",
-    "source-map-loader": "0.2.3",
-    "to-string-loader": "1.1.5",
-    "travis-status": "2.0.0",
-    "tslint": "5.10.0",
-    "typescript": "2.7.2",
-    "webpack": "4.12.0",
-    "webpack-dev-middleware": "3.1.3",
-    "webpack-dev-server": "3.1.4",
-    "yargs": "11.0.0",
-    "zone.js": "^0.8.26"
-  },
-  "peerDependencies": {
-    "@angular/cdk": "5.x",
-    "@angular/material": "5.x"
+    "@angular-devkit/build-angular": "~0.900.1",
+    "@angular-devkit/build-ng-packagr": "~0.900.1",
+    "@angular/cli": "^9.0.1",
+    "@angular/compiler-cli": "^9.0.0",
+    "@angular/language-service": "^9.0.0",
+    "@angular/service-worker": "^9.0.0",
+    "@angularclass/hmr": "~2.1.3",
+    "@nguniversal/builders": "^9.0.0",
+    "@nguniversal/express-engine": "^9.0.0",
+    "@release-it/conventional-changelog": "^1.1.0",
+    "@types/express": "^4.17.0",
+    "@types/jasmine": "^3.5.3",
+    "@types/jasminewd2": "^2.0.8",
+    "@types/node": "^12.11.1",
+    "angular-cli-ghpages": "^0.6.2",
+    "codelyzer": "^5.1.2",
+    "express": "^4.16.4",
+    "http-server": "^0.12.1",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "^4.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-jasmine": "^3.1.0",
+    "karma-jasmine-html-reporter": "^1.5.2",
+    "ng-packagr": "^9.0.0",
+    "protractor": "~5.4.3",
+    "reflect-metadata": "~0.1.10",
+    "release-it": "^12.4.3",
+    "schematics-utilities": "^2.0.1",
+    "semantic-release": "^17.0.2",
+    "ts-loader": "^6.2.1",
+    "ts-node": "~8.6.2",
+    "tslint": "~6.0.0",
+    "typescript": "~3.7.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-node-externals": "~1.7.2",
+    "xmlhttprequest": "^1.8.0"
   },
   "engines": {
-    "node": ">=8.x"
+    "node": ">=10.x"
   },
   "greenkeeper": {
     "ignore": [
@@ -139,23 +123,12 @@
       "awesome-typescript-loader",
       "codelyzer",
       "@angular/animations",
-      "@types/jasmine"
+      "@types/jasmine",
+      "@types/jest",
+      "@types/node",
+      "conventional-github-releaser",
+      "rollup-plugin-uglify",
+      "gulp-inline-ng2-template"
     ]
-  },
-  "commitplease": {
-    "style": "angular",
-    "types": [
-      "feat",
-      "fix",
-      "docs",
-      "style",
-      "refactor",
-      "perf",
-      "test",
-      "chore",
-      "revert",
-      "demo"
-    ],
-    "scope": "\\S+.*"
   }
 }
diff --git a/demo/prerender.ts → prerender.ts b/demo/prerender.ts → prerender.ts
@@ -1,24 +1,25 @@
 // Load zone.js for the server.
 import 'zone.js/dist/zone-node';
 import 'reflect-metadata';
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
 
 import { enableProdMode } from '@angular/core';
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
-
-// Express Engine
-import { ngExpressEngine } from '@nguniversal/express-engine';
 // Import module map for lazy loading
 import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 import { renderModuleFactory } from '@angular/platform-server';
 import { ROUTES } from './static.paths';
 
+(global as any).WebSocket = require('ws');
+(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
 
-const BROWSER_FOLDER = join(process.cwd(), 'dist', 'browser');
+const BROWSER_FOLDER = join(process.cwd(), 'browser');
 
 // Load the index.html file containing referances to your application bundle.
 const index = readFileSync(join(BROWSER_FOLDER, 'index.html'), 'utf8');
@@ -27,19 +28,21 @@ let previousRender = Promise.resolve();
 
 // Iterate each route path
 ROUTES.forEach(route => {
-  var fullPath = join(BROWSER_FOLDER, route);
+  const fullPath = join(BROWSER_FOLDER, route);
 
   // Make sure the directory structure is there
-  if(!existsSync(fullPath)){
+  if (!existsSync(fullPath)) {
     mkdirSync(fullPath);
   }
 
   // Writes rendered HTML to index.html, replacing the file if it already exists.
-  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
-    document: index,
-    url: route,
-    extraProviders: [
-      provideModuleMap(LAZY_MODULE_MAP)
-    ]
-  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
+  previousRender = previousRender
+    .then(_ =>
+      renderModuleFactory(AppServerModuleNgFactory, {
+        document: index,
+        url: route,
+        extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
+      })
+    )
+    .then(html => writeFileSync(join(fullPath, 'index.html'), html));
 });
diff --git a/projects/angular-material-extensions/pages/README.md b/projects/angular-material-extensions/pages/README.md
@@ -0,0 +1,327 @@
+<p align="center">
+  <img height="256px" width="256px" style="text-align: center;" src="https://cdn.rawgit.com/angular-material-extensions/pages/master/demo/src/assets/logo.svg">
+</p>
+
+
+# @angular-material-extensions/pages - Open source library for Angular Apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes) - Angular V7 supported
+
+[![npm version](https://badge.fury.io/js/%40angular-material-extensions%2Fpages.svg)](https://badge.fury.io/js/%40angular-material-extensions%2Fpages)
+[![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://angular-material-extensions.github.io/pages)
+[![Join the chat at https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/angular-material-extensions/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/angular-material-extensions/pages/master.svg?label=circleci)](https://circleci.com/gh/angular-material-extensions/pages)
+[![Coverage Status](https://coveralls.io/repos/github/angular-material-extensions/pages/badge.svg?branch=master)](https://coveralls.io/github/angular-material-extensions/pages?branch=master)
+[![dependency Status](https://david-dm.org/angular-material-extensions/pages/status.svg)](https://david-dm.org/angular-material-extensions/pages)
+[![devDependency Status](https://david-dm.org/angular-material-extensions/pages/dev-status.svg?branch=master)](https://david-dm.org/angular-material-extensions/pages#info=devDependencies)
+[![Greenkeeper Badge](https://badges.greenkeeper.io/angular-material-extensions/pages.svg)](https://greenkeeper.io/)
+[![license](https://img.shields.io/github/license/angular-material-extensions/pages.svg?style=flat-square)](https://github.com/angular-material-extensions/pages/blob/master/LICENSE)
+[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)
+
+
+> This Github project has been transferred to the angular material extensions monorepo [angular-material-extensions/components](https://github.com/angular-material-extensions/components)
+
+<p align="center">
+  <img alt="@angular-material-extensions/pages" style="text-align: center;"
+   src="assets/demo.gif">
+</p>
+
+
+Do you need an illustration for your explanations and tutorials ? Or maybe an alternative way of pagination ?
+Are you using [angular](https://angular.io/) to build wonderful pwa ?
+You favorite front-end framework is [angular material](https://material.angular.io/) ?
+
+@angular-material-extensions/pages is the right UI component for you!
+You build wonderful and comprehensive tutorials pages by providing an outlook and content for each
+step of your explanation.
+
+Try it out! 
+
+## Built by and for developers :heart:
+Do you have any question or suggestion ? Please do not hesitate to contact us!
+Alternatively, provide a PR | open an appropriate issue [here](https://github.com/angular-material-extensions/pages/issues)
+
+If did you this project, support [angular-material-extensions](https://github.com/angular-material-extensions) 
+by starring :star: and sharing it :loudspeaker:
+
+## Table of Contents
+- [Demo](#demo)
+- [Dependencies](#dependencies)
+- [Peer Dependencies](#peerDependencies)
+- [Additional Requirements - material (Include a theme)](#additional-requirements-material-theme)
+- [Additional Requirements - material icons](#additional-requirements-material-icons)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Run Demo App Locally](#run-demo-app-locally)
+- [Other Angular Libraries](#other-angular-libraries)
+- [Support](#support)
+- [License](#license)
+
+---
+
+## [Demo](https://angular-material-extensions.github.io/pages)
+
+View all the directives and components in action at [https://angular-material-extensions.github.io/pages](https://angular-material-extensions.github.io/pages)
+
+## Dependencies
+* [Angular](https://angular.io) (*requires*) tested with V7
+- if you are still using angular v5 or lower, please use the following version `1.2.1`
+
+
+> This project has been renamed from [@angular-material-extensions/pages](https://www.npmjs.com/package/@angular-material-extensions/pages) to [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)
+
+<a name="peerDependencies"/>
+
+## Peer Dependencies
+- [angular animations v7.x](https://www.npmjs.com/package/@angular/animations)
+- [angular material v7.x](https://www.npmjs.com/package/@angular/material)
+- [angular cdk v7.x](https://www.npmjs.com/package/@angular/cdk)
+
+> [learn more about angular material and cdk](https://material.angular.io/guide/getting-started#step-1-install-angular-material-and-angular-cdk)
+
+> if you need a built in theme --> please let me know
+```bash
+npm i -s @angular/animations @angular/material @angular/cdk
+```
+
+or use `angular schematics` like e.g:
+
+```bash
+ng add @angular/material 
+```
+
+
+<a name="additional-requirements-material-theme"/>
+
+### Additional requirements Theme (Material Design)
+- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
+
+<a name="additional-requirements-material-icons"/>
+
+## Additional Requirements - Import the material design icons [learn more](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)
+
+- The easiest way to import material design icons is to provide a link in your `index.html` file like below:
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
+- alternative solution:
+
+1. Install of the official npm module of the material design icons
+
+```bash
+npm i -s material-design-icons
+```
+
+2. Import them in your `angular.json` file
+
+```json
+"styles": [
+        "styles.css",
+        "../node_modules/material-design-icons/iconfont/material-icons.css"
+      ],
+```  
+
+
+----
+
+<a name="installation"/>
+
+##  [Installation](https://angular-material-extensions.github.io/pages/getting-started)
+
+Install above dependencies via *npm*. 
+
+Now install `@angular-material-extensions/pages` via:
+```shell
+npm install --save @angular-material-extensions/pages
+```
+
+---
+##### SystemJS
+>**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
+In your systemjs config file, `map` needs to tell the System loader where to look for `@angular-material-extensions/pages`:
+```js
+map: {
+  '@angular-material-extensions/pages': 'node_modules/@angular-material-extensions/pages/bundles/@angular-material-extensions/pages.umd.js',
+}
+```
+---
+
+Once installed you need to import the main module:
+```js
+import { MatPagesModule } from '@angular-material-extensions/pages';
+```
+The only remaining part is to list the imported module in your application module. The exact method will be slightly
+different for the root (top-level) module for which you should end up with the code similar to (notice ` MatPagesModule .forRoot()`):
+
+NB: please do not forget to import the angular animations module in your root component too! (usally app.component.ts)
+```js
+import { MatPagesModule } from '@angular-material-extensions/pages';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+@NgModule({
+  declarations: [AppComponent, ...],
+  imports: [MatPagesModule.forRoot(),
+  BrowserAnimationsModule,
+   ...],  
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}
+```
+
+Other modules in your application can simply import ` MatPagesModule `:
+
+```js
+import { MatPagesModule } from '@angular-material-extensions/pages';
+
+@NgModule({
+  declarations: [OtherComponent, ...],
+  imports: [MatPagesModule, ...], 
+})
+export class OtherModule {
+}
+```
+
+## Add a material theme - [help](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
+The easiest way is to add 
+```css
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+```
+to you `styles.css` files
+
+[learn more](https://material.angular.io/guide/theming)
+
+## Add a material icons - [help](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)
+The easiest way is to add 
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+to you `index.html` files
+
+[learn more](https://google.github.io/material-design-icons/)
+
+
+<a name="usage"/>
+
+## [Usage](https://angular-material-extensions.github.io/pages/getting-started)
+
+This library consists of 4 essential components.
+
+1. `mat-pages` the main container that hold the pages incl. the outlook view and the content
+2. `mat-page-loader` the container of each page. This component should have two nested elements
+ which are the outlook and the content components (see below)
+3. `mat-page-outlook` the outlook view of a page. This can contain a custom component, custom layout or just a title.
+4. `mat-page-content` this is the content view of the page. This can be anything!!
+
+5. Example:
+
+```html
+<mat-pages>
+    <mat-page-loader>
+      <mat-page-outlook>
+        <!-- put your own outlook view for the first page -->
+      </mat-page-outlook>
+      <mat-page-content>
+        <!-- put your own content view for the first page -->
+      </mat-page-content>
+    </mat-page-loader>
+    <mat-page-loader>
+      <mat-page-outlook>
+        <!-- put your own outlook view for the second page -->
+      </mat-page-outlook>
+      <mat-page-content>
+        <!-- put your own content view for the second page -->
+      </mat-page-content>
+    </mat-page-loader>
+  </mat-pages>
+```
+
+--- 
+
+<a name="documentation"/>
+
+## [Documentation](https://angular-material-extensions.github.io/pages/doc/index.html)
+
+Please checkout the full documentation [here](https://angular-material-extensions.github.io//pages/doc/index.html) 
+or follow the official [tutorial](https://angular-material-extensions.github.io//pages/getting-started)
+
+--- 
+
+
+<a name="run-demo-app-locally"/>
+
+## Run Demo App Locally
+
+- [clone this repo](https://github.com/angular-material-extensions/pages.git) by running
+```bash
+$ git clone https://github.com/angular-material-extensions/pages.git
+```
+
+- link the **@angular-material-extensions/pages** package
+
+```bash
+$ gulp link
+```
+
+- build the library
+
+```bash
+$ gulp build
+```
+
+- navigate to the demo app directory
+```bash
+$ cd demo
+```
+
+- install the dependencies
+```bash
+$ npm i
+```
+
+- run/start/serve the app
+```bash
+$ npm run start
+```
+or
+```bash
+$ ng serve --open
+```
+- the app is now hosted on `http://localhost:4200/`
+
+
+## Where are @angular-material-extensions/pages being used ? Here are some examples
+- [ngx-auth-firebaseui](https://ngx-auth-firebaseui.firebaseapp.com/getting-started)
+- [@angular-material-extensions/pages](https://angular-material-extensions.github.io/pages/getting-started)
+- [@angular-material-extensions/password-strength](https://angular-material-extensions.github.io/password-strength/getting-started)
+- [@angular-material-extensions/contacts](https://angular-material-extensions.github.io/contacts/getting-started)
+- [@angular-material-extensions/faq](https://angular-material-extensions.github.io/faq/getting-started)
+- [@angular-material-extensions/combination-generator](https://angular-material-extensions.github.io/combination-generator/getting-started)
+
+<a name="other-angular-libraries"/>
+
+## Other Angular Libraries
+- [ngx-auth-firebaseui](https://github.com/AnthonyNahas/ngx-auth-firebaseui)
+- [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs)
+- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)
+- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)
+- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)
+- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)
+- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)
+- [@angular-material-extensions/jumbotron](https://github.com/angular-material-extensions/jumbotron)
+- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)
+- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)
+
+---
+
+## Support
++ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de) and I will help you
++ or open an appropriate [issue](https://github.com/angular-material-extensions/pages/issues)
++ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)
+
+ ---
+
+## License
+
+Copyright (c) 2018 [Anthony Nahas](mailto:anthony.na@hotmail.de). Licensed under the MIT License (MIT)
diff --git a/demo/karma.conf.js → ...r-material-extensions/pages/karma.conf.js b/demo/karma.conf.js → ...r-material-extensions/pages/karma.conf.js
@@ -12,22 +12,21 @@ 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/angular-material-extensions/pages'),
+      reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    restartOnFileChange: true
   });
 };
diff --git a/projects/angular-material-extensions/pages/ng-package.json b/projects/angular-material-extensions/pages/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/angular-material-extensions/pages",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/projects/angular-material-extensions/pages/package.json b/projects/angular-material-extensions/pages/package.json
@@ -0,0 +1,110 @@
+{
+  "name": "@angular-material-extensions/pages",
+  "description": "Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes)",
+  "version": "4.0.0",
+  "homepage": "https://github.com/angular-material-extensions/pages",
+  "author": {
+    "name": "anthonynahas",
+    "url": "https://github.com/anthonynahas"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/angular-material-extensions/pages.git"
+  },
+  "license": "MIT",
+  "schematics": "./schematics/collection.json",
+  "keywords": [
+    "ngx",
+    " angular",
+    " library",
+    " material",
+    " material-ui",
+    " material-design",
+    " material-components",
+    "pages",
+    "pagination",
+    "turorials"
+  ],
+  "bugs": {
+    "url": "https://github.com/angular-material-extensions/pages/issues"
+  },
+  "scripts": {
+    "build": "../../../node_modules/.bin/ng build @angular-material-extensions/pages --prod",
+    "build:watch": "../../../node_modules/.bin/ng build @angular-material-extensions/pages --watch",
+    "build:schematics": "../../../node_modules/.bin/tsc -p tsconfig.schematics.json",
+    "clean": "rm -rf ../../../dist",
+    "lint": "../../../node_modules/.bin/ng lint @angular-material-extensions/pages",
+    "resync:schematics": "rsync -a schematics/collection.json ../../../dist/angular-material-extensions/pages/schematics/",
+    "resync:readme": "rsync -a ../../../README.md ../../../dist/angular-material-extensions/pages/",
+    "postbuild": "npm run build:schematics && npm run resync:readme && npm run resync:schematics",
+    "prepublish": "npm run build",
+    "release:patch": "../../../node_modules/.bin/release-it --patch --ci",
+    "release:minor": "../../../node_modules/.bin/release-it --minor --ci",
+    "release:major": "../../../node_modules/.bin/release-it --major --ci",
+    "release:version": "../../../node_modules/.bin/release-it 4.0.0 --ci --no-git.requireCleanWorkingDir ",
+    "ng:test": "../../../node_modules/.bin/ng test @angular-material-extensions/pages",
+    "test": "../../../node_modules/.bin/jest --coverage",
+    "test:watch": "../../../node_modules/.bin/jest --coverage --watch"
+  },
+  "peerDependencies": {
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "@angular/cdk": "^9.0.0",
+    "@angular/material": "^9.0.0"
+  },
+  "engines": {
+    "node": ">=10.13"
+  },
+  "release-it": {
+    "github": {
+      "release": true
+    },
+    "npm": {
+      "publish": true,
+      "publishPath": "../../../dist/angular-material-extensions/pages"
+    },
+    "publishConfig": {
+      "access": "public"
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular",
+        "infile": "../../../CHANGELOG.md"
+      }
+    },
+    "hooks": {
+      "before:init": [
+        "npm run clean"
+      ],
+      "after:bump": "echo \"building lib v${version}... \" && npm run build",
+      "before:git:release": "echo \"Updating CHANGELOG.md for v${version} \" && git commit -m \"docs(lib): updating CHANGELOG.md for v${version} \" ../../../CHANGELOG.md",
+      "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}.",
+      "before:npm": "echo building the library..."
+    }
+  },
+  "greenkeeper": {
+    "ignore": [
+      "@angular/core",
+      "@angular/common",
+      "@angular/compiler",
+      "@angular/platform-server",
+      "@angular/platform-browser",
+      "@angular/platform-browser-dynamic",
+      "@angular/compiler-cli",
+      "zone.js",
+      "rxjs",
+      "tslint",
+      "gulp-tslint",
+      "typescript",
+      "awesome-typescript-loader",
+      "codelyzer",
+      "@angular/animations",
+      "@types/jasmine",
+      "@types/jest",
+      "@types/node",
+      "conventional-github-releaser",
+      "rollup-plugin-uglify",
+      "gulp-inline-ng2-template"
+    ]
+  }
+}
diff --git a/projects/angular-material-extensions/pages/schematics/README.md b/projects/angular-material-extensions/pages/schematics/README.md
@@ -0,0 +1,28 @@
+# Getting Started With Schematics
+
+This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.
+
+### Testing
+
+To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode.
+
+Check the documentation with
+```bash
+schematics --help
+```
+
+### Unit Testing
+
+`npm run test` will run the unit tests, using Jasmine as a runner and test framework.
+
+### Publishing
+
+To publish, simply do:
+
+```bash
+npm run build
+npm publish
+```
+
+That's it!
+
diff --git a/projects/angular-material-extensions/pages/schematics/collection.json b/projects/angular-material-extensions/pages/schematics/collection.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "~node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Installs and injects the @angular-material-extensions/pages library",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}
diff --git a/projects/angular-material-extensions/pages/schematics/ng-add/index.ts b/projects/angular-material-extensions/pages/schematics/ng-add/index.ts
@@ -0,0 +1,98 @@
+import {chain, noop, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
+import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
+import {
+  addModuleImportToRootModule,
+  addPackageJsonDependency,
+  getProjectFromWorkspace,
+  getWorkspace,
+  NodeDependency,
+  NodeDependencyType
+} from 'schematics-utilities';
+
+/** Loads the full version from the given Angular package gracefully. */
+function loadPackageVersionGracefully(context: SchematicContext): string | null {
+  try {
+    context.logger.log('info', `🧟‍ @angular-material-extensions/pages
+     is using the following version ${require(`../../package.json`).version}`);
+    return require(`../../package.json`).version;
+  } catch {
+    return null;
+  }
+}
+
+// You don't have to export the function as default. You can also have more than one rule factory
+// per file.
+export function addPackageJsonDependencies(): Rule {
+  return (host: Tree, context: SchematicContext) => {
+
+    const ngCoreVersionTag = getPackageVersionFromPackageJson(host, '@angular/core');
+
+    const dependencies: NodeDependency[] = [
+      {
+        type: NodeDependencyType.Default,
+        version: loadPackageVersionGracefully(context) || 'latest',
+        name: '@angular-material-extensions/pages'
+      },
+      {type: NodeDependencyType.Default, version: ngCoreVersionTag || '7.2.11', name: '@angular/animations'},
+      {type: NodeDependencyType.Default, version: ngCoreVersionTag || '7.2.11', name: '@angular/forms'},
+    ];
+
+    dependencies.forEach(dependency => {
+      addPackageJsonDependency(host, dependency);
+      context.logger.log('info', `✅️ Added "${dependency.name}" into ${dependency.type}`);
+    });
+
+    return host;
+  };
+}
+
+export function installPackageJsonDependencies(): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    context.addTask(new NodePackageInstallTask());
+    context.logger.log('info', `🔍 Installing packages...`);
+
+    return host;
+  };
+}
+
+export function addModuleToImports(options: any): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    const workspace = getWorkspace(host);
+    const project = getProjectFromWorkspace(
+      workspace,
+      // Takes the first project in case it's not provided by CLI
+      options.project ? options.project : Object.keys(workspace.projects)[0]
+    );
+    const moduleName = 'MatPagesModule.forRoot()';
+
+    addModuleImportToRootModule(host, moduleName, '@angular-material-extensions/pages', project);
+    addModuleImportToRootModule(host, 'BrowserAnimationsModule', '@angular/platform-browser/animations', project);
+    context.logger.log('info', `✅️ "${moduleName}" is imported`);
+
+    return host;
+  };
+}
+
+/** Gets the version of the specified package by looking at the package.json in the given tree. */
+export function getPackageVersionFromPackageJson(tree: Tree, name: string): string | null {
+  if (!tree.exists('package.json')) {
+    return null;
+  }
+
+  // tslint:disable-next-line:no-non-null-assertion
+  const packageJson = JSON.parse(tree.read('package.json')!.toString('utf8'));
+
+  if (packageJson.dependencies && packageJson.dependencies[name]) {
+    return packageJson.dependencies[name];
+  }
+
+  return null;
+}
+
+export default function (options: any): Rule {
+  return chain([
+    options && options.skipPackageJson ? noop() : addPackageJsonDependencies(),
+    options && options.skipPackageJson ? noop() : installPackageJsonDependencies(),
+    options && options.skipModuleImport ? noop() : addModuleToImports(options),
+  ]);
+}
diff --git a/projects/angular-material-extensions/pages/schematics/ng-add/index_spec.ts b/projects/angular-material-extensions/pages/schematics/ng-add/index_spec.ts
@@ -0,0 +1,16 @@
+import { Tree } from '@angular-devkit/schematics';
+import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+
+
+const collectionPath = path.join(__dirname, '../collection.json');
+
+
+describe('schematics', () => {
+  it('works', () => {
+    const runner = new SchematicTestRunner('schematics', collectionPath);
+    const tree = runner.runSchematic('schematics', {}, Tree.empty());
+
+    expect(tree.files).toEqual([]);
+  });
+});
diff --git a/.../ngx-material-page-content.component.html → ...e-content/mat-page-content.component.html b/.../ngx-material-page-content.component.html → ...e-content/mat-page-content.component.html
diff --git a/...nt-wrapper/content-wrapper.component.scss → ...e-content/mat-page-content.component.scss b/...nt-wrapper/content-wrapper.component.scss → ...e-content/mat-page-content.component.scss
diff --git a/...x-material-page-content.component.spec.ts → ...ontent/mat-page-content.component.spec.ts b/...x-material-page-content.component.spec.ts → ...ontent/mat-page-content.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgxMaterialPageContentComponent } from './ngx-material-page-content.component';
+import { MatPageContentComponent } from './mat-page-content.component';
 
 describe('NgxMaterialPageContentComponent', () => {
-  let component: NgxMaterialPageContentComponent;
-  let fixture: ComponentFixture<NgxMaterialPageContentComponent>;
+  let component: MatPageContentComponent;
+  let fixture: ComponentFixture<MatPageContentComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NgxMaterialPageContentComponent ]
+      declarations: [ MatPageContentComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgxMaterialPageContentComponent);
+    fixture = TestBed.createComponent(MatPageContentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/.../angular-material-extensions/pages/src/lib/mat-page-content/mat-page-content.component.ts b/.../angular-material-extensions/pages/src/lib/mat-page-content/mat-page-content.component.ts
@@ -0,0 +1,23 @@
+import {Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'mat-page-content',
+  templateUrl: './mat-page-content.component.html',
+  styleUrls: ['./mat-page-content.component.scss'],
+
+})
+export class MatPageContentComponent implements OnInit {
+
+  /** Template for page content. */
+  @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+  @Input()
+  title: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/demo/src/assets/.gitkeep → ...age-loader/mat-page-loader.component.html b/demo/src/assets/.gitkeep → ...age-loader/mat-page-loader.component.html
diff --git a/demo/src/assets/.npmignore → ...age-loader/mat-page-loader.component.scss b/demo/src/assets/.npmignore → ...age-loader/mat-page-loader.component.scss
diff --git a/...gx-material-page-loader.component.spec.ts → ...-loader/mat-page-loader.component.spec.ts b/...gx-material-page-loader.component.spec.ts → ...-loader/mat-page-loader.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgxMaterialPageLoaderComponent } from './ngx-material-page-loader.component';
+import { MatPageLoaderComponent } from './mat-page-loader.component';
 
 describe('NgxMaterialPageLoaderComponent', () => {
-  let component: NgxMaterialPageLoaderComponent;
-  let fixture: ComponentFixture<NgxMaterialPageLoaderComponent>;
+  let component: MatPageLoaderComponent;
+  let fixture: ComponentFixture<MatPageLoaderComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NgxMaterialPageLoaderComponent ]
+      declarations: [ MatPageLoaderComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgxMaterialPageLoaderComponent);
+    fixture = TestBed.createComponent(MatPageLoaderComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/...ts/angular-material-extensions/pages/src/lib/mat-page-loader/mat-page-loader.component.ts b/...ts/angular-material-extensions/pages/src/lib/mat-page-loader/mat-page-loader.component.ts
@@ -0,0 +1,15 @@
+import {Component, ContentChild} from '@angular/core';
+import {MatPageOutlookComponent} from '../mat-page-outlook/mat-page-outlook.component';
+import {MatPageContentComponent} from '../mat-page-content/mat-page-content.component';
+
+@Component({
+  selector: 'mat-page-loader',
+  templateUrl: './mat-page-loader.component.html',
+  styleUrls: ['./mat-page-loader.component.scss']
+})
+export class MatPageLoaderComponent {
+
+  @ContentChild(MatPageOutlookComponent) pageOutlook: MatPageOutlookComponent;
+  @ContentChild(MatPageContentComponent) pageContent: MatPageContentComponent;
+
+}
diff --git a/.../ngx-material-page-outlook.component.html → ...e-outlook/mat-page-outlook.component.html b/.../ngx-material-page-outlook.component.html → ...e-outlook/mat-page-outlook.component.html
diff --git a/.../ngx-material-page-content.component.scss → ...e-outlook/mat-page-outlook.component.scss b/.../ngx-material-page-content.component.scss → ...e-outlook/mat-page-outlook.component.scss
diff --git a/...x-material-page-outlook.component.spec.ts → ...utlook/mat-page-outlook.component.spec.ts b/...x-material-page-outlook.component.spec.ts → ...utlook/mat-page-outlook.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgxMaterialPageOutlookComponent } from './ngx-material-page-outlook.component';
+import { MatPageOutlookComponent } from './mat-page-outlook.component';
 
 describe('NgxMaterialPageOutlookComponent', () => {
-  let component: NgxMaterialPageOutlookComponent;
-  let fixture: ComponentFixture<NgxMaterialPageOutlookComponent>;
+  let component: MatPageOutlookComponent;
+  let fixture: ComponentFixture<MatPageOutlookComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NgxMaterialPageOutlookComponent ]
+      declarations: [ MatPageOutlookComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgxMaterialPageOutlookComponent);
+    fixture = TestBed.createComponent(MatPageOutlookComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/.../angular-material-extensions/pages/src/lib/mat-page-outlook/mat-page-outlook.component.ts b/.../angular-material-extensions/pages/src/lib/mat-page-outlook/mat-page-outlook.component.ts
@@ -0,0 +1,26 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+  selector: 'mat-page-outlook',
+  templateUrl: './mat-page-outlook.component.html',
+  styleUrls: ['./mat-page-outlook.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+
+})
+export class MatPageOutlookComponent implements OnInit {
+
+  /** Template for page outlook content. */
+  @ViewChild(TemplateRef) content: TemplateRef<any>;
+
+  @Input()
+  title: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/...l-pages/ngx-material-pages.component.html → ...ns/pages/src/lib/mat-pages.component.html b/...l-pages/ngx-material-pages.component.html → ...ns/pages/src/lib/mat-pages.component.html
diff --git a/...l-pages/ngx-material-pages.component.scss → ...ns/pages/src/lib/mat-pages.component.scss b/...l-pages/ngx-material-pages.component.scss → ...ns/pages/src/lib/mat-pages.component.scss
diff --git a/...ages/ngx-material-pages.component.spec.ts → ...pages/src/lib/mat-pages.component.spec.ts b/...ages/ngx-material-pages.component.spec.ts → ...pages/src/lib/mat-pages.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgxMaterialPagesComponent } from './ngx-material-pages.component';
+import { MatPagesComponent } from './mat-pages.component';
 
 describe('NgxMaterialPagesComponent', () => {
-  let component: NgxMaterialPagesComponent;
-  let fixture: ComponentFixture<NgxMaterialPagesComponent>;
+  let component: MatPagesComponent;
+  let fixture: ComponentFixture<MatPagesComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NgxMaterialPagesComponent ]
+      declarations: [ MatPagesComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NgxMaterialPagesComponent);
+    fixture = TestBed.createComponent(MatPagesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/...ial-pages/ngx-material-pages.component.ts → ...ions/pages/src/lib/mat-pages.component.ts b/...ial-pages/ngx-material-pages.component.ts → ...ions/pages/src/lib/mat-pages.component.ts
@@ -1,29 +1,37 @@
 import {
   AfterContentInit,
   Component,
-  ContentChildren, ElementRef, EventEmitter, HostListener, Input,
-  OnInit, Output,
-  QueryList, Renderer2, ViewChild
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+  QueryList,
+  Renderer2,
+  ViewChild
 } from '@angular/core';
-import {NgxMaterialPageLoaderComponent} from './ngx-material-page-loader/ngx-material-page-loader.component';
+import {MatPageLoaderComponent} from './mat-page-loader/mat-page-loader.component';
 import {StepperSelectionEvent} from '@angular/cdk/stepper';
-import {MatSidenav, MatTabGroup} from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
+import { MatTabGroup } from '@angular/material/tabs';
 
 @Component({
-  selector: 'ngx-material-pages',
-  templateUrl: './ngx-material-pages.component.html',
-  styleUrls: ['./ngx-material-pages.component.scss']
+  selector: 'mat-pages',
+  templateUrl: './mat-pages.component.html',
+  styleUrls: ['./mat-pages.component.scss']
 })
-export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
+export class MatPagesComponent implements OnInit, AfterContentInit {
 
   @ViewChild('sidenav')
   sidenav: MatSidenav;
 
-  @ViewChild(MatTabGroup, {read: ElementRef})
+  @ViewChild(MatTabGroup, {read: ElementRef, static: true})
   tabHeader: ElementRef;
 
-  @ContentChildren(NgxMaterialPageLoaderComponent)
-  pages: QueryList<NgxMaterialPageLoaderComponent>;
+  @ContentChildren(MatPageLoaderComponent)
+  pages: QueryList<MatPageLoaderComponent>;
 
   @Input()
   title: string;
@@ -101,7 +109,6 @@ export class NgxMaterialPagesComponent implements OnInit, AfterContentInit {
    *
    */
   onStepSelectionChange(event: StepperSelectionEvent) {
-    console.log('onStepSelectionChanged');
     this.index = event.selectedIndex;
     this.pageChanged.emit(this.index);
   }

diff --git a/projects/angular-material-extensions/pages/src/lib/mat-pages.module.ts b/projects/angular-material-extensions/pages/src/lib/mat-pages.module.ts
@@ -0,0 +1,49 @@
+import {CommonModule} from '@angular/common';
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import {MatPagesComponent} from './mat-pages.component';
+import {MatPageLoaderComponent} from './mat-page-loader/mat-page-loader.component';
+import {MatPageContentComponent} from './mat-page-content/mat-page-content.component';
+import {MatPageOutlookComponent} from './mat-page-outlook/mat-page-outlook.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatTabsModule,
+    MatCardModule,
+    MatSidenavModule,
+    MatIconModule,
+    MatStepperModule,
+    MatButtonModule
+  ],
+  exports:
+    [
+      MatPagesComponent,
+      MatPageLoaderComponent,
+      MatPageOutlookComponent,
+      MatPageContentComponent
+    ],
+  declarations: [
+    MatPagesComponent,
+    MatPageLoaderComponent,
+    MatPageOutlookComponent,
+    MatPageContentComponent
+  ]
+})
+export class MatPagesModule {
+  static forRoot(): ModuleWithProviders<MatPagesModule> {
+    return {
+      ngModule: MatPagesModule,
+      providers: []
+    };
+  }
+}
diff --git a/projects/angular-material-extensions/pages/src/lib/pages.module.ts b/projects/angular-material-extensions/pages/src/lib/pages.module.ts
@@ -0,0 +1,10 @@
+import {NgModule} from '@angular/core';
+
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  exports: []
+})
+export class PagesModule {
+}
diff --git a/projects/angular-material-extensions/pages/src/public-api.ts b/projects/angular-material-extensions/pages/src/public-api.ts
@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of pages
+ */
+export * from './lib/mat-page-content/mat-page-content.component';
+export * from './lib/mat-page-loader/mat-page-loader.component';
+export * from './lib/mat-page-outlook/mat-page-outlook.component';
+export * from './lib/mat-pages.component';
+export * from './lib/mat-pages.module';
+// export * from './lib/pages.module';
diff --git a/projects/angular-material-extensions/pages/src/test.ts b/projects/angular-material-extensions/pages/src/test.ts
@@ -0,0 +1,21 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/projects/angular-material-extensions/pages/tsconfig.lib.json b/projects/angular-material-extensions/pages/tsconfig.lib.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/projects/angular-material-extensions/pages/tsconfig.lib.prod.json b/projects/angular-material-extensions/pages/tsconfig.lib.prod.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
diff --git a/projects/angular-material-extensions/pages/tsconfig.schematics.json b/projects/angular-material-extensions/pages/tsconfig.schematics.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": "tsconfig",
+    "lib": [
+      "es2018",
+      "dom"
+    ],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../../dist/angular-material-extensions/pages/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "include": [
+    "schematics/**/*"
+  ],
+  "exclude": [
+    "schematics/*/files/**/*"
+  ]
+}
diff --git a/projects/angular-material-extensions/pages/tsconfig.spec.json b/projects/angular-material-extensions/pages/tsconfig.spec.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/projects/angular-material-extensions/pages/tslint.json b/projects/angular-material-extensions/pages/tslint.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "mat",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "mat",
+      "kebab-case"
+    ]
+  }
+}
diff --git a/demo/protractor.conf.js → protractor.conf.js b/demo/protractor.conf.js → protractor.conf.js
diff --git a/demo/proxy.conf.json → proxy.conf.json b/demo/proxy.conf.json → proxy.conf.json
diff --git a/server.ts b/server.ts
@@ -0,0 +1,60 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import { join } from 'path';
+
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+// The Express app is exported so that it can be used by serverless Functions.
+export function app() {
+  const server = express();
+  const distFolder = join(process.cwd(), 'dist/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // app.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run() {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = mainModule && mainModule.filename || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  run();
+}
+
+export * from './src/main.server';
diff --git a/server.ts.bak b/server.ts.bak
@@ -0,0 +1,50 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+import {enableProdMode} from '@angular/core';
+// Express Engine
+import {ngExpressEngine} from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
+
+import * as express from 'express';
+import {join} from 'path';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/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', DIST_FOLDER);
+
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Server static files from /browser
+app.get('*.*', express.static(DIST_FOLDER, {
+  maxAge: '1y'
+}));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});
diff --git a/demo/src/_variables.scss → src/_variables.scss b/demo/src/_variables.scss → src/_variables.scss
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
+  },
+  {
+    path: 'getting-started',
+    loadChildren: () => import('./getting-started/getting-started.module').then(m => m.GettingStartedModule)
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}
diff --git a/demo/src/app/app.component.html → src/app/app.component.html b/demo/src/app/app.component.html → src/app/app.component.html
diff --git a/demo/src/app/app.component.scss → src/app/app.component.scss b/demo/src/app/app.component.scss → src/app/app.component.scss
diff --git a/demo/src/app/app.component.ts → src/app/app.component.ts b/demo/src/app/app.component.ts → src/app/app.component.ts
diff --git a/demo/src/app/app.module.ts → src/app/app.module.ts b/demo/src/app/app.module.ts → src/app/app.module.ts
@@ -20,7 +20,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
     // Add .withServerTransition() to support Universal rendering.
     // The application ID can be any identifier which is unique on
     // the page.
-    BrowserModule.withServerTransition({appId: 'ngx-material-pages-demo-id'}),
+    BrowserModule.withServerTransition({appId: 'demo'}),
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     BrowserAnimationsModule,
     FormsModule,

diff --git a/demo/src/app/app.server.module.ts → src/app/app.server.module.ts b/demo/src/app/app.server.module.ts → src/app/app.server.module.ts
@@ -3,16 +3,14 @@ import {ServerModule} from '@angular/platform-server';
 
 import {AppModule} from './app.module';
 import {AppComponent} from './app.component';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 
 @NgModule({
   imports: [
     // The AppServerModule should import your AppModule followed
     // by the ServerModule from @angular/platform-server.
     AppModule,
-    ServerModule,
-    ModuleMapLoaderModule
-  ],
+    ServerModule
+],
   // Since the bootstrapped component is not inherited from your
   // imported AppModule, it needs to be repeated here.
   bootstrap: [AppComponent],

diff --git a/...started/getting-started-routing.module.ts → ...started/getting-started-routing.module.ts b/...started/getting-started-routing.module.ts → ...started/getting-started-routing.module.ts