Docs v1.6.0  /  Angular HTML5 Vue.js React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack

OTHER

Settings panel Layout helpers

Official Angular upgrade guides:
https://update.angular.io/?l=3&v=9.0-10.0
https://update.angular.io/?l=3&v=10.0-11.0

1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

2. Remove the next files and directories:

   src/vendor/libs/ng2-archwizard/
   src/vendor/libs/ng2-dragula/
   src/vendor/libs/ng2-smart-table/

3. Copy new files and directories:

   src/vendor/libs/angular-archwizard/

4. Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:

   src/vendor/styles/*.scss
   src/vendor/styles/rtl/*.scss

5. Copy with replace changed files and directories:

   .gitignore
   tslint.json
   src/app/layout/layout.service.ts
   src/app/layout/layout-1/
   src/app/layout/layout-1-flex/
   src/app/layout/layout-2/
   src/app/layout/layout-2-flex/
   src/app/layout/layout-horizontal-sidenav/
   src/app/layout/layout-without-navbar/
   src/app/layout/layout-without-navbar-flex/
   src/app/layout/layout-without-sidenav/
   src/assets/vendor/fonts/
   src/assets/vendor/js/
   src/vendor/libs/angular-calendar/
   src/vendor/libs/hover-dropdown/
   src/vendor/libs/mega-dropdown/
   src/vendor/libs/ng-select/
   src/vendor/libs/ng2-nouislider/
   src/vendor/libs/ngx-color-picker/
   src/vendor/libs/ngx-plyr/
   src/vendor/libs/quill/
   src/vendor/libs/sidenav/
   src/vendor/libs/theme-settings/
   src/vendor/styles/_theme/_libs.scss
   src/vendor/styles/_uikit/
   src/vendor/styles/_appwork/

6. Update:

   angular.json. Diff

   package.json. Diff

   tsconfig.json. Diff

   tsconfig.app.json. Diff

   src/polyfills.ts. Diff

   src/app/app.component.ts. Diff

   src/app/app.service.ts. Diff

   src/app/layout/layout-footer/layout-footer.component.ts. Diff

   src/app/layout/layout-navbar/layout-navbar.component.ts. Diff

   src/app/layout/layout-sidenav/layout-sidenav.component.ts. Diff

7. Changes in testing environment:

   karma.conf.js. Diff

   e2e/protractor.conf.js. Diff

   e2e/tsconfig.json. Diff

   e2e/src/app.e2e-spec.ts. Diff

   e2e/src/app.po.ts. Diff

   src/app/home/home.component.spec.ts. Diff

8. If you're using multi-theming setup (with ThemeSettings plugin enabled), you need to update your angular.json. Use Starter template generator.

9. Important note. Starting from version 1.6.0, Angular version will use Angular Ivy and Typescript's strict mode by default. After the update your code will not compile and you will need to fix all linting and compilation errors.

   If you have any troubles with upgrading your code, first of all, please inspect code examples in angular-demo/src/app/+complete-ui/ and angular-demo/src/app/+pages/.

   Here are some required changes:

   • All methods and functions must have a returning type:

     Before

     method() {
       return 'Some value';
     }

     After

     method(): string {
       return 'Some value';
     }

   • All non-optional function arguments must have explicitly defined types:

     Before

     const concat = (start, end): string => start + end;

     After

     const concat = (start: string, end: string): string => start + end;

   • All variables and class parameters with complex values (such as objects) must have a type:

     Before

     options1 = {
       fullWidth: true
     };

     After

     options1: ILineChartOptions = {
       fullWidth: true
     };

   • All class parameters must be initialized when defined or in the constructor:

     Before

     class SomeComponent implements AfterViewInit {
       param1: number[];
       param2: number[];
       param3: number[];
     
       ngAfterViewInit() {
         this.param1 = [1, 2, 3];
         this.param2 = [4, 5, 6];
         this.param3 = [7, 8, 9];
       }
     }

     After

     class SomeComponent implements AfterViewInit {
       param1: number[] = [];
       param2: number[];
       param3?: number[]; // or param3: number[] | null = null
     
       constructor() {
         this.param2 = [];
       }
     
       ngAfterViewInit() {
         this.param1 = [1, 2, 3];
         this.param2 = [4, 5, 6];
         this.param3 = [7, 8, 9];
       }
     }

   • All in-template components must accept properly typed values:

     Before

     <textarea class="form-control" autosize rows="3"></textarea>
     
     <ngx-trend
       autoDraw="true"
       autoDrawDuration="3000"
       smooth="true"
       radius="10"
       strokeWidth="2"></ngx-trend>

     After

     <textarea class="form-control" autosize [rows]="3"></textarea>
     
     <ngx-trend
       [autoDraw]="true"
       [autoDrawDuration]="3000"
       [smooth]="true"
       [radius]="10"
       [strokeWidth]="2"></ngx-trend>

   If you don't need Angular Ivy or Typescript's strict mode, you can disable it via tsconfig.json:

   {
           "compileOnSave": false,
           "compilerOptions": {
             ...
             "strict": false,
             "forceConsistentCasingInFileNames": false,
             "noImplicitReturns": false,
             "noFallthroughCasesInSwitch": false,
             ...
           },
           "angularCompilerOptions": {
             ...
             "strictInputAccessModifiers": false,
             "strictTemplates": false,
             "enableIvy": false
           }
         }
         

10. Remove node_modules directory and package-lock.json. Then execute npm install

11. Fix linting and compilation errors.

Changes in third-party components:

• ng2-smart-table package is removed, use @swimlane/ngx-datatable as an alternative.
  Do not forget to remove the module imports and package-related code.

• ng2-completer package is removed, use ng-select as an alternative.
  Do not forget to remove the module imports and package-related code.

• ng2-dragula package is removed, use ngx-sortablejs as an alternative.
  Do not forget to remove the module imports and package-related code:

  src/app/app.module.ts

  ...
  - import { DragulaModule } from 'ng2-dragula';
  ...
  
  @NgModule({
    ...
    imports: [
      ...
  -     DragulaModule.forRoot(),
      ...
    ],
    ...
  })

• ng2-password-strength-bar package is removed. Do not forget to remove the module imports and package-related code.

• ng2-archwizard package is replaced with angular-archwizard (https://github.com/madoar/angular-archwizard). See angular-demo/src/app/+forms/angular-archwizard as an example.

  module

  ...
  - import { ArchwizardModule } from 'ng2-archwizard';
  + import { ArchwizardModule } from 'angular-archwizard';
  ...

  ng2-archwizard.component.ts → angular-archwizard.component.ts. Diff

  ng2-archwizard.component.html → angular-archwizard.component.html. Diff

• @agm package is replaced with @angular/google-maps (https://github.com/angular/components/tree/master/src/google-maps). See angular-demo/src/app/+complete-ui/cui-angular-google-maps/ as an example.
  Do not forget to remove the module imports and package-related code:

  src/app/app.module.ts

  ...
  - import { AgmCoreModule } from '@agm/core';
  ...
  
  @NgModule({
    ...
    imports: [
      ...
  -     AgmCoreModule.forRoot({
  -       /* NOTE: When using Google Maps on your own site you MUST get your own API key:
  -                https://developers.google.com/maps/documentation/javascript/get-api-key
  -                After you got the key paste it in the URL below. */
  -       apiKey: 'XXXXXXXXXX'
  -     }),
      ...
    ],
    ...
  })

  Then load Google Maps script in the head block of your src/index.html:

  src/index.html

  <head>
    ...
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  </head>

• ngx-sweetalert2's initialization code is changed:

  src/app/app.module.ts

  /* Before: */
  export async function provideSwal() {
    return Swal.mixin({
      buttonsStyling: false,
      customClass: {
        confirmButton: 'btn btn-lg btn-primary',
        cancelButton: 'btn btn-lg btn-default'
      }
    });
  }
  
  /* After: */
  export async function provideSwal(): Promise {
    return Swal.mixin({
      buttonsStyling: false,
      customClass: {
        confirmButton: 'btn btn-lg btn-primary',
        cancelButton: 'btn btn-lg btn-default'
      }
    });
  }

• Copy with replace the next files and directories:

  src/vendor/styles/_appwork/_functions.scss
  src/vendor/libs/angular-calendar/
  src/vendor/libs/ng-select/
  src/vendor/libs/ngx-chips/
  src/vendor/libs/ngx-datatable/
  src/vendor/libs/ngx-plyr/
  src/vendor/libs/ngx-sweetalert2/

Official Angular upgrade guide: https://update.angular.io/#8.0:9.0.

1. Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

   Note: Yarn package manager is not reqired anymore.

2. Remove the next files and directories:

   src/vendor/styles/migrate/
   src/vendor/libs/plyr/

3. Copy new files and directories:

   src/vendor/styles/_custom-variables/_appwork-dark.scss
   src/vendor/styles/_custom-variables/_features.scss
   src/vendor/libs/ngx-plyr/

4. Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:

   src/vendor/styles/*.scss
   src/vendor/styles/rtl/*.scss

5. Copy with replace changed files and directories:

   tslint.json
   src/polyfills.ts
   src/test.ts
   src/app/layout/layout.service.ts
   src/assets/vendor/fonts/fontawesome/
   src/assets/vendor/fonts/fontawesome.css
   src/assets/vendor/js/
   src/vendor/styles/_appwork/
   src/vendor/styles/_theme/
   src/vendor/styles/_uikit/
   src/vendor/styles/pages/
   src/vendor/libs/angular-2-dropdown-multiselect/
   src/vendor/libs/angular-calendar/
   src/vendor/libs/angular2-ladda/
   src/vendor/libs/ng-chartist/
   src/vendor/libs/ng-select/
   src/vendor/libs/ng2-archwizard/
   src/vendor/libs/ng2-dropdown-menu/
   src/vendor/libs/ng2-nouislider/
   src/vendor/libs/ng2-smart-table/
   src/vendor/libs/ngb-datepicker/
   src/vendor/libs/ngb-timepicker/
   src/vendor/libs/ngx-chips/
   src/vendor/libs/ngx-color-picker/
   src/vendor/libs/ngx-contextmenu/
   src/vendor/libs/ngx-datatable/
   src/vendor/libs/ngx-dropzone-wrapper/
   src/vendor/libs/ngx-image-gallery/
   src/vendor/libs/ngx-markdown-editor/
   src/vendor/libs/ngx-perfect-scrollbar/
   src/vendor/libs/ngx-sweetalert2/
   src/vendor/libs/ngx-swiper-wrapper/
   src/vendor/libs/ngx-toastr/
   src/vendor/libs/quill/.scss
   src/vendor/libs/shepherd/
   src/vendor/libs/sidenav/
   src/vendor/libs/spinkit/
   src/vendor/libs/theme-settings/

6. Update:

   angular.json. Diff

   package.json. Diff

   tsconfig.app.json. Diff

   tsconfig.json. Diff

   src/styles.scss. Diff

   src/app/app.component.ts. Diff

   src/app/app.service.ts. Diff

   src/vendor/styles/_custom-variables/_libs.scss. Diff

   src/vendor/styles/_custom-variables/_pages.scss. Diff

   src/vendor/styles/_custom-variables/_uikit.scss. Diff

7. If you're using multi-theming setup (with ThemeSettings plugin enabled), you need to update your angular.json. Use Starter template generator.

8. Edit variables in the src/vendor/styles/_custom-variables/_features.scss file according your setup.

   Variable	Feature
   $enable-rtl-support	Set to true to enable RTL mode support, otherwise set to false.
   $enable-light-style	Set to true to enable light (previously default) style support, otherwise set to false.
   $enable-material-style	Set to true to enable material style support, otherwise set to false.
   $enable-dark-style	Set to true to enable dark style support, otherwise set to false.

9. Remove node_modules directory and then execute npm install

10. Fix linting errors.

• theme-default class is renamed to theme-light.

  [Before] src/index.html

  <html lang="en" class="default-style">

  [After] src/index.html

  <html lang="en" class="light-style">

• ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.

• ThemeSettingsService.setMaterial() method is removed.
  Added ThemeSettingsService.setStyle(), ThemeSettingsService.isLightStyle(), ThemeSettingsService.isMaterialStyle(), ThemeSettingsService.isDarkStyle() methods.
  See Settings panel docs.

• New style-dependent utility classes, which change its color depending on the current active style:

  • .theme-text-white - White (light or material style) / dark (dark style) text.
  • .theme-text-dark - Dark (light or material style) / white (dark style) text.
  • .theme-bg-white - White (light or material style) / dark (dark style) background.
  • .theme-bg-dark - Dark (light or material style) / white (dark style) background.
  • .theme-border-white - White (light or material style) / dark (dark style) border.
  • .theme-border-dark - Dark (light or material style) / white (dark style) border.

• If you're using splash screen, edit navigationInterceptor method in the src/app/app.component.ts:

  Before

  // Remove initial splash screen
  const splashScreen = document.querySelector('.app-splash-screen');
  if (splashScreen) {
    splashScreen['style'].opacity = 0;
    setTimeout(() => splashScreen && splashScreen.parentNode.removeChild(splashScreen), 300);
  }

  After

  // Remove initial splash screen
  const splashScreen = document.querySelector('.app-splash-screen');
  if (splashScreen) {
    (splashScreen as any).style.opacity = 0;
    setTimeout(() =>
      splashScreen && splashScreen.parentNode && splashScreen.parentNode.removeChild(splashScreen)
    , 300);
  }

Changes in third-party components:

• ng-bootstrap package has breaking changes, see:

  • angular-demo/src/app/+complete-ui/cui-navs/cui-navs.component.html

  For more info visit https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md#600-2020-02-21.

• plyr package is replaced with ngx-plyr, see https://github.com/smnbbrv/ngx-plyr.

• ng2-img-cropper package is replaced with ngx-image-cropper, see https://github.com/Mawi137/ngx-image-cropper.

• spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit.

• ng2-smart-table requires @akveo/ng2-completer package installed. Also, you will need to import Ng2CompleterModule in the module.

• angular-calendar package has breaking changes, see https://github.com/mattlewis92/angular-calendar/blob/master/CHANGELOG.md#-breaking-changes.

• SweetAlert changed its API, see angular-demo/src/app/app.module.ts. Visit https://github.com/toverux/ngx-sweetalert2 for more info.

• SweetAlert's type option is renamed to icon.

1. (Optional) Upgrade Node.js to 10.16 LTS and Yarn

2. Make the next changes related to Angular 8 upgrade:

   • Move src/browserslist to project root.
   • Move src/karma.conf.js to project root. Diff
   • Move src/tsconfig.app.json to project root. Diff
   • Move src/tsconfig.spec.json to project root. Diff
   • Rename e2e/tsconfig.e2e.json to tsconfig.json. Diff
   • Remove src/tslint.json.

3. (Optional) Copy new default "Not Found" page:

   1. Copy src/app/not-found/.
   2. Edit src/app/app.module.ts. Diff
   3. Edit src/app/app-routing.module.ts. Diff

4. Copy with replace all SCSS files within src/vendor/styles/_appwork/, src/vendor/styles/_theme/ and src/vendor/styles/pages/ directories:

   src/vendor/styles/_appwork/*.scss
   src/vendor/styles/_theme/*.scss
   src/vendor/styles/pages/*.scss

5. Copy with replace changed files and directories:

   src/vendor/libs/angular-2-dropdown-multiselect/
   src/vendor/libs/angular-calendar/
   src/vendor/libs/angular2-ladda/
   src/vendor/libs/mega-dropdown/
   src/vendor/libs/ng-chartist/
   src/vendor/libs/ng-select/
   src/vendor/libs/ng2-archwizard/
   src/vendor/libs/ng2-dropdown-menu/
   src/vendor/libs/ng2-nouislider/
   src/vendor/libs/ng2-smart-table/
   src/vendor/libs/ngb-datepicker/
   src/vendor/libs/ngb-timepicker/
   src/vendor/libs/ngx-chips/
   src/vendor/libs/ngx-color-picker/
   src/vendor/libs/ngx-contextmenu/
   src/vendor/libs/ngx-datatable/
   src/vendor/libs/ngx-dropzone-wrapper/
   src/vendor/libs/ngx-image-gallery/
   src/vendor/libs/ngx-markdown-editor/
   src/vendor/libs/ngx-perfect-scrollbar/
   src/vendor/libs/ngx-sweetalert2/
   src/vendor/libs/ngx-swiper-wrapper/
   src/vendor/libs/ngx-toastr/
   src/vendor/libs/plyr/
   src/vendor/libs/quill/
   src/vendor/libs/sidenav/
   src/vendor/libs/spinkit/
   src/vendor/libs/shepherd/
   src/assets/vendor/fonts/fontawesome/
   src/assets/vendor/fonts/fontawesome.css
   src/assets/vendor/fonts/ionicons/
   src/assets/vendor/fonts/ionicons.css
   src/assets/vendor/fonts/linearicons/
   src/assets/vendor/fonts/pe-icon-7-stroke/
   src/assets/vendor/js/layout-helpers.js
   src/assets/vendor/js/material-ripple.js
   src/assets/vendor/js/theme-settings.js
   src/app/layout/layout-1/
   src/app/layout/layout-1-flex/
   src/app/layout/layout-2/
   src/app/layout/layout-2-flex/
   src/app/layout/layout-horizontal-sidenav/
   src/app/layout/layout-without-navbar/
   src/app/layout/layout-without-navbar-flex/

6. Update:

   angular.json. Diff

   package.json. Diff

   tsconfig.json. Diff

   tslint.json. Diff

   e2e/protractor.conf.js. Diff

   src/app/app.service.ts. Diff

   src/index.html. Diff

   src/polyfills.ts. Diff

   src/app/layout/layout-footer/layout-footer.component.ts. Diff

   src/app/layout/layout-navbar/layout-navbar.component.ts. Diff

   src/app/layout/layout-sidenav/layout-sidenav.component.ts. Diff

7. Execute yarn upgrade

Some changes in Angular 8 (See full list on https://update.angular.io/#7.0:8.0):

• All @HostBinding must be public.
• All /deep/ selectors in CSS and SCSS code must be replaced with ::deep.
• All @ViewChild and @ContentChild must accept second parameter.
• Some TSLint settings were changed, so it's recommended to execute npm run lint and fix found issues.

Changes in third-party components:

• ngx-tour-ng-bootstrap removed, use shepherd.js instead. See angular-demo/src/app/+complete-ui/cui-shepherd/ for example. Also, do not forget to remove TourNgBootstrapModule imports in @NgModule definitions.
• @sweetalert2/ngx-sweetalert2 changed its API. See angular-demo/src/app/app.module.ts and angular-demo/src/app/+complete-ui/cui-ngx-sweetalert2/cui-ngx-sweetalert2.component.html. Visit https://github.com/sweetalert2/ngx-sweetalert2/releases/tag/v6.0.0 for more info.
• angular-sortablejs package renamed to ngx-sortablejs
• Directory structure of ngx-datatable package is changed, so you need to update style paths in your components. See angular-demo/src/app/+complete-ui/cui-ngx-datatable/cui-ngx-datatable.component.ts for example.

1. (Optional) Upgrade Node.js to 10.15 LTS and Yarn

2. Copy new files and directories:

   src/vendor/styles/migrate/

3. Remove excluded components:

   src/vendor/libs/autosize/

4. Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:

   src/vendor/styles/*.scss
   src/vendor/styles/rtl/*.scss

5. Copy with replace changed files and directories:

   src/assets/vendor/fonts/
   src/assets/vendor/js/
   src/vendor/styles/_appwork/
   src/vendor/styles/_theme/
   src/vendor/styles/_uikit/_social.scss
   src/vendor/styles/pages/clients.scss
   src/vendor/styles/pages/messages.scss
   src/vendor/libs/angular-calendar/
   src/vendor/libs/hover-dropdown/
   src/vendor/libs/mega-dropdown/
   src/vendor/libs/ng-select/
   src/vendor/libs/ng2-nouislider/
   src/vendor/libs/ng2-smart-table/
   src/vendor/libs/ngx-datatable/
   src/vendor/libs/ngx-markdown-editor/
   src/vendor/libs/ngx-sweetalert2/
   src/vendor/libs/ngx-swiper-wrapper/
   src/vendor/libs/plyr/
   src/vendor/libs/quill/
   src/vendor/libs/sidenav/

6. Update:

   package.json. Diff

   tsconfig.json. Diff

   src/browserslist. Diff

   src/styles.scss. Diff

   src/app/app.module.ts. Diff

7. Execute yarn upgrade

• Bootstrap CSS:

  Import migration SCSS file in src/styles.scss:

  @import '~vendor/styles/migrate/appwork-130';

  Remove this import after you correct all changed CSS classes in your HTML code.

  Changed classes:

  .font-weight-thin → .font-weight-lighter
  .text-dark → .text-body
  .bg-none → .bg-transparent
  .font-sans-serif → .text-sans-serif
  .font-serif → .text-serif
  .font-monospace → .text-monospace
  .box-shadow-none → .shadow-none
  .container-m--x → .container-m-nx
  .container-m--y → .container-m-ny
  .btn-round → .rounded-pill
  
  Negative horizontal margins:
  .m{sides}--{size} → .m{sides}-n{size}
  .m{sides}-{breakpoint}--{size} → .m{sides}-{breakpoint}-n{size}

• Components changed:

  • ng-autosize replaced with ngx-textarea-autosize. See https://github.com/evseevdev/ngx-textarea-autosize

  • ngx-toastr. See https://github.com/scttcper/ngx-toastr/releases/tag/v10.0.0 + angular-demo/src/app/app.module.ts

  • ng2-dragula. See https://github.com/valor-software/ng2-dragula + angular-demo/src/app/app.module.ts and angular-demo/src/app/+complete-ui/cui-ng2-dragula/

  • ngx-sweetalert2

    - Replace

    import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

    with

    import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

    - confirmButtonClass and cancelButtonClass options are deprecated - see angular-demo/src/app/app.module.ts and angular-demo/src/app/+complete-ui/cui-ngx-sweetalert2/

  • ng-chartist. Add h-100 class to all <x-chartist> elements

  • ng2-charts

    Replace

    import { BaseChartDirective } from 'ng2-charts/ng2-charts';

    with

    import { BaseChartDirective } from 'ng2-charts';

  • nbg-typeahead

    Replace

    import { Observable } from 'rxjs/Observable';

    with

    import { Observable } from 'rxjs';

Note: Validation icons are disabled by default. To enable it, add the next variable in the src/vendor/styles/_custom-variables/_appwork.scss and src/vendor/styles/_custom-variables/_appwork-material.scss:

$enable-validation-icons: true;