I wonder if anyone can help me to use IgniteUI Angular component in a Web Application ASP.NET Core that is generated with the VS2017 template for Angular.
After creating my solution and test it successfully, i tried to use Ignite UI Angular without success despite that I think that I have done the right thing.
After creating my solution, in the project directory I have run in a Command line Windows "npm install igniteui-angular --save-dev".
Added "import { IgxDatePickerModule } from 'igniteui-angular';" in my app.module because import { IgxDatePickerModule } from 'igniteui-angular/main'; gives an error
Added IgxDatePickerModule in declaration.
Added these line in my component
<h2>Please pick a date: </h2><br /> <igx-datePicker item-width="50%" [value]="date" [formatter]="formatter"></igx-datePicker>
When running the web app, there is an exception.
Is it because I use Node V8.11.3 ?
Hello Michel,
As you are familiar with every update of angular there are some breaking changes or new functionalities that they provide so we have to follow their guidance and new approaches that they give, so we are obligated to follow those rules and taking advantage of those new features.
I recommend you before every updatе or downgradе of the igniteui-angular version to refer to the CHANGELOG file which describing what are the whole changes that were made.
It is expected for 6.1.1 not to work as you expect because there is some breaking changes that are announced for the whole versions that are above ^6.0.0 and one of the biggest is to remove all submodule imports. Which means that all imports are resolved from the top level ingiteui-angular package. So in order to access some module you will have to achieve this through 'igniuteui-angular' import and this was described here.
import { IgxDatePickerModule } from 'igniteui-angular' <- the right access.
Also I will recommend you to follow strictly the getting started section which in my opinion is described very well and all your needs of how should be configured the igniteui-angular package are described there. Of course the section is synced with the latest version of the product.
If you have further questions, please contact us again.
Hi Alexsandar, Thank you for this hint. After some more trial, it seems that we need version 5.3.1 as all version before don't work.
I have written a post here that explain this
http://sharevisual.com/fr-fr/cafédéveloppeur/angular5sample.aspx
The GitHub repository has been updated.
http://github.com/MichelLaplane/Angular5Igx
By the way using Ignite UI angular version 6.1.1 don't work for now. It seems that the node module are not in the same place.
so the import is incorrect in app.module. ts
import { IgxDatePickerModule } from 'igniteui-angular/main'; // wrong
and the style are also not in the same place in the angular.json file so the modification below are also wrong.
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/igniteui-angular/styles/igniteui-angular.css"
Any suggestion.
Regards
Hello Michel
I saw that you are using different version between igniteui-angular and your angular application.
In order to have successful compilation you have to have identical major versions between angular application and igniteui-angular product.
For instance if you are using angular 5 you have to install igniteui-angular 5.x.x version.
As I saw in your application you are using angular 4 and igniteui-angular 6.1.0 which is incompatible and respectively unable to compile.
I have made an application which is compiled successfully with 5.x.x version. You can find it below.
In order to compile the project you will have to run npm install command into ClientApp directory of the project and then you will need to run the application with dotnet run command upon the main directory of the application.
If you have further questions, please contact us again
.my-new-app.zip
As soon as I add the declaration, even when not using the DatePicker in any component, there is an exception.
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()
Index.cshtml
You can look at the solution in My Public Github repository here
https://github.com/MichelLaplane/AngularIgx
use this import { IgxDatePickerModule } from 'igniteui-angular';