Update to Angular 6 (#60)

jfcere · May 7, 2018 · 1908bdd · 1908bdd
1 parent 4c399fb
commit 1908bdd
Show file tree

Hide file tree

Showing 28 changed files with 3,879 additions and 2,890 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@
 /inline-template
 /package
 /tmp
+/out-tsc
 *.ngfactory.ts
 *.ngsummary.json
 *.tgz
@@ -14,13 +15,13 @@
 /node_modules
 
 # IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
 *.launch
-.settings/
 *.sublime-workspace
+.c9/
+.classpath
+.project
+.settings/
+/.idea
 
 # IDE - VSCode
 .vscode/*
@@ -32,13 +33,14 @@
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
-test-results.xml
+/coverage
 /libpeerconnection.log
+/typings
 npm-debug.log
+test-results.xml
 testem.log
-/typings
+yarn-error.log
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db
diff --git a/README.md b/README.md
@@ -1,7 +1,8 @@
 # ngx-markdown
 [![CircleCI](https://circleci.com/gh/jfcere/ngx-markdown/tree/master.svg?style=shield&)](https://circleci.com/gh/jfcere/ngx-markdown/tree/master) [![Coverage Status](https://coveralls.io/repos/github/jfcere/ngx-markdown/badge.svg?branch=master)](https://coveralls.io/github/jfcere/ngx-markdown?branch=master) [![version](https://img.shields.io/npm/v/ngx-markdown.svg?style=flat)](https://www.npmjs.com/package/ngx-markdown) [![npm](https://img.shields.io/npm/l/ngx-markdown.svg)](https://opensource.org/licenses/MIT) [![dependencies Status](https://david-dm.org/jfcere/ngx-markdown/status.svg)](https://david-dm.org/jfcere/ngx-markdown) [![peerDependencies Status](https://david-dm.org/jfcere/ngx-markdown/peer-status.svg)](https://david-dm.org/jfcere/ngx-markdown?type=peer) [![monthly Downloads](https://img.shields.io/npm/dm/ngx-markdown.svg)](https://www.npmjs.com/package/ngx-markdown)
 
-> **v1.4.0** Repository has been renamed from `ng2-markdown-to-html` to `ngx-markdown`. Follow [v1.4.0 release notes](https://github.com/jfcere/ngx-markdown/releases/tag/v1.4.0) for quick required changes.
+> **v1.6.0** Repository has been updated to **Angular 6**  and now uses `HttpClient` instead of `Http` service.  
+*Please use a previous version of the package if you are using an older version of Angular.*
 
 ngx-markdown is an [Angular 2+](https://angular.io/) library that uses [marked](https://github.com/chjj/marked) to parse markdown to html combined with [Prism.js](http://prismjs.com/) for syntax highlight.
 
@@ -30,13 +31,13 @@ To add ngx-markdown library to your `package.json` use the following command.
 npm install ngx-markdown --save
 ```
 
-As the library is using [marked](https://github.com/chjj/marked) parser you will need to add `../node_modules/marked/lib/marked.js` to your application.
+As the library is using [marked](https://github.com/chjj/marked) parser you will need to add `node_modules/marked/lib/marked.js` to your application.
 
-If you are using [Angular CLI](https://cli.angular.io/) you can follow the `.angular-cli.json` example below...
+If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...
 
 ```diff
 "scripts": [
-+ "../node_modules/marked/lib/marked.js"
++ "node_modules/marked/lib/marked.js"
 ]
 ```
 
@@ -57,17 +58,17 @@ To activate [Prism.js](http://prismjs.com/) syntax highlight you will need to in
 
 > Additional themes can be found by browsing the web such as [Prism-Themes](https://github.com/PrismJS/prism-themes) or [Mokokai](https://github.com/Ahrengot/Monokai-theme-for-Prism.js) for example.
 
-If you are using [Angular CLI](https://cli.angular.io/) you can follow the `.angular-cli.json` example below...
+If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angular.json` example below...
 
 ```diff
 "styles": [
   "styles.css",
-+ "../node_modules/prismjs/themes/prism-okaidia.css"
++ "node_modules/prismjs/themes/prism-okaidia.css"
 ],
 "scripts": [
-+ "../node_modules/prismjs/prism.js",
-+ "../node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax
-+ "../node_modules/prismjs/components/prism-css.min.js" # css language syntax
++ "node_modules/prismjs/prism.js",
++ "node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax
++ "node_modules/prismjs/components/prism-css.min.js" # css language syntax
 ]
 ```
 
@@ -175,15 +176,17 @@ export class HomeModule { }
 
 ## Usage
 
+`ngx-markdown` provides different approaches to help you parse markdown to your application depending of your needs.
+
+> As of Angular 6, the template compiler strips whitespace by default. Use `ngPreserveWhitespaces` directive to preserve whitespaces such as newlines in order for the markdown-formatted content to render as intended.  
+https://angular.io/api/core/Component#preserveWhitespaces
+
 ### Component
 
 You can use `markdown` component to either parse static markdown directly from your html markup, load the content from a remote url using `src` property or bind a variable to your component using `data` property. You can get a hook on loading error using `error` output event property.
 
 ```html
-<!-- static markdown in templates -->
-<!-- Note: as of Angular v6, the template compiler strips whitespace by default.
-     Use the ngPreserveWhitespaces directive to preserve whitespace such as newlines
-     in order for the Markdown-formatted content to render as intended. -->
+<!-- static markdown -->
 <markdown ngPreserveWhitespaces>
   # Markdown
 </markdown>
@@ -201,7 +204,7 @@ The same way the component works, you can use `markdown` directive to accomplish
 
 ```html
 <!-- static markdown -->
-<div markdown>
+<div markdown ngPreserveWhitespaces>
   # Markdown
 </div>
 

diff --git a/angular.json b/angular.json
@@ -0,0 +1,119 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-markdown": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ngx-markdown",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/app/markdown-demo/markdown",
+              "src/app/markdown-demo/remote"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/prismjs/themes/prism.css",
+              "node_modules/materialize-css/dist/css/materialize.min.css"
+            ],
+            "scripts": [
+              "node_modules/marked/lib/marked.js",
+              "node_modules/prismjs/prism.js",
+              "node_modules/prismjs/components/prism-c.min.js",
+              "node_modules/prismjs/components/prism-cpp.min.js",
+              "node_modules/prismjs/components/prism-javascript.min.js",
+              "node_modules/prismjs/components/prism-markdown.min.js",
+              "node_modules/prismjs/components/prism-python.min.js",
+              "node_modules/prismjs/components/prism-typescript.min.js",
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/materialize-css/dist/js/materialize.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ngx-markdown:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ngx-markdown:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ngx-markdown:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.scss"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ngx-markdown"
+}
diff --git a/circle.yml b/circle.yml
@@ -5,7 +5,7 @@ general:
 
 machine:
   node:
-    version: 6
+    version: 8
   environment:
     PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
 
@@ -20,7 +20,7 @@ test:
     - mkdir $CIRCLE_TEST_REPORTS/karma
     - mkdir $CIRCLE_TEST_REPORTS/lint
   override:
-    - yarn test --code-coverage --single-run --no-progress
+    - yarn test --code-coverage --no-progress
     - yarn lint --formatters-dir ./tslint-formatters --format junit -o $CIRCLE_TEST_REPORTS/lint/tslint.xml
     - yarn build --prod --aot --no-progress
   post: