Upgraded to Angular 9 and that seems to have broken the css

[trentstollery]

Hey! This is a simple questions.. I don't think it's a bug. I've just done a upgrade to Angular 9 and now my wizard displays as a ul list. I've attached a image below and the code. I know this is most likely a implementation issue but I just wanted a little help sorting it out.

<div class="container-fluid" style="height: 100vh;">
  <div class="row">
    <div class="col-md-8 offset-md-2" style="margin-top: 5vh;" align="center">
      <aw-wizard class="bzpay-wizard" #wizard [navBarLayout]="'large-empty-symbols'">
        <aw-wizard-step [stepTitle]="'Your Details'">
          <ng-template awWizardStepSymbol>
            <i class="fas fa-user"></i>
          </ng-template>
          <app-client-details [(registration)]="registration"></app-client-details>
        </aw-wizard-step>
        <aw-wizard-step
          *ngIf="registration.role == null && !(registration.isBuyer || registration.isSupplier || registration.isIssuer)"
          [stepTitle]="'CompanyInformation Account'" style="margin-top: 5vh;" awOptionalStep>
          <ng-template awWizardStepSymbol>
            <i class="fas fa-briefcase"></i>
          </ng-template>
          <app-company-account [(registration)]="registration"></app-company-account>
        </aw-wizard-step>
        <aw-wizard-step *ngIf="registration.role == null" [stepTitle]="'CompanyInformation Details'" awOptionalStep>
          <ng-template awWizardStepSymbol>
            <i class="fas fa-briefcase"></i>
          </ng-template>
          <app-company-details [(registration)]="registration"></app-company-details>
        </aw-wizard-step>
        <aw-wizard-step
          *ngIf="this.getFromSession('token') === 'cypress'"
          [stepTitle]="'Profile Type'" awOptionalStep>
          <ng-template awWizardStepSymbol>
            <i class="fas fa-cogs"></i>
          </ng-template>
          <app-profile-type [(registration)]="registration"></app-profile-type>
        </aw-wizard-step>
        <aw-wizard-step *ngIf="registration.role == null" [stepTitle]="'Profile Details'" awOptionalStep>
          <ng-template awWizardStepSymbol>
            <i class="fas fa-briefcase"></i>
          </ng-template>
          <app-profile-details [(registration)]="registration"></app-profile-details>
        </aw-wizard-step>
        <aw-wizard-step [stepTitle]="'Finalise'">
          <ng-template awWizardStepSymbol>
            <i class="fas fa-check"></i>
          </ng-template>
          <app-finalise [(registration)]="registration"></app-finalise>
        </aw-wizard-step>
      </aw-wizard>
    </div>
  </div>
</div>

[trentstollery]

Also just to add to this, the classes for the elements seem to be appearing as objects. <aw-wizard-navigation-bar ng-reflect-direction="left-to-right" class="[object Object]"></aw-wizard-navigation-bar>

[madoar]

Which Angular version is your application using? Is it also using Angular 9?

angular-archwizard version 6.0.0 is compatible with Angular 9+. This means that the application using the library also needs to use Angular 9, otherwise you will face multiple issues. The now used class attributes instead of ngClass are one example for a breaking change. They were introduced in Angular 9, see also here and here.

[trentstollery]

Hey thanks for getting back to me, I am on 9! I've added a list of deps from my package.json below if that helps.

"dependencies": {
    "@angular/animations": "9.0.6",
    "@angular/cdk": "~9.1.2",
    "@angular/common": "9.0.6",
    "@angular/compiler": "9.0.6",
    "@angular/core": "9.0.6",
    "@angular/forms": "9.0.6",
    "@angular/platform-browser": "9.0.6",
    "@angular/platform-browser-dynamic": "9.0.6",
    "@angular/router": "9.0.6",
    "@auth0/auth0-spa-js": "1.6.4",
    "@sentry/browser": "5.14.1",
    "@types/chart.js": "2.9.15",
    "angular-archwizard": "6.0.0",
    "angular-webstorage-service": "1.0.2",
    "axios": "0.19.2",
    "bootstrap": "4.4.1",
    "chart.js": "2.9.3",
    "hammerjs": "2.0.8",
    "jquery": "3.4.1",
    "ng-uikit-pro-standard": "git+https://git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git",
    "ngx-google-places-autocomplete": "^2.0.4",
    "popper.js": "~1.16.1",
    "rxjs": "~6.5.4",
    "tslib": "1.11.1",
    "wait-on": "4.0.1",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.900.6",
    "@angular/cli": "9.0.6",
    "@angular/compiler-cli": "9.0.6",
    "@angular/language-service": "9.0.6",
    "@types/jasmine": "^3.5.9",
    "@types/jasminewd2": "^2.0.8",
    "@types/jquery": "^3.3.33",
    "@types/node": "13.9.1",
    "codelyzer": "^5.2.1",
    "cypress": "4.1.0",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "node-sass": "^4.13.1",
    "protractor": "^5.4.3",
    "ts-node": "~8.6.2",
    "tslint": "~6.1.0",
    "typescript": "3.7.5",
    "@ngtools/webpack": "9.0.6"
  }

