Open Closed

Update to ABP Suite 7.1.1 broke the UI part #4928


User avatar
0
akaziuka created
  • ABP Framework version: v7.1.1
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace: See below
  • Steps to reproduce the issue:" Perform an update from 6.0.1 to 7.1.1

We have updated ABP Suite 6.0.1 to 7.1.1 (the latest one). It seems that the backend part works fine, but the frontend got broken and shows multiple errors during the build for production (npm run build:prod)

Here's the full stack trace:

npm run build:prod

> _3M@0.0.0 build:prod
> ng build --configuration production

✔ Browser application bundle generation complete.

Warning: D:/_Sources/3Motion/_3M/angular/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.



./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
D:/_Sources/3Motion/_3M/angular/src/app/dashboard/tenant-dashboard/tenant-dashboard.component.scss:64:84: ERROR: Unterminated string token

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
D:/_Sources/3Motion/_3M/angular/src/app/dashboard/tenant-dashboard/tenant-dashboard.component.scss:64:84: ERROR: Unterminated string token

./node_modules/css-loader/dist/runtime/api.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\api.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/css-loader/dist/runtime/noSourceMaps.js - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@fortawesome/fontawesome-free/css/all.min.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@swimlane/ngx-datatable/assets/icons.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@swimlane/ngx-datatable/index.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@swimlane/ngx-datatable/themes/material.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/light.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/bootstrap-icons/font/bootstrap-icons.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./node_modules/ng-zorro-antd/tree/style/index.min.css?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
BrowserslistError: [BABEL] D:\_Sources\3Motion\_3M\angular\node_modules\css-loader\dist\runtime\noSourceMaps.js: Unknown version 112 of chrome (While processing: "base$0$0")

Please advise.


15 Answer(s)
  • User Avatar
    1
    mahmut.gundogdu created

    I would remove all node_modules, yarn.lock or package-lock.json and .angular . rm -rf node_modules yarn.lock package-lock.json .angular then run yarn install it seem scss preo-processor doesn't work. I would check the breaking changes and theme configuration docs https://docs.abp.io/en/abp/latest/Migration-Guides/Index

    https://github.com/abpframework/abp/blob/rel-6.0/docs/en/UI/Angular/Theme-Configurations.md

  • User Avatar
    0
    akaziuka created

    It helped. Thanks.

  • User Avatar
    0
    akaziuka created

    I have to reopen. It seems to be the solution is building now just fine. However, an attempt to login results in an HTTP 400 error message (see the screenshot attached). It's also not clear why the page got redirected to 'https://localhost:44354/', which is the API backend. What could be wrong?

  • User Avatar
    0
    mahmut.gundogdu created

    to 'https://localhost:44354/',

    that issue related with Auth server. I've forwarded my team mate. he has better knowledge in Auth server I am just writing Frontend.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    However, an attempt to login results in an HTTP 400 error message (see the screenshot attached

    hi

    Please share the full logs of backend app. Thanks

  • User Avatar
    0
    akaziuka created

    However, an attempt to login results in an HTTP 400 error message (see the screenshot attached

    hi

    Please share the full logs of backend app. Thanks

    Here's the log from the running container (Web API) when the error occurs, as well as the log from the app's Log directory: https://1drv.ms/f/s!AtmlF7r3uFNtj7JwiEaFzXQsr09StA?e=pfZkqt

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Client validation failed because 'http://localhost:4200' was not a valid redirect_uri for _3M_App.

    The request URI matched a server endpoint: Authorization.
    The authorization request was successfully extracted: {
      "response_type": "code",
      "client_id": "_3M_App",
      "state": "aGJOeWhrUXZqN3pXYTFrcVRYRWpydzRwcW02WkdhUlJSaVlOdThOUjRsbUMy",
      "redirect_uri": "http://localhost:4200",
      "scope": "offline_access openid profile email phone _3M",
      "code_challenge": "7dohmnVI2zU2qvJ6W0o2crV-UUr-EXRPil8l3_HJoYw",
      "code_challenge_method": "S256",
      "nonce": "aGJOeWhrUXZqN3pXYTFrcVRYRWpydzRwcW02WkdhUlJSaVlOdThOUjRsbUMy",
      "culture": "en",
      "ui-culture": "en"
    }.
    Client validation failed because 'http://localhost:4200' was not a valid redirect_uri for _3M_App.
    The authorization request was rejected because the redirect_uri was invalid: 'http://localhost:4200'.
    
  • User Avatar
    0
    akaziuka created

    hi

    Client validation failed because 'http://localhost:4200' was not a valid redirect_uri for _3M_App.

    The request URI matched a server endpoint: Authorization. 
    The authorization request was successfully extracted: { 
      "response_type": "code", 
      "client_id": "_3M_App", 
      "state": "aGJOeWhrUXZqN3pXYTFrcVRYRWpydzRwcW02WkdhUlJSaVlOdThOUjRsbUMy", 
      "redirect_uri": "http://localhost:4200", 
      "scope": "offline_access openid profile email phone _3M", 
      "code_challenge": "7dohmnVI2zU2qvJ6W0o2crV-UUr-EXRPil8l3_HJoYw", 
      "code_challenge_method": "S256", 
      "nonce": "aGJOeWhrUXZqN3pXYTFrcVRYRWpydzRwcW02WkdhUlJSaVlOdThOUjRsbUMy", 
      "culture": "en", 
      "ui-culture": "en" 
    }. 
    Client validation failed because 'http://localhost:4200' was not a valid redirect_uri for _3M_App. 
    The authorization request was rejected because the redirect_uri was invalid: 'http://localhost:4200'. 
    

    I see that. What's the valid redirect URL, then? How did it get mangled after the update?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can create a new project.

    Theappsettings.json of DbMigrator

    You can also update the application on the web page.

  • User Avatar
    0
    akaziuka created

    hi

    You can create a new project.

    Theappsettings.json of DbMigrator

    Hi. I did not change those parameters. It's not very clear why it stopped working. Could you take a look? deleted

    Also, what web page are you referring to? Is it the ABP Suite interface? I had never seen a screen like that before.

  • User Avatar
    1
    maliming created
    Support Team Fullstack Developer

    hi

    Please check the consoleAndAngularClientRootUrl, There is no BookStore_App in your appsettings.

  • User Avatar
    0
    akaziuka created

    hi

    Please check the consoleAndAngularClientRootUrl, There is no BookStore_App in your appsettings.

    That worked. I have fixed that part, rebuilt the solution and was able to login. At the same time, I see a large number of console errors (see the screenshot below). Could you suggest what might be the reason?

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Are there any error logs on the backend app?

  • User Avatar
    0
    akaziuka created

    hi

    Are there any error logs on the backend app?

    The only error message I see in the backend is this: 2023-04-26 21:56:31 [01:56:31 INF] OpenIddict.Validation.AspNetCore was not authenticated. Failure message: An error occurred while authenticating the current request.

    See more in the full log: https://1drv.ms/t/s!AtmlF7r3uFNtj7J8AlcWTvdp4Fp6aQ?e=VwBs9t

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    There was a new key created. so user was not authenticated.

    Creating key {f5ac6d1c-79bb-4f8d-a633-ed8ec15f44e2} with creation date 2023-04-27 01:56:19Z, activation date 2023-04-27 01:56:19Z, and expiration date 2023-07-26 01:56:19Z.
    No XML encryptor configured. Key {f5ac6d1c-79bb-4f8d-a633-ed8ec15f44e2} may be persisted to storage in unencrypted form.
    
    Identity.Application was not authenticated. Failure message: Unprotect ticket failed
    
    CORS policy execution failed.
    Request origin https://localhost:44354 does not have permission to access the resource.
    

    Can you share your project again? include the steps to reproduce. liming.ma@volosoft.com

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11