feat(theme): ng-add schematic (#942)

angular.json

@@ -83,6 +83,9 @@
             "assets": [
               "src/assets",
               "src/favicon.ico"
+            ],
+            "exclude": [
+              "./src/framework/**/schematics/**/*"
             ]
           }
         },
@@ -94,7 +97,9 @@
               "src/tsconfig.spec.json",
               "scripts/gulp/tsconfig.json"
             ],
-            "exclude": []
+            "exclude": [
+              "node_modules/**"
+            ]
           }
         }
       }

docs/articles/install-into-existing.md

@@ -13,19 +13,56 @@ In case you want to start based on our ngx-admin starter kit, please check out [
 </div>
 <hr>
 
-## Installing dependencies
+## Using Angular CLI
+
+<hr>
+
+### Installation
+
+We strongly recommend to develop Angular with @angular/cli, you can install it with the following command.
+
+```bash
+npm install -g @angular/cli
+```
+<hr>
+
+### Create a New Project
+
+A new project can be created using Angular CLI tools.
+
+```bash
+ng new PROJECT-NAME
+```
+<hr>
+
+### Install Nebular
+
+Nebular support init configuration with schematics. So, you may just add it to your project.
+
+```bash
+ng add @nebular/theme
+```
+
+That's it. Nebular has to be ready to go now.
+<hr>
+
+## Manually
+
+<hr>
+
+### Installing dependencies
 
 At this step, we assume you already have Angular modules installed.
 
-## Install Nebular modules
+### Install Nebular modules
 
 ```bash
 npm install --save @nebular/theme @angular/cdk @angular/animations
 ```
 Additionally you can install Auth and Security `npm install --save @nebular/auth @nebular/security`
 <hr>
 
-## Configure Nebular
+### Configure Nebular
 
 At this stage you have everything in place, let's configure Nebular in the app module.
 
@@ -48,7 +85,7 @@ export class AppModule {
 Same way you can enable Auth Module (more details under [Auth Module Concepts & Install](docs/auth/conceptsinstall) article).
 <hr>
 
-## Install Styles
+### Install Styles
 Now, let's import Nebular styles
 
 Include default Nebular theme CSS files into your `angular.json` file:
@@ -68,7 +105,7 @@ Include default Nebular theme CSS files into your `angular.json` file:
 </div>
 <hr>
 
-## Create a page
+### Create a page
 
 Now, let's create a simple Nebular page (header + sidebar) in your project. We suppose that you have a separate module per page, let's open your `some-page.module.ts` and import necessary layout components:
 

docs/tsconfig.app.json

@@ -27,7 +27,8 @@
     "**/*.spec.ts",
     "../src/framework/**/*.spec.ts",
     "assets/**/*.ts",
-    "dist/**/*"
+    "dist/**/*",
+    "../src/framework/**/schematics/**/*"
   ],
   "include": [
     "../docs/**/*",

package.json

@@ -32,8 +32,11 @@
     "docs:gh-pages": "npm run docs:build && npm run ngh -- --dir ./docs/dist",
     "build": "ng build",
     "build:wp": "npm run build -- playground-wp --prod --aot",
-    "build:package": "npm-run-all -s clean:tmp:lib gulp build:ts build:inline-resources build:bundle clean:tmp",
+    "build:package": "npm-run-all -s clean:tmp:lib gulp build:ts build:schematics:package build:inline-resources build:bundle clean:tmp",
     "build:ts": "tsc -p tsconfig.publish.json && ngc -p tsconfig.publish.json",
+    "build:schematics:package": "tsc -p tsconfig.schematics.publish.json",
+    "build:schematics:dev": "rimraf ./src/.lib && tsc -p tsconfig.schematics.json && npm run build:inline-schematics-resources",
+    "build:inline-schematics-resources": "gulp inline-schematics-resources",
     "build:inline-resources": "gulp inline-resources",
     "build:bundle": "gulp bundle",
     "build:rename:dev": "gulp bundle:rename-dev",
@@ -42,6 +45,7 @@
     "test:wp": "npm run test -- playground-wp",
     "test:watch": "ng test playground-wp --watch",
     "test:coverage": "rimraf coverage && ng test playground --code-coverage --watch=false",
+    "test:schematics": "npm run build:schematics:dev && jasmine ./src/.lib/**/*.spec.js",
     "lint": "ng lint playground --type-check",
     "lint:styles": "stylelint ./src/framework/**/*.scss && stylelint ./docs/**/*.scss",
     "lint:fix": "npm run lint -- --fix",
@@ -113,6 +117,7 @@
     "@angular/cli": "7.0.2",
     "@angular/compiler-cli": "7.0.0",
     "@angular/language-service": "7.0.0",
+    "@schematics/angular": "^7.0.5",
     "@types/gulp": "3.8.36",
     "@types/highlight.js": "9.12.2",
     "@types/jasmine": "2.8.3",
@@ -163,4 +168,4 @@
     "uglifyjs-webpack-plugin": "1.1.5"
   },
   "schematics": "./schematics/dist/collection.json"
-}
+}

scripts/ci/travis-script.sh

@@ -51,6 +51,7 @@ elif [[ "${MODE}" =~ ^.*_(e2e)$ ]]; then
 elif [[ "${MODE}" =~ ^.*_(unit_test)$ ]]; then
   npm run ci:test
   npm install codecov -g && codecov
+  npm run test:schematics
 elif [[ "${MODE}" = docs ]]; then
   npm run ci:docs
 elif [[ "${MODE}" = deploy_dev ]]; then

scripts/gulp/tasks/inline-resources/inline-resources.ts

@@ -2,7 +2,7 @@ import { dest, src, task } from 'gulp';
 import { copyResources } from './copy-resources';
 import { BUILD_DIR, LIB_DIR } from '../config';
 
-task('inline-resources', () => {
+task('inline-resources', ['inline-schematics-resources'], () => {
   src([
     `${BUILD_DIR}/**/*.html`,
     `${BUILD_DIR}/**/*.css`,
@@ -14,3 +14,10 @@ task('inline-resources', () => {
     .pipe(dest(LIB_DIR))
     .on('end', () => copyResources(LIB_DIR));
 });
+
+task('inline-schematics-resources', () => {
+  src([
+    `./src/framework/**/schematics/**/*.json`,
+    `./src/framework/**/package.json`,
+  ]).pipe(dest(LIB_DIR));
+});

src/framework/auth/package.json

@@ -35,4 +35,4 @@
     "@nebular/theme": "2.0.2",
     "rxjs": "^6.3.0"
   }
-}
+}

src/framework/theme/package.json

@@ -34,5 +34,6 @@
   },
   "dependencies": {
     "intersection-observer": "0.5.0"
-  }
-}
+  },
+  "schematics": "./schematics/collection.json"
+}

src/framework/theme/schematics/collection.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds Nebular Theme to the application.",
+      "factory": "./ng-add/index",
+      "schema": "./ng-add/schema.json"
+    },
+    "setup": {
+      "description": "Sets up the specified project after the ng-add dependencies have been installed.",
+      "private": true,
+      "factory": "./ng-add/setup",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}