[madoar]

From which version of angular-archwizard have you upgraded? Have you added the angular-archwizard css file to your project? Which browser are you using? Is the issue also happening on other browsers? Does the demo repository lead to the same issue for you?

Can you share a small example application that reproduces the issue so I can debug it?

[trentstollery]

Hey! Sorry for taking so long to get back to you. One of my devs is working on a test case for you. Till then we are upgrading to from angular-archwizard 5.0.0. We have found what the issue is but have yet to find the cause. For some reason when we run the website the element aw-wizard-navigation-bar has no css classes and just [object Object]. It looks like a toString isn't working or something is failing when it tries to write the classes on compile. If I update the class attribute to "horizontal large-empty-symbols" it instantly fixes the problem. Any ideas on what could be causing that at all?

[madoar]

For some reason when we run the website the element aw-wizard-navigation-bar has no css classes and just [object Object]. It looks like a toString isn't working or something is failing when it tries to write the classes on compile. If I update the class attribute to "horizontal large-empty-symbols" it instantly fixes the problem. Any ideas on what could be causing that at all?

This is an interesting phenomenon. Without having a reproducible example project that can be used to reproduce and debug the issue there is not much that I can do except speculating. I can think of multiple abstract things that could go wrong:

• perhaps you are initializing the wizard strangely which leads to some values not being initialized or half initialized
• perhaps it is a bug in angular-archwizard that occurs in some situations I didn't test
• perhaps it is a bug in Angular 9
• ...

I agree that until this has been fixed it is best to continue using angular-archwizard version 5.0.0.

[madoar]

@trentstollery are there any news regarding this issue?

[hugoj-goncalves]

Same issue here. We're not using IVY yet but we did upgrade to angular 9.

[trentstollery]

Yeah weren't using IVY as well.. we were not able to fix the issue. Tried everything we could think of other than the downgrade which we know would have fixed it but I prefer to keep things up to date. We have since switched to mdbootstraps stepper... it's not as nice but it works... and we needed a release

[aphairpq2]

For us - after upgrading everything to Angular 9 - every wizard step is 'hidden' in the html:

I was not able to figure out how that was happening or what to change to fix.

[madoar]

@hugoj-goncalves do you by chance have a reproducible example application which you can share with me that reproduces the issue? During my tests I did not stumble over this issue, therefore it is really hard for me to help without any leads. :/

@trentstollery that is sad to hear. Still, in case you find any leads to the issue in the future feel free to add a comment so that I can work on fixing this.

@aphairpq2 this sounds like a different issue. Can you take a look at the internal state of the wizard instance? Maybe something went wrong during the initialization of the wizard. Again it would be helpful to have a small application that reproduces your issue.

[hugoj-goncalves]

@madoar https://stackblitz.com/edit/angular9-archwizard-css Is that enough? Changing package.json to 5.0.0 is enough to fix the layout. Enabling IVY made no difference.

[madoar]

@hugoj-goncalves what browser are you using?

I tried on both Firefox and Chromium. To me it seems like in both browsers the wizard is working as I would expect it to:

Firefox

Chromium

[hugoj-goncalves]

@madoar make sure stackblitz loads version 6.0.0 just had some weird caching issues with it now

EDIT: Using google-chrome 80.0.3987.162 btw EDIT2:

[madoar]

Ok when I change the angular-archwizard dependency to ~6.0.0 I can reproduce the described issue. What is interesting is that when I look at the console log in Chromium I see the following entry:

WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).    style_sanitizer.ts:99

Maybe that is an indicator to the issue?

I think I will have some time over the next days to look at this issue more in-depth. If you have any ideas feel free to add a comment :)

[hugoj-goncalves]

Cool to have a working repro, but I can't look at it atm. Will do if I find some spare time.

I think so, cuz all classes are [object Object] on version 6, but on version 5 they were resolved to strings even tough the ngClass was a object

[madoar]

Out of interest: have you tried the official demo at https://madoar.github.io/angular-archwizard-demo/? Strangely it does not lead to the issue while it is also using Angular 9 + angular-archwizard version 6.0.0. Something must be different between both projects...

[hugoj-goncalves]

@madoar https://stackblitz.com/edit/angular-archwizard-demo Made a pull from the demo depo to stackblitz and the issue is definitely there also. Running the demo locally worked fine tough 🥔 😕

Oh... it is IVY related. Stackblitz uses a separated config for enabling IVY. Demo works fine with IVY enabled. Yesterday's repro also works fine with IVY enabled.

EDIT: Btw, libs projects shouldn't come with IVY enabled. https://angular.io/guide/ivy#maintaining-library-compatibility https://gist.github.com/LayZeeDK/61caba93df1ec1a0788c94a973c8dfac

[madoar]

@hugoj-goncalves in the production build, i.e. the one I release on npm, Ivy should be deactivated:

https://github.com/madoar/angular-archwizard/blob/41ea8f2e51d85343f376f680fe3e16b99741f64d/tsconfig.lib.json#L26

Somehow it seems like this config is either not applied during the release build (i.e. npm run build) or something with enableIvy = false is also bugged.

[madoar]

I have just opened a new Issue in the official Angular repository. Maybe the people there can shed some additional light on this issue

[hugoj-goncalves]

@madoar yeah, I saw that it was deactivated after I commented. It indeed is deactivated on the tsconfig.lib.json. But the tests were running only for IVY enabled. The change from ngClass to class seems to be a breaking change introduced in IVY. class doesn't work with objects without IVY

I reverted the changes necessary here and made the tests run with and without IVY.

[rodrigocprates]

I'm still getting this "[object Object]" bound to class on html. I imported it as a module and also imported the scss on my styles.

Any clue?

Screenshot:

My dependencies: "dependencies": { "@angular/common": "9.0.4", "@angular/compiler": "9.0.4", "@angular/core": "9.0.4", "@angular/forms": "9.0.4", "@angular/localize": "9.0.4", "@angular/platform-browser": "9.0.4", "@angular/platform-browser-dynamic": "9.0.4", "@angular/router": "9.0.4", "@fortawesome/angular-fontawesome": "0.6.0", "@fortawesome/fontawesome-svg-core": "1.2.26", "@fortawesome/free-solid-svg-icons": "5.12.0", "@ng-bootstrap/ng-bootstrap": "6.0.0", "@ngx-translate/core": "11.0.1", "@ngx-translate/http-loader": "4.0.0", "@types/video.js": "^7.3.7", "angular-archwizard": "^6.1.0", "bootstrap": "4.4.1", "bootswatch": "4.4.1", "moment": "2.24.0", "ng-jhipster": "0.12.0", "ngx-cookie": "4.0.2", "ngx-infinite-scroll": "8.0.1", "ngx-webstorage": "5.0.0", "rxjs": "6.5.3", "swagger-ui-dist": "3.24.3", "tslib": "1.10.0", "videojs-record": "^3.11.0", "zone.js": "0.10.2" }, "devDependencies": { "@angular/cli": "9.0.4", "@angular/compiler-cli": "9.0.4", "@ngtools/webpack": "9.0.4", "@openapitools/openapi-generator-cli": "1.0.10-4.2.3", "@types/jest": "24.0.23", "@types/node": "12.12.17", "@typescript-eslint/eslint-plugin": "2.11.0", "@typescript-eslint/eslint-plugin-tslint": "2.11.0", "@typescript-eslint/parser": "2.11.0", "autoprefixer": "9.7.3", "base-href-webpack-plugin": "2.0.0", "browser-sync": "2.26.7", "browser-sync-webpack-plugin": "2.2.2", "codelyzer": "5.2.0", "copy-webpack-plugin": "5.1.1", "css-loader": "3.3.2", "eslint": "6.7.2", "eslint-config-jhipster": "0.0.1", "eslint-config-prettier": "6.7.0", "eslint-loader": "3.0.3", "file-loader": "5.0.2", "friendly-errors-webpack-plugin": "1.7.0", "generator-jhipster": "6.8.0", "html-loader": "0.5.5", "html-webpack-plugin": "3.2.0", "husky": "3.1.0", "jest": "24.9.0", "jest-date-mock": "1.0.7", "jest-junit": "10.0.0", "jest-preset-angular": "8.0.0", "jest-sonar-reporter": "2.0.0", "lint-staged": "8.2.1", "mini-css-extract-plugin": "0.8.0", "moment-locales-webpack-plugin": "1.1.2", "optimize-css-assets-webpack-plugin": "5.0.3", "postcss-loader": "3.0.0", "prettier": "1.19.1", "raw-loader": "^4.0.0", "reflect-metadata": "0.1.13", "rimraf": "3.0.0", "sass": "1.23.7", "sass-loader": "8.0.0", "simple-progress-webpack-plugin": "1.1.2", "style-loader": "1.0.1", "terser-webpack-plugin": "2.3.0", "thread-loader": "2.1.3", "to-string-loader": "1.1.6", "ts-loader": "6.2.1", "tslint": "6.0.0", "typescript": "3.7.5", "webpack": "4.41.2", "webpack-bundle-analyzer": "3.6.0", "webpack-cli": "3.3.10", "webpack-dev-server": "3.9.0", "webpack-merge": "4.2.2", "webpack-notifier": "1.8.0", "workbox-webpack-plugin": "4.3.1", "write-file-webpack-plugin": "4.5.1" }

[madoar]

@rodrigocprates can you please provide an example project that produces the issue for you?