Compile error when upgrade integralui from 19 to 20

[mm-ryo]

After upgraded to 20 then I try to build project in release mode. I have got below error and I never import any integralui component in common-dialog.component.ts. There is no error in dev mode.

ERROR in Symbol IntegralUIAutoComplete declared in .../src/third-party/integralui/components/integralui.autocomplete.d.ts is not exported from src/third-party/integralui/integralui.common.module (import into .../common-dialog/common-dialog.component.ts)

[Lidor-Systems]

This is a strange error, because the IntegralUIAutoComplete component is present as export from IntegralUICommonModule. You can check this easily bu opening the integralui.common.module.d.ts file.

IntegralUI Web v20.1 is based on Angular 9, while versions v19.x were built on top of Angular 8. Maybe this is causing a problem in your project.

[mm-ryo]

IntegralUI Web v20.1 is based on Angular 9, while versions v19.x were built on top of Angular 8. Maybe this is causing a problem in your project.

I am using 'ng update' to upgrade angular from 8 to 9. then extract the integralUI version 20 package. and run 'ng build --prod' wait a moment the error comes out.

[Lidor-Systems]

We have tried to recreate the error by creating a new Angular 9 project. The IntegralUI Web was installed from npm server, in our case the similar error appears but for IntegralUI Accordion. In the app component we have only TreeView component set, no Accordion at all.

Solution

Instead of using the installation files (that is adding a reference that points to node_modules), we have added the integralui folder as subfolder of the project app folder. Then importing the IntegralUIModule from that subfolder. As a result the error no longer appears.

Try this in your project and let us know whether the error persist.

We dont know yet why this happens, because there is no difference when importing the IntegralUIModule from let say

import { IntegralUIModule } from '@lidorsystems/integralui-web/bin/integralui/integralui.module';

or importing it from a subfolder under project folder

import { IntegralUIModule } from './integralui/integralui.module';

In both cases the files are the same, but somehow Angular cannot find settings for specified component.

Note We will check this out why it happens, until then please continue with importing the IntegralUIModule from referencing folder in your project.

[mm-ryo]

We have tried to recreate the error by creating a new Angular 9 project. The IntegralUI Web was installed from npm server, in our case the similar error appears but for IntegralUI Accordion. In the app component we have only TreeView component set, no Accordion at all.

Solution

Instead of using the installation files (that is adding a reference that points to node_modules), we have added the integralui folder as subfolder of the project app folder. Then importing the IntegralUIModule from that subfolder. As a result the error no longer appears.

Try this in your project and let us know whether the error persist.

We dont know yet why this happens, because there is no difference when importing the IntegralUIModule from let say

import { IntegralUIModule } from '@lidorsystems/integralui-web/bin/integralui/integralui.module';

or importing it from a subfolder under project folder

import { IntegralUIModule } from './integralui/integralui.module';

In both cases the files are the same, but somehow Angular cannot find settings for specified component.

Note We will check this out why it happens, until then please continue with importing the IntegralUIModule from referencing folder in your project.

In my side, we already created a subfolder for IntegralUI component. we never install it with npm. the 'Module ' you mentioned above 'IntegralUIModule'. I couldn't find it in package (integralui-treeview-20100-pQc7.zip) so the temp solution it doesn't work for me.

[Lidor-Systems]

In your case you should import the IntegralUITreeViewModule:

import { IntegralUITreeViewModule } from './integralui/integralui.treeview.module';

You can also try to import the IntegralUICommonModule:

import { IntegralUICommonModule } from './integralui/integralui.common.module';

We have tried in our test app that only includes the TreeView component, by importing the IntegralUITreeViewModule and the error is not thrown, when using ng build --prod.

We have other client that mention similar problem like yours. The error message in their case was:

ERROR in Symbol IntegralUIFocus declared in …./integralui/components/integralui.core.d.ts is not exported from @lib/integralui/integralui.treeview.module (import into […component of my application]).

They solved the problem by replacing the absolute path with relative path that points to the IntegralUITreeViewModule:

It did not work with an absolute path: import { IntegralUITreeView } from "@lib/integralui/components/integralui.treeview" As soon as I switched to a relative path: import { IntegralUITreeViewModule } from "../../lib/integralui/integralui.treeview.module" It works

[mm-ryo]

In your case you should import the IntegralUITreeViewModule:

import { IntegralUITreeViewModule } from './integralui/integralui.treeview.module';

You can also try to import the IntegralUICommonModule:

import { IntegralUICommonModule } from './integralui/integralui.common.module';

We have tried in our test app that only includes the TreeView component, by importing the IntegralUITreeViewModule and the error is not thrown, when using ng build --prod.

We have other client that mention similar problem like yours. The error message in their case was:

ERROR in Symbol IntegralUIFocus declared in …./integralui/components/integralui.core.d.ts is not exported from @lib/integralui/integralui.treeview.module (import into […component of my application]).

They solved the problem by replacing the absolute path with relative path that points to the IntegralUITreeViewModule:

It did not work with an absolute path: import { IntegralUITreeView } from "@lib/integralui/components/integralui.treeview" As soon as I switched to a relative path: import { IntegralUITreeViewModule } from "../../lib/integralui/integralui.treeview.module" It works

Yes, It also works for me.

[mm-ryo]

I have found a new issue in DEV mode. please help to check it.

[Lidor-Systems]

Error message states that problem happens in IntegralUICore within list popup component. This component is used by Breadcrumb component to display a drop down list. We presume you using the Breadcrumb in your app.

Can you give us more details:, like when this happens, on initialization or when drop down list appears? In general more information on how to recreate this error is helpful to locate the bug.

[mm-ryo]

Error message states that problem happens in IntegralUICore within list popup component. This component is used by Breadcrumb component to display a drop down list. We presume you using the Breadcrumb in your app.

Can you give us more details:, like when this happens, on initialization or when drop down list appears? In general more information on how to recreate this error is helpful to locate the bug.

here are the settings for breadcrumb. the binding items will be changed by the event. but this error comes out when the component displayed.

`<iui-breadcrumb #breadcrumb automationId="breadcrumb" [appRef]="breadcrumbRef" [items]="breadcrumbItems" [selectedItem]="selectedBreadcrumbItem" [dropDownWidth]="150" [dataFields]="breadcrumbDataFields">

{{item.name}} {{ 'SELECTED_COUNT' | translate }}

  </iui-breadcrumb>`

[Lidor-Systems]

We have found what causes the problem. Apparently calling the open method inside ngAfterViewInit as part of the IntregralUIListPopup component causes to refresh the DOM prior the initial style setting is applied. As a result an error stating ExpressionChangedAfterItHasBeenCheckedError is thrown. Calling the open method in this way is not required and can be omitted.

You can quickly solve this on your side by opening the integralui.core.js file and search for:

ngAfterViewInit=function(){this.open()};

This is the only code fragment with that signature and you can find it quickly. Then change it to:

ngAfterViewInit=function(){};

Note This fix will also be available in next official update.

[Lidor-Systems]

The fix is included in v20.2.

As for the compile error mentioned on the top of this post, is because of absolute path that is used to reference the IntegralUIModule. Instead use the relative path in your app:

import { IntegralUIModule } from '../../node_modules/@lidorsystems/integralui-web/bin/integralui/integralui.module';

The ReadMe file of this repository is also updated to address this issue.

[HarryCoder81]

I have an angular 8 application which used IntegralUI Web v19. I am now upgrading the application to angular 9, and plan to upgrade it further. During the upgradation process, I replaced the subfolder of IntegralUI Web v19, with subfolder of IntegralUI Web v20. I am able to build and compile my application, but I get the following error in the console, and my application is not rendered.

Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

My application was working properly before upgradation. Any help would be really appreciated.

[Lidor-Systems]

We suspect that the error is thrown because in IntegralUICoreModule (which is internally imported in IntegralUIModule), imports the BrowserAnimationsModule. Probably you are importing the BrowserModule in your app, which may create a conflict.

You can try to remove import from IntegralUICoreModule, but make sure it is included in your app on root. Here is the source for IntegralUICoreModule from v20.3:

` import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntegralUIAnchorStyle, IntegralUIBaseComponent, IntegralUIBaseValueComponent, IntegralUIDraggable, IntegralUIDragWindow, IntegralUIFocus, IntegralUIHeaderItem, IntegralUIItem, IntegralUIList, IntegralUIListPopup, IntegralUIObjectState, IntegralUIPopup, IntegralUIScrollMode, IntegralUISelectionMode, IntegralUITComponent, IntegralUITemplate, IntegralUITemplateOutlet, IntegralUIVisibility } from './components/integralui.core'; import { IntegralUIListItem } from './components/integralui.listitem'; import { IntegralUIScrollBar } from './components/integralui.scrollbar'; import { IntegralUITooltip, IntegralUITooltipComponent } from './directives/integralui.tooltip';

import { IntegralUICommonService } from './services/integralui.common.service'; import { IntegralUIDragDropService } from './services/integralui.dragdrop.service'; import { IntegralUIFilterService } from './services/integralui.filter.service';

@NgModule({ imports: [ BrowserAnimationsModule, CommonModule, FormsModule ], declarations: [ IntegralUIBaseComponent, IntegralUIBaseValueComponent, IntegralUIDraggable, IntegralUIDragWindow, IntegralUIFocus, IntegralUIHeaderItem, IntegralUIItem, IntegralUIList, IntegralUIListItem, IntegralUIListPopup, IntegralUIPopup, IntegralUIScrollBar, IntegralUITComponent, IntegralUITemplate, IntegralUITemplateOutlet, IntegralUITooltip, IntegralUITooltipComponent ], exports: [ IntegralUIBaseComponent, IntegralUIBaseValueComponent, IntegralUIDraggable, IntegralUIFocus, IntegralUIHeaderItem, IntegralUIItem, IntegralUIListItem, IntegralUIPopup, IntegralUIScrollBar, IntegralUITemplate, IntegralUITemplateOutlet, IntegralUITooltip ], entryComponents: [ IntegralUIDragWindow, IntegralUIListPopup, IntegralUITComponent, IntegralUITooltipComponent ], providers: [ IntegralUICommonService, IntegralUIDragDropService, IntegralUIFilterService ] }) export class IntegralUICoreModule { } `

I am now upgrading the application to angular 9, and plan to upgrade it further

IntegralUI Web for Angular is depreciated (since 2021, latest version v21.3). For moving forward we highly recommend to use IntegralUI Web, it is based on Web Components standard built on top of Lit element, and you can use it any JavaScript framework: Angular, AngularJS, React, Vue or other. Also, no compatibility issues, it is built independently from Angular framework.