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"
+ }
+ }
+}