Upgrade Issues after Applying v6.0.0 #5716

0

ismcagdas created 6 years ago

Support Team

Hi mdframe

v6 of AspNet Zeros Angular version is almost re-written using native angular approach. So, it is hard to point you to some document in this case.

We also removed JQuery dependency and it affects many parts of the app. I'm not sure if you want to dive into such a huge update.

If you really want to upgrade to v6 of AspNet Zero (Angular version), you can share the error messages you are getting and we can try to help you.

For client side errors, open your browser console and share the error messages with us.
For server side, you can check App_Data/Logs.txt file under your *.Web.Host project.

I assume you have already removed the node_modules folder in the angular folder and re-installed the npm packages using yarn command.

0

mdframe created 6 years ago

Hi ismcagdas,

Thank you for the quick response. We were just a few screens into development of our new product and decided it would be very worthwhile to upgrade at this time.

We never touch the master branch of the framework so the issues are very limited with our merge. Here are the steps we took and the methods utilized to correct the issues.

Re-generated our project on the ASPNetZero site with the current version.
Updated our master repository then merged with our branch to pull in the latest updates to both the client and server solutions. (We have separate solutions for angular and aspnet-core)
Removed the nodes_module directory from our angular folder and ran yarn to update to the latest updates.
Recompiled the API side and found that -ExcelExporter had updates to include ITempFileCacheManager so updated our modules with the new interface as below: Before

      public ProductsExcelExporter(
            ITimeZoneConverter timeZoneConverter,
            IAbpSession abpSession)
        {
            _timeZoneConverter = timeZoneConverter;
            _abpSession = abpSession;
        }

**After**

        using _CompanyName.Product_.Storage;
        
        public ProductsExcelExporter(
            ITimeZoneConverter timeZoneConverter,
            IAbpSession abpSession,
            ITempFileCacheManager tempFileCacheManager)
            : base(tempFileCacheManager)
        {
            _timeZoneConverter = timeZoneConverter;
            _abpSession = abpSession;
        }

Executed the API (Web Server) and performed a ./refresh.bat from angular/nswag to update all proxies
Performed npm start in angular and tested functionality
Found in the screens we had added that the Action button no longer functioned so went into admin Users to look at function and worked as expected. Went into source module users.component.html and compared the differences with our warehouses.component.html code and updated our code to match your updates as:

<td style="width: 130px"
                      [hidden]="!isGrantedAny('Pages.Warehouses.Edit', 'Pages.Warehouses.Delete')">
                    <div class="btn-group dropdown" dropdown container="body">
                        <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">                                                 
                            <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
                        </button>
                        <ul class="dropdown-menu" *dropdownMenu>
                                <li>
                                    <a href="javascript:;"
                                            (click)="viewWarehouseModal.show(record)">{{l('View')}}</a>
                                </li>
                                <li>
                                    <a href="javascript:;"
                                           *ngIf="permission.isGranted('Pages.Warehouses.Edit')"
                                            (click)="createOrEditWarehouseModal.show(record.warehouse.id)">{{l('Edit')}}</a>
                                </li>
                                <li>
                                    <a href="javascript:;"
                                           *ngIf="permission.isGranted('Pages.Warehouses.Delete')"
                                                (click)="deleteWarehouse(record.warehouse)">{{l('Delete')}}</a>
                                </li>
                        </ul>
            </div>
 </td>

The big items here were removing normalizedPosition and replacing with dropdown and adding the href="javascript:;" statements. 8. Updated our main.module.ts with import { BsDropdownModule } from 'ngx-bootstrap'; and then added BsDropdownModule.forRoot(), in the @NgModule imports section

At this point we believe we have rectified the challenges with a single screen so the others must be updated accordingly. At this point we can add, view, delete, and edit any of the information on this screen as before and the Action performs as expected.

We did notice in the users.component.html button input that the class dropdown-toggle was repeated as shown below. We are assuming this is not a requirement and does not need it replicated.

    <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary dropdown-toggle">

One thing we did notice that is not our code. Previously the sample Dashboards page had values that would randomly populate to show graphs and data, now all of them just show "No data" as a message.

If you feel other steps are required or items should be checked please let me know. I posted all of this here in hopes to help others with their upgrade challenges and a reminder for myself.

Thanks again for your help.

Matt

0

slamj1 created 6 years ago

Some addtional notes on our experience with upgrading to V6.0:

FreezeUI has replaced the spinner. When using the previous spinner component, we would pass the div id to it (when used programatically), so that only that component would be blocked. Since JQuery was removed, that code broke, and the default CRUD grids also did not localize the spinner correctly (blocked the whole screen instead). In order to get FreezeUI to function on any arbitrary component that required a loading indicator, we choose to add position:relative to the CSS class attached to the desired div and set the [busyif].
Since JQuery was removed, our metronic Accordian control ceased to expand. IMHO, Metronic's accordian that is better than Angular's, so we simply re-added JQuery (also requires BootstrapJS) back in specifically for that control.

0

ismcagdas created 6 years ago

Support Team

Hi @mdframe

Thank you very much for your effort :).

Yes, the "dropdown-toggle" class is not needed.
If you are talking about tenant dashboard, it is still filled with random data. Maybe it is different problem for you. Could you share which grapsh showing no data text ?

Hi @slamj1

Actually we couldn't find a good Angular library so we have used FreezeUI. Other libraries requires you to know which part of the UI you are going to block but we didn't like that approach.
You can take a look at https://www.primefaces.org/primeng/#/accordion and https://valor-software.com/ngx-bootstrap/#/accordion as an alternative. Both libraries will require you to writ esome custom css to give them a better look :).

0

slamj1 created 6 years ago

Thanks for the suggestions @ismcagdas. Although we have everything working, I'll have a look at https://valor-software.com/ngx-bootstrap/#/accordion

5 Answer(s)