feat(build): migrate to angular8 (valor-software#5245)

* feat(build): migrate to angular8

.travis.yml

@@ -17,7 +17,7 @@ env:
     - BROWSER_PROVIDER_READY_FILE=/tmp/sauce-connect-ready
     - LOGS_DIR=/tmp/logs
     - CYPRESS_RECORD_KEY=4aa7a1c0-3a4f-444e-b324-6fc305a543a8
-    - NPM_AUTH_TOKEN_CI_PR=d05d9a8c-02db-413b-a412-aa27ab527213
+    - NPM_AUTH_TOKEN_CI_PR=c687305b-fd76-4d02-9f64-8ecdbc31d9a4
 
 #     test cypress smoke
 testSmokeCy: &testSmokeCy
@@ -50,10 +50,10 @@ before_install:
 
 install:
 - npm ci
-- npm i ngx-bootstrap-ci@$TRAVIS_COMMIT
-- npm run ci:rename-pkg
 - if [[ "$NGV" == "latest" ]]; then  ./scripts/ci/npm-ng-latest.sh; fi
 - if [[ "$NGV" == "next" ]]; then  ./scripts/ci/npm-ng-next.sh; fi
+- npm i ngx-bootstrap-ci@$TRAVIS_COMMIT
+- npm run ci:rename-pkg
 - 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:

demo/src/app/app.component.ts

@@ -1,14 +1,12 @@
 import { DOCUMENT } from '@angular/common';
 import { AfterContentInit, Component, Inject } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlSerializer } from '@angular/router';
-import { PageScrollConfig, PageScrollInstance, PageScrollService } from 'ngx-page-scroll';
+import { PageScrollService } from 'ngx-page-scroll-core';
 import { isBs3 } from 'ngx-bootstrap/utils';
 
 import { Analytics } from './docs/api-docs/analytics/analytics';
 import { filter } from 'rxjs/operators';
 
-PageScrollConfig.defaultDuration = 11;
-PageScrollConfig.defaultScrollOffset = 70;
 
 @Component({
   selector: 'bs-demo',
@@ -44,11 +42,7 @@ export class AppComponent implements AfterContentInit {
 
       const hash = this.route.snapshot.fragment;
       if (hash) {
-        const pageScrollInstance: PageScrollInstance = PageScrollInstance.simpleInstance(
-          this.document,
-          `#${hash}`
-        );
-        this.pageScrollService.start(pageScrollInstance);
+        this.pageScrollService.scroll({ document: this.document, scrollTarget: `#${hash}` });
       }
     };
 

demo/src/app/app.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
+import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
 import { NgxPageScrollModule } from 'ngx-page-scroll';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -27,6 +28,7 @@ import { ThemeStorage } from './theme/theme-storage';
     FormsModule,
     HttpClientModule,
     RouterModule.forRoot(routes, { useHash: environment.useHash }),
+    NgxPageScrollCoreModule.forRoot({ duration: 11, scrollOffset: 70 }),
     NgxPageScrollModule,
     BsDropdownModule.forRoot(),
     BrowserModule.withServerTransition({ appId: 'ngx-bootstrap' })

demo/src/app/components/+accordion/accordion-section.list.ts

@@ -27,7 +27,7 @@ export const demoComponentContent: ContentSection[] = [
     anchor: 'usage',
     outlet: DemoTopSectionComponent,
     content: {
-      doc: require('!!raw-loader?lang=typescript!./docs/usage.md')
+      doc: require('!!raw-loader!./docs/usage.md')
     }
   },
   {
@@ -40,87 +40,87 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'basic-accordion',
         description: `<p>Click headers to expand/collapse content that is broken into logical sections, much
           like tabs.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
-        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
+        component: require('!!raw-loader!./demos/basic/basic'),
+        html: require('!!raw-loader!./demos/basic/basic.html'),
         outlet: DemoAccordionBasicComponent
       },
       {
         title: 'With animation',
         anchor: 'animated-accordion',
         description: `<p>Use input property or config property <code>isAnimated</code> to enable/disable animation</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/animated/animated'),
-        html: require('!!raw-loader?lang=markup!./demos/animated/animated.html'),
+        component: require('!!raw-loader!./demos/animated/animated'),
+        html: require('!!raw-loader!./demos/animated/animated.html'),
         outlet: DemoAccordionAnimatedComponent
       },
       {
         title: 'Group opening event',
         anchor: 'open-event',
         description: `<p>Accordion with <code>isOpenChange</code> event listener.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/open-event/open-event'),
-        html: require('!!raw-loader?lang=markup!./demos/open-event/open-event.html'),
+        component: require('!!raw-loader!./demos/open-event/open-event'),
+        html: require('!!raw-loader!./demos/open-event/open-event.html'),
         outlet: DemoAccordionOpenEventComponent
       },
       {
         title: 'Custom HTML',
         anchor: 'custom-html',
-        component: require('!!raw-loader?lang=typescript!./demos/custom-html/custom-html'),
-        html: require('!!raw-loader?lang=markup!./demos/custom-html/custom-html.html'),
+        component: require('!!raw-loader!./demos/custom-html/custom-html'),
+        html: require('!!raw-loader!./demos/custom-html/custom-html.html'),
         outlet: DemoAccordionCustomHTMLComponent
       },
       {
         title: 'Disabled',
         anchor: 'disabled',
-        component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled'),
-        html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.html'),
+        component: require('!!raw-loader!./demos/disabled/disabled'),
+        html: require('!!raw-loader!./demos/disabled/disabled.html'),
         outlet: DemoAccordionDisabledComponent
       },
       {
         title: 'Initially opened',
         anchor: 'opened',
-        component: require('!!raw-loader?lang=typescript!./demos/opened/opened'),
-        html: require('!!raw-loader?lang=markup!./demos/opened/opened.html'),
+        component: require('!!raw-loader!./demos/opened/opened'),
+        html: require('!!raw-loader!./demos/opened/opened.html'),
         outlet: DemoAccordionOpenedComponent
       },
       {
         title: 'Dynamic accordion',
         anchor: 'dynamic-accordion',
-        component: require('!!raw-loader?lang=typescript!./demos/dymanic/dynamic'),
-        html: require('!!raw-loader?lang=markup!./demos/dymanic/dynamic.html'),
+        component: require('!!raw-loader!./demos/dymanic/dynamic'),
+        html: require('!!raw-loader!./demos/dymanic/dynamic.html'),
         outlet: DemoAccordionDynamicComponent
       },
       {
         title: 'Dynamic body content',
         anchor: 'dynamic-body',
-        component: require('!!raw-loader?lang=typescript!./demos/dynamic-body/dynamic-body'),
-        html: require('!!raw-loader?lang=markup!./demos/dynamic-body/dynamic-body.html'),
+        component: require('!!raw-loader!./demos/dynamic-body/dynamic-body'),
+        html: require('!!raw-loader!./demos/dynamic-body/dynamic-body.html'),
         outlet: DemoAccordionDynamicBodyComponent
       },
       {
         title: 'Manual toggle',
         anchor: 'manual-toggle',
-        component: require('!!raw-loader?lang=typescript!./demos/manual-toggle/manual-toggle'),
-        html: require('!!raw-loader?lang=markup!./demos/manual-toggle/manual-toggle.html'),
+        component: require('!!raw-loader!./demos/manual-toggle/manual-toggle'),
+        html: require('!!raw-loader!./demos/manual-toggle/manual-toggle.html'),
         outlet: DemoAccordionManualToggleComponent
       },
       {
         title: 'Open only one at a time',
         anchor: 'one-time',
-        component: require('!!raw-loader?lang=typescript!./demos/one-at-a-time/one-at-a-time'),
-        html: require('!!raw-loader?lang=markup!./demos/one-at-a-time/one-at-a-time.html'),
+        component: require('!!raw-loader!./demos/one-at-a-time/one-at-a-time'),
+        html: require('!!raw-loader!./demos/one-at-a-time/one-at-a-time.html'),
         outlet: DemoAccordionOneAtATimeComponent
       },
       {
         title: 'Styling',
         anchor: 'styling',
-        component: require('!!raw-loader?lang=typescript!./demos/styling/styling'),
-        html: require('!!raw-loader?lang=markup!./demos/styling/styling.html'),
+        component: require('!!raw-loader!./demos/styling/styling'),
+        html: require('!!raw-loader!./demos/styling/styling.html'),
         outlet: DemoAccordionStylingComponent
       },
       {
         title: 'Configuring defaults',
         anchor: 'config',
-        component: require('!!raw-loader?lang=typescript!./demos/config/config'),
-        html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
+        component: require('!!raw-loader!./demos/config/config'),
+        html: require('!!raw-loader!./demos/config/config.html'),
         outlet: DemoAccordionConfigComponent
       }
     ]

demo/src/app/components/+alerts/alerts-section.list.ts

@@ -25,7 +25,7 @@ export const demoComponentContent: ContentSection[] = [
     anchor: 'usage',
     outlet: DemoTopSectionComponent,
     content: {
-      doc: require('!!raw-loader?lang=typescript!./docs/usage.md')
+      doc: require('!!raw-loader!./docs/usage.md')
     }
   },
   {
@@ -40,85 +40,85 @@ export const demoComponentContent: ContentSection[] = [
           button. For proper styling, use one of the four <strong>required</strong>
           contextual classes (e.g., <code>.alert-success</code>). For inline
           dismissal, use the <code>dismissible</code> property.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
-        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
+        component: require('!!raw-loader!./demos/basic/basic'),
+        html: require('!!raw-loader!./demos/basic/basic.html'),
         outlet: DemoAlertBasicComponent
       },
       {
         title: 'Link color',
         anchor: 'link-color',
         description: `<p>Use the <code>.alert-link</code> utility class to quickly provide matching
           colored links within any alert.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/link/link.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/link/link.html'),
+        component: require('!!raw-loader!./demos/link/link.ts'),
+        html: require('!!raw-loader!./demos/link/link.html'),
         outlet: DemoAlertLinkComponent
       },
       {
         title: 'Additional content',
         anchor: 'additional-content',
         description: `<p>Alerts can also contain additional HTML elements like headings and
           paragraphs.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/content/content.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/content/content.html'),
+        component: require('!!raw-loader!./demos/content/content.ts'),
+        html: require('!!raw-loader!./demos/content/content.html'),
         outlet: DemoAlertContentComponent
       },
       {
         title: 'Dismissing',
         anchor: 'dismissing',
         description: `<p>Alerts have <code>dismiss</code> option. Enabling it will show close button
           to the right of the alert.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/dismiss/dismiss.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/dismiss/dismiss.html'),
+        component: require('!!raw-loader!./demos/dismiss/dismiss.ts'),
+        html: require('!!raw-loader!./demos/dismiss/dismiss.html'),
         outlet: DemoAlertDismissComponent
       },
       {
         title: 'Dynamic html',
         anchor: 'dynamic-html',
         description: `<p>Sometimes you will need to show dynamically generated html in alerts, here
           is how you can make it. And don't forget to sanitize your html.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/dynamic-html/dynamic-html.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/dynamic-html/dynamic-html.html'),
+        component: require('!!raw-loader!./demos/dynamic-html/dynamic-html.ts'),
+        html: require('!!raw-loader!./demos/dynamic-html/dynamic-html.html'),
         outlet: DemoAlertDynamicHtmlComponent
       },
       {
         title: 'Dynamic content',
         anchor: 'dynamic-content',
         description: `<p>Alerts fully support bindings.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/dynamic-content/dynamic-content.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/dynamic-content/dynamic-content.html'),
+        component: require('!!raw-loader!./demos/dynamic-content/dynamic-content.ts'),
+        html: require('!!raw-loader!./demos/dynamic-content/dynamic-content.html'),
         outlet: DemoAlertDynamicContentComponent
       },
       {
         title: 'Dismiss on timeout',
         anchor: 'dismiss-on-timeout',
         description: `<p>You can simply set timeout in milliseconds to <code>dismissOnTimeout</code>
           property to create self closable alerts.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/dismiss-on-timeout/dismiss-on-timeout.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/dismiss-on-timeout/dismiss-on-timeout.html'),
+        component: require('!!raw-loader!./demos/dismiss-on-timeout/dismiss-on-timeout.ts'),
+        html: require('!!raw-loader!./demos/dismiss-on-timeout/dismiss-on-timeout.html'),
         outlet: DemoAlertTimeoutComponent
       },
       {
         title: 'Global styling',
         anchor: 'global-styling',
         description: `<p>You can add additional types of alerts globally.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/styling-global/styling-global.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/styling-global/styling-global.html'),
+        component: require('!!raw-loader!./demos/styling-global/styling-global.ts'),
+        html: require('!!raw-loader!./demos/styling-global/styling-global.html'),
         outlet: DemoAlertStylingGlobalComponent
       },
       {
         title: 'Component level styling',
         anchor: 'local-styling',
         description: `<p>You can add additional types of alerts directly to containing component</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/styling-local/styling-local.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/styling-local/styling-local.html'),
+        component: require('!!raw-loader!./demos/styling-local/styling-local.ts'),
+        html: require('!!raw-loader!./demos/styling-local/styling-local.html'),
         outlet: DemoAlertStylingLocalComponent
       },
       {
         title: 'Configuring defaults',
         anchor: 'configuration',
         description: `<p>It is possible to override default alert config partially or completely.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/config/config.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/config/config.html'),
+        component: require('!!raw-loader!./demos/config/config.ts'),
+        html: require('!!raw-loader!./demos/config/config.html'),
         outlet: DemoAlertConfigComponent
       }
     ]

demo/src/app/components/+buttons/buttons-section.list.ts

@@ -20,7 +20,7 @@ export const demoComponentContent: ContentSection[] = [
     anchor: 'usage',
     outlet: DemoTopSectionComponent,
     content: {
-      doc: require('!!raw-loader?lang=typescript!./docs/usage.md')
+      doc: require('!!raw-loader!./docs/usage.md')
     }
   },
   {
@@ -31,31 +31,31 @@ export const demoComponentContent: ContentSection[] = [
       {
         title: 'Basic',
         anchor: 'basic',
-        component: require('!!raw-loader?lang=typescript!./demos/basic/basic.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
+        component: require('!!raw-loader!./demos/basic/basic.ts'),
+        html: require('!!raw-loader!./demos/basic/basic.html'),
         outlet: DemoButtonsBasicComponent
       },
       {
         title: 'Checkbox',
         anchor: 'checkbox',
         description: `<p>Checkbox-like buttons set with variable states</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/checkbox/checkbox.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/checkbox/checkbox.html'),
+        component: require('!!raw-loader!./demos/checkbox/checkbox.ts'),
+        html: require('!!raw-loader!./demos/checkbox/checkbox.html'),
         outlet: DemoButtonsCheckboxComponent
       },
       {
         title: 'Custom checkbox value',
         anchor: 'custom-checkbox-value',
-        component: require('!!raw-loader?lang=typescript!./demos/custom-checkbox-value/custom-checkbox-value.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/custom-checkbox-value/custom-checkbox-value.html'),
+        component: require('!!raw-loader!./demos/custom-checkbox-value/custom-checkbox-value.ts'),
+        html: require('!!raw-loader!./demos/custom-checkbox-value/custom-checkbox-value.html'),
         outlet: DemoButtonsCustomCheckboxValueComponent
       },
       {
         title: 'Checkbox with Reactive Forms',
         anchor: 'checkbox-reactiveforms"',
         description: `<p>Checkbox buttons with ReactiveForms</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/checkbox-reactiveforms/checkbox-reactiveforms.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/checkbox-reactiveforms/checkbox-reactiveforms.html'),
+        component: require('!!raw-loader!./demos/checkbox-reactiveforms/checkbox-reactiveforms.ts'),
+        html: require('!!raw-loader!./demos/checkbox-reactiveforms/checkbox-reactiveforms.html'),
         outlet: DemoButtonsCheckboxReactiveFormsComponent
       },
       {
@@ -64,15 +64,15 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Radio buttons with checked/unchecked states. Group can be created in two ways: using
 <code>btnRadioGroup</code> directive or using the same <code>ngModel</code> binding with several buttons (works only for
 template driven forms). Check the demo below for more info.</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/radio/radio.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/radio/radio.html'),
+        component: require('!!raw-loader!./demos/radio/radio.ts'),
+        html: require('!!raw-loader!./demos/radio/radio.html'),
         outlet: DemoButtonsRadioComponent
       },
       {
         title: 'Uncheckable Radio',
         anchor: 'uncheckable-radio-button',
-        component: require('!!raw-loader?lang=typescript!./demos/uncheckable-radio/uncheckable-radio.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/uncheckable-radio/uncheckable-radio.html'),
+        component: require('!!raw-loader!./demos/uncheckable-radio/uncheckable-radio.ts'),
+        html: require('!!raw-loader!./demos/uncheckable-radio/uncheckable-radio.html'),
         outlet: DemoButtonsUncheckableRadioComponent
       },
       {
@@ -81,15 +81,15 @@ template driven forms). Check the demo below for more info.</p>`,
         description: `<p>Radio buttons with ReactiveForms. Example below shows how to use radio buttons with reactive
  forms. Please be aware that for reactive forms it's required to use <code>btnRadioGroup</code> directive along with
  <code>btnRadio</code>'s</p>`,
-        component: require('!!raw-loader?lang=typescript!./demos/radio-reactiveforms/radio-reactiveforms.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/radio-reactiveforms/radio-reactiveforms.html'),
+        component: require('!!raw-loader!./demos/radio-reactiveforms/radio-reactiveforms.ts'),
+        html: require('!!raw-loader!./demos/radio-reactiveforms/radio-reactiveforms.html'),
         outlet: DemoButtonsRadioReactiveFormsComponent
       },
       {
         title: 'Disabled Buttons',
         anchor: 'disabled-buttons',
-        component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.html'),
+        component: require('!!raw-loader!./demos/disabled/disabled.ts'),
+        html: require('!!raw-loader!./demos/disabled/disabled.html'),
         outlet: DemoButtonsDisabledComponent
       }
     ]