feat(doc): enable ivy (#5285)

* feat(doc): enable ivy engine for demo

.travis.yml

@@ -58,6 +58,7 @@ install:
 - if [[ "$NGV" == "next" ]]; then  ./scripts/ci/npm-ng-next.sh; fi
 - npm i ngx-bootstrap-ci@$TRAVIS_COMMIT
 - npm run ci:rename-pkg
+- if [[ "$NGV" == "ivy" ]]; then  scripts/ivy/compiler-cli-fix.sh; fi
 - if [[ "$TRAVIS_PULL_REQUEST" != false ]]; then export SAUCE_USERNAME=$SAUCE_USERNAME_PR; export SAUCE_ACCESS_KEY=$SAUCE_ACCESS_KEY_PR; export NPM_AUTH_TOKEN_CI=$NPM_AUTH_TOKEN_CI_PR; fi
 
 jobs:
@@ -102,6 +103,9 @@ jobs:
   - script: npm run test-coverage
     name: "Test with current Angular version"
     after_success: ./node_modules/.bin/codecov
+  - script: ng test --configuration ivy && tsc -p schematics/tsconfig.json && npm run test:schematics
+    name: "Test with current Angular version Ivy:enabled"
+    env: NGV=ivy
   - script: ng test && tsc -p schematics/tsconfig.json && npm run test:schematics
     name: "Test with latest Angular version"
     env: NGV=latest
@@ -116,6 +120,9 @@ jobs:
     <<: *testSmokeCy
   - script: npm run demo.ng-build
     name: "Check prod build with current Angular version"
+  - script: npm run demo.ng-build:ivy
+    name: "Check prod build with current version Ivy:enabled"
+    env: NGV=ivy
   - script: npm run demo.ng-build
     name: "Check prod build with latest Angular version"
     env: NGV=latest
@@ -145,6 +152,15 @@ jobs:
       project: ./gh-pages/
       domain: ngx-bootstrap.surge.sh
       on: development
+  - <<: *surge
+    env: NGV=ivy
+    script: npm run demo.ng-build:ivy
+    before_deploy:
+    - cd ./demo/dist/browser
+    deploy:
+      provider: surge
+      domain: ngx-bootstrap-ivy.surge.sh
+      on: development
   - <<: *surge
     env: NGV=latest
     deploy:

angular.json

@@ -15,6 +15,7 @@
             "index": "demo/src/index.html",
             "main": "demo/src/main.ts",
             "tsConfig": "demo/src/tsconfig.json",
+            "aot": true,
             "polyfills": "demo/src/polyfills.ts",
             "assets": [
               "demo/src/assets"
@@ -45,6 +46,25 @@
                 }
               ]
             },
+            "ivy": {
+              "preserveSymlinks": true,
+              "optimization": true,
+              "outputHashing": "all",
+              "tsConfig": "demo/src/tsconfig-ivy.json",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": true,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": true,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "demo/src/environments/environment.ts",
+                  "with": "demo/src/environments/environment.prod.ts"
+                }
+              ]
+            },
             "server": {
               "preserveSymlinks": true,
               "optimization": true,
@@ -76,6 +96,9 @@
             },
             "server": {
               "browserTarget": "ngx-bootstrap:build:server"
+            },
+            "ivy": {
+              "browserTarget": "ngx-bootstrap:build:ivy"
             }
           }
         },
@@ -103,6 +126,11 @@
             "assets": [
               "demo/src/assets"
             ]
+          },
+          "configurations": {
+            "ivy": {
+              "tsConfig": "src/tsconfig-ivy.spec.json"
+            }
           }
         },
         "lint": {

demo/src/app/common/sidebar/sidebar.component.ts

@@ -1,5 +1,5 @@
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Component, Inject, OnDestroy, Renderer } from '@angular/core';
+import { Component, Inject, OnDestroy, Renderer2 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 import { isBs3, setTheme } from 'ngx-bootstrap/utils';
@@ -31,7 +31,7 @@ export class SidebarComponent implements OnDestroy {
 
   constructor(
     private activatedRoute: ActivatedRoute,
-    private renderer: Renderer,
+    private renderer: Renderer2,
     private router: Router,
     private themeStorage: ThemeStorage,
     public styleManager: StyleManager,
@@ -56,10 +56,16 @@ export class SidebarComponent implements OnDestroy {
   toggle(isShown?: boolean): void {
     this.isShown = typeof isShown === 'undefined' ? !this.isShown : isShown;
     if (this.document && this.document.body) {
-      this.renderer.setElementClass(this.document.body, 'isOpenMenu', this.isShown);
+
+      if (this.isShown) {
+        this.renderer.addClass(this.document.body, 'isOpenMenu');
+      } else {
+        this.renderer.removeClass(this.document.body, 'isOpenMenu');
+      }
+
       if (this.isShown === false && this.document.documentElement) {
-        this.renderer.setElementProperty(this.document.documentElement, 'scrollTop', 0);
-        this.renderer.setElementProperty(this.document.body, 'scrollTop', 0);
+        this.renderer.setProperty(this.document.documentElement, 'scrollTop', '0');
+        this.renderer.setProperty(this.document.body, 'scrollTop', '0');
       }
     }
   }

demo/src/app/docs/api-docs/api-doc-class/api-doc-class.component.html

@@ -3,7 +3,7 @@ <h3 [attr.id]="headerAnchor">
     <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}"
        target="_blank" rel="noopener">{{apiDocs.className}}</a>
   </h3>
-  <p [innerHtml]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs.description"></p>
 
   <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
@@ -17,7 +17,7 @@ <h3>Properties</h3>
             <ng-template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
             </ng-template>
-            <div><span [innerHtml]="prop.description"></span></div>
+            <div><span [innerHTML]="prop.description"></span></div>
           </td>
         </tr>
         </tbody>
@@ -36,7 +36,7 @@ <h3 id="methods">Methods</h3>
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>
             </div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
-            <div><span [innerHtml]="method.description"></span></div>
+            <div><span [innerHTML]="method.description"></span></div>
           </td>
         </tr>
         </tbody>

demo/src/app/docs/api-docs/api-doc-config/api-doc-config.component.html

@@ -3,7 +3,7 @@ <h3 [attr.id]="headerAnchor">
     <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs.fileName }}"
        target="_blank" rel="noopener">{{ apiDocs.className }}</a>
   </h3>
-  <p [innerHtml]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs.description"></p>
 
   <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
     <section>
@@ -17,7 +17,7 @@ <h3>Properties</h3>
             <ng-template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{ prop.defaultValue || '-'}}</code></div>
             </ng-template>
-            <div [innerHtml]="prop.description"></div>
+            <div [innerHTML]="prop.description"></div>
           </td>
         </tr>
         </tbody>

demo/src/app/docs/api-docs/api-doc/api-doc.component.html

@@ -3,7 +3,7 @@ <h3 [attr.id]="headerAnchor">
     <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs.fileName }}"
        target="_blank" rel="noopener">{{ apiDocs.className }}</a>
   </h3>
-  <p [innerHtml]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs.description"></p>
 
   <div class="table-responsive">
     <table class="table table-bordered">
@@ -36,7 +36,7 @@ <h3>Inputs</h3>
                   <span *ngIf="hasConfigProperty(input)">&mdash; initialized from {{ configServiceName }} service</span>
                 </div>
               </ng-template>
-              <div [innerHtml]="input.description"></div>
+              <div [innerHTML]="input.description"></div>
             </td>
           </tr>
           </tbody>
@@ -53,7 +53,7 @@ <h3 id="outputs">Outputs</h3>
           <tbody>
           <tr *ngFor="let output of apiDocs.outputs">
             <td class="col-xs-3"><code>{{ output.name }}</code></td>
-            <td class="col-xs-9"><div [innerHtml]="output.description"></div></td>
+            <td class="col-xs-9"><div [innerHTML]="output.description"></div></td>
           </tr>
           </tbody>
         </table>
@@ -72,7 +72,7 @@ <h3 id="methods">Methods</h3>
             <td class="col-xs-9">
               <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
               <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
-              <div [innerHtml]="method.description"></div>
+              <div [innerHTML]="method.description"></div>
             </td>
           </tr>
           </tbody>

demo/src/tsconfig-ivy.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "angularCompilerOptions": {
+    "enableIvy": true
+  }
+}

package.json

@@ -9,6 +9,7 @@
     "demo.fetch": "node scripts/fetch-docs.js",
     "demo.archive": "node scripts/archive.js",
     "demo.ng-build": "ng build --prod",
+    "demo.ng-build:ivy": "ng build --configuration ivy",
     "demo.set-version": "run-s demo.fetch demo.archive",
     "demo.deploy-gh-pages": "gh-pages -d gh-pages",
     "demo.build": "run-s build demo.gen-docs demo.ng-build demo.set-version",
@@ -22,16 +23,20 @@
     "disable-lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\" -e \"scripts/docs/**\"",
     "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
     "flow.github-release": "conventional-github-releaser -p angular",
-    "build": "run-s build.modules build:schematics build.sass",
+    "build": "run-s build.modules build:schematics build.sass dist-to-modules compiler-cli:fix",
+    "compiler-cli:fix": "scripts/ivy/compiler-cli-fix.sh",
+    "dist-to-modules": "cp -r -T ./dist ./node_modules/ngx-bootstrap",
     "build.watch": "node scripts/build-modules --watch",
     "build:schematics": "node scripts/schematics/build",
     "build.modules": "node scripts/build-modules",
     "ci:update-pkg": "node scripts/ci/update-pkg.js",
     "ci:rename-pkg": "mv node_modules/ngx-bootstrap-ci node_modules/ngx-bootstrap",
     "build.sass": "node-sass --recursive src --output dist --source-map true --source-map-contents sass",
     "start": "ng serve --aot --host 0.0.0.0",
+    "start:ivy": "ng serve --configuration ivy --host 0.0.0.0",
     "pretest": "run-s lint build",
     "test": "ng test && npm run test:schematics",
+    "test:ivy": "ng test --configuration ivy && npm run test:schematics",
     "test:schematics": "jasmine schematics/src/**/*.spec.js",
     "test-cross": "SAUCE=true ng test",
     "test-coverage": "ng test --code-coverage",
@@ -47,8 +52,10 @@
     "cy:run:snapshot": "APPLITOOLS_CONCURRENCY=100 cypress run --config integrationFolder=cypress/snapshot",
     "view-stats": "webpack-bundle-analyzer demo/dist/stats.json",
     "build:ssr": "run-s build build:client-and-server-bundles webpack:server configure-heroku",
+    "build:ssr:ivy": "run-s build build:client-and-server-bundles:ivy webpack:server configure-heroku",
     "serve:ssr": "node demo/dist/server",
     "build:client-and-server-bundles": "ng build --prod && ng run ngx-bootstrap:server",
+    "build:client-and-server-bundles:ivy": "npm run demo.ng-build:ivy && ng run ngx-bootstrap:server",
     "webpack:server": "webpack --config ./scripts/universal/webpack.server.config.js --progress --colors",
     "configure-heroku": "node scripts/universal/configure-heroku.js"
   },
@@ -93,7 +100,6 @@
     "@angular/compiler-cli": "8.0.0",
     "@angular/core": "8.0.0",
     "@angular/forms": "8.0.0",
-    "@angular/http": "7.2.15",
     "@angular/language-service": "8.0.0",
     "@angular/platform-browser": "8.0.0",
     "@angular/platform-browser-dynamic": "8.0.0",

scripts/build-modules.js

@@ -27,7 +27,7 @@ async function buildAll() {
   await execa.shell(`json -I -f ${dist}/package.json -e 'this.schematics="./schematics/collection.json"'`);
   cpy(['*.md', 'LICENSE'], dist);
 
-  await execa.shell(`npm run link`);
+  // await execa.shell(`npm run link`);
 
   const requiredModules = ['collapse', 'chronos', 'utils', 'positioning', 'component-loader', 'dropdown', 'locale',
     'alert', 'buttons', 'carousel', 'mini-ngrx', 'modal', 'pagination', 'popover', 'progressbar', 'rating',
@@ -69,6 +69,7 @@ async function buildModules(modules) {
   for (let module of modules) {
     console.log('Building', module, 'module');
     await execa.shell(`rimraf ${dist}/${module} && node scripts/ng-packagr/api ../../src/${module}/package.json`);
+    await execa.shell(`npm run dist-to-modules`);
     console.log(`Build of ${module} module completed`);
   }
 }

scripts/ivy/compiler-cli-fix.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+# Remove when be fixed https://github.com/angular/angular/issues/22524
+
+if grep -q 'if (sf\[`redirectInfo`\]) { sf = sf\[`redirectInfo`\].redirectTarget; }' node_modules/@angular/compiler-cli/src/ngtsc/typecheck/src/context.js; then
+  echo "compiler-cli already fixed"
+else
+  sed -i '/var sf = this.transform(originalSf);/a if (sf[`redirectInfo`]) { sf = sf[`redirectInfo`].redirectTarget; }' node_modules/@angular/compiler-cli/src/ngtsc/typecheck/src/context.js
+  echo "compiler-cli fixed"
+fi

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 
 import { BsDatepickerAbstractComponent } from '../../base/bs-datepicker-container';
 import { BsDatepickerConfig } from '../../bs-datepicker.config';
@@ -19,7 +19,6 @@ import { take } from 'rxjs/operators';
   host: {
     class: 'bottom',
     '(click)': '_stopPropagation($event)',
-    style: 'position: absolute; display: block;',
     role: 'dialog',
     'aria-label': 'calendar'
   },
@@ -37,6 +36,7 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
 
   _subs: Subscription[] = [];
   constructor(
+    _renderer: Renderer2,
     private _config: BsDatepickerConfig,
     private _store: BsDatepickerStore,
     private _element: ElementRef,
@@ -46,6 +46,9 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
   ) {
     super();
     this._effects = _effects;
+
+    _renderer.setStyle(_element.nativeElement, 'display', 'block');
+    _renderer.setStyle(_element.nativeElement, 'position', 'absolute');
   }
 
   ngOnInit(): void {

src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { BsDatepickerContainerComponent } from './bs-datepicker-container.component';
 
 import { BsDatepickerConfig } from '../../bs-datepicker.config';
@@ -14,21 +14,25 @@ import { datepickerAnimation } from '../../datepicker-animations';
   providers: [BsDatepickerStore, BsDatepickerEffects],
   templateUrl: './bs-datepicker-view.html',
   host: {
-    '(click)': '_stopPropagation($event)',
-    style: 'display: inline-block;'
+    '(click)': '_stopPropagation($event)'
   },
   animations: [datepickerAnimation]
 })
 export class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponent
   implements OnInit, OnDestroy {
+
   constructor(
+    _renderer: Renderer2,
     _config: BsDatepickerConfig,
     _store: BsDatepickerStore,
     _element: ElementRef,
     _actions: BsDatepickerActions,
     _effects: BsDatepickerEffects,
     _positioningService: PositioningService
   ) {
-    super(_config, _store, _element, _actions, _effects, _positioningService);
+    super(_renderer, _config, _store, _element, _actions, _effects, _positioningService);
+
+    _renderer.setStyle(_element.nativeElement, 'display', 'inline-block');
+    _renderer.setStyle(_element.nativeElement, 'position', 'static');
   }
 }