JIT compilation failed for NgModule class AppModule

[mrzanirato]

Hello,

I need help. NS8 + Angular, if I add the NativeScriptLottieModule in my AppModule I receive this error:

CONSOLE ERROR: JIT compilation failed for NgModule class AppModule {
}
CONSOLE ERROR: bootstrap: Error in Bootstrap Function:
The NgModule 'AppModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
Error: The NgModule 'AppModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (file: src/webpack:/btop/node_modules/@angular/core/fesm2015/core.mjs:4043:0)

Can you help?
Thanks
Marco

[guillemc23]

This just happened to me too :|

[romulowspp]

Same here.

[Blood2xaimond]

me too...

[bouyuc]

I've had a similar issue but wasn't caused by NativeScriptLottieModule. I was able to fix it by adding import "@angular/compiler" to the first line of main.ts.

I'm running into another error:
ERROR in node_modules/@nativescript-community/ui-lottie/angular/index.d.ts:3:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@nativescript-community/ui-lottie/angular) which declares NativeScriptLottieModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I believe the error I'm getting is related to this one. Please let me know if I should create a separate ticket for this. Currently running Angular 12 and Nativescript 8

[brianrclow]

@bouyuc I'm also getting this now using Angular 12 or 14 and Nativescript 8. The exact same message and TS error.

[farfromrefug]

@brianrclow someone with angular knowledge need to help here. I don't know anything about it or that error :s

[bouyuc]

@brianrclow I got lottie to work. I vaguely remember that I followed and modified parts of the tutorial from here: Get creative with app launch animations using Angular 10 with new boot options. Feel free to ping me on discord if you are still having issues.

[mleleux-heykiddo]

I've had a similar issue but wasn't caused by NativeScriptLottieModule. I was able to fix it by adding import "@angular/compiler" to the first line of main.ts.

I'm running into another error: ERROR in node_modules/@nativescript-community/ui-lottie/angular/index.d.ts:3:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@nativescript-community/ui-lottie/angular) which declares NativeScriptLottieModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I believe the error I'm getting is related to this one. Please let me know if I should create a separate ticket for this. Currently running Angular 12 and Nativescript 8

For anyone else having this issue. We were able to bypass by using the old setup instructions until this gets sorted out - https://github.com/farfromrefug/nativescript-lottie#component (Currently works for Angular 14 and Nativescript 8)

[brianrclow]

I can confirm, using the old setup instructions works for Angular 15 {N} 8. Thank you @mleleux-heykiddo

[danishashraf047]

I'm also facing this error @nativescript-community/ui-lottie/angular which declares NativeScriptLottieModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy.

[danishashraf047]

I'm able to make it works by registering plugin in the main.ts file.

import "@angular/compiler";

import { platformNativeScript, runNativeScriptAngularApp } from '@nativescript/angular';
import { AppModule } from './app/app.module';
import { registerElement } from "@nativescript/angular";
import { LottieView } from '@nativescript-community/ui-lottie';

import Theme from "@nativescript/theme";

runNativeScriptAngularApp({
appModuleBootstrap: () => platformNativeScript().bootstrapModule(AppModule),
});

registerElement('LottieView', () => LottieView);

Theme.setMode(Theme.Light);

[farfromrefug]

@danishashraf047 very nice. I might drop the angular built module and add your example code to the code. Seems much more stable

[danishashraf047]

@farfromrefug Thanks! :)

[kamilkafoor]

Somehow '@nativescript-community/ui-lottie' didn't work and only 'nativescript-lottie' import worked along with the imports mentioned by @danishashraf047 which is the old way of importing the library.

[danishashraf047]

@kamilkafoor Are you using NativeScript with Angular? And kindly share package.json of your project because I need to see the version of nativescript and ui-lottie plugin.

[danishashraf047]

Or it would be good if you share a code that how you are trying to import plugin.

[kamilkafoor]

@danishashraf047 , I am using
"dependencies": { "@angular/animations": "^12.2.0", "@angular/common": "^12.2.0", "@angular/compiler": "^12.2.0", "@angular/core": "^12.2.0", "@angular/forms": "^12.2.0", "@angular/platform-browser": "^12.2.0", "@angular/platform-browser-dynamic": "^12.2.0", "@angular/router": "^12.2.0", "@nativescript/angular": "^12.2.0", "@nativescript/core": "~8.1.1", "@nativescript/theme": "~3.0.1", "crypto-js": "^4.1.1", "lottie-ios": "^3.1.9", "nativescript-lottie": "^5.0.4", "nativescript-oauth2": "^3.0.9", "nativescript-phone": "^3.0.2", "nativescript-ui-listview": "^10.0.2", "rxjs": "~7.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.2.0", "@angular/cli": "^12.2.7", "@angular/compiler-cli": "^12.2.0", "@nativescript/android": "8.1.1", "@nativescript/ios": "^8.4.0", "@nativescript/schematics": "^11.2.0", "@nativescript/types": "~8.1.1", "@nativescript/webpack": "~5.0.0", "@ngtools/webpack": "^12.2.0", "sass": "^1.42.1", "typescript": "~4.3.5" }

but now the problem is that it says in iOS and I am not able to resolve it

`[!] CocoaPods could not find compatible versions for pod "lottie-ios":
In Podfile:
lottie-ios (from https://github.com/farfromrefug/lottie-ios.git)

Specs satisfying the lottie-ios (from https://github.com/farfromrefug/lottie-ios.git) dependency were found, but they required a higher minimum deployment target.
'arch install' command failed.
`

[danishashraf047]

Alright, I will setup the project based on your provided package.json later today and back to you with updates.

[kamilkafoor]

@danishashraf047 sure. Thanks.

[bouyuc]

@kamilkafoor I would look into increasing the deployment target because of this line of your output.
Specs satisfying the lottie-ios (from https://github.com/farfromrefug/lottie-ios.git) dependency were found, but they required a higher minimum deployment target.
If you're building your app using xcode you can find deployment target here
If you're building using CLI, you can try adding IPHONEOS_DEPLOYMENT_TARGET = 13.0 into App_Resource/ios/build.xcconfig,
since I don't know which deployment target lottie requires you can try increasing and decrease the 13.0