Angular Demo JIT compilation failed for component class SwipeMenuComponent

meeshkabob commented 1 year ago

Description

The ui-collectionview angular demo throws a JIT compilation failed error when tapping button Swipe Menu. The UI stays stuck on the home page and does not display the Swipe Menu component.

  JS: EVENT TRIGGERED: onLoadMoreItems()
  JS: JIT compilation failed for component class SwipeMenuComponent {
  JS:     constructor(router) {
  JS:         this.router = router;
  JS:         this.items = [
  JS:      ...<omitted>...
  JS: }
  JS: ERROR Error: Uncaught (in promise): Error: The component 'SwipeMenuComponent' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
  JS:
  JS: JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
  JS: Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
  JS: or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
  JS: Error: The component 'SwipeMenuComponent' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
  JS:
  JS: JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
  JS: Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
  JS: or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
  JS:     at getCompilerFacade (file:///data/data/org.nativescript.demong/files/app/vendor.js:91...
^C

Which platform(s) does your issue occur on?

iOS/Android/Both - Android. It's possible that the issue occurs on iOS as well. However, I'm troubleshooting a separate demo build issue there.
iOS/Android versions - API 33
emulator or device. What type of device? Pixel 3a emulator

Please, provide the following version numbers that your issue occurs with:

CLI: Nativescript 8.5.3
Yarn 1.22.19
Lerna 7.1.1
Npm 8.19.2

Please, tell us how to recreate the issue in as much detail as possible.

Clone ui-collectionview and checkout commit 8a457304cddbe427b1a60158a02fda5b1c5c8720
Follow the README instructions for building and starting the demo
```
 yarn
 npm run build.all
 npm run demo.ng.android
```
When the demo app loads on the emulator, tap button Swipe Menu

Is there any code involved?

No, running the demo as is.

meeshkabob commented 8 months ago

It's been about 6 months, so I'm revisiting the demos. I'm still unable to build and run the angular demo. Following the instructions in the README is unclear, since CollectionView > Demo vs CollectionView > Demos and Development contain contradictory commands, such as npm vs pnpm.

Is there a step that I'm missing?

This time, I did the following:

git clone https://github.com/nativescript-community/ui-collectionview.git
cd ui-collectionview
git submodule update --init
pnpm i
npm start > build.all

The build fails with error ../../src/collectionview/react/index.tsx:38:73 - error TS2344: Type 'CollectionView' does not satisfy the constraint 'ViewBase'..

My console output is attached. collection-view build failure.md

CLI: Nativescript 8.6.3 pnpm 8.6.7 npm 10.2.3 Node 20.10.0

farfromrefug commented 8 months ago

@meeshkabob strange I just built it to make a new release. will try to do a clean clone to see if I can reproduce

farfromrefug commented 8 months ago

@jfturcot i tried with yarn here and it worked fine. I love pnpm but it has many issues which made me switch to yarn. Could you try with yarn? you can clean first by running npm run fullclean

meeshkabob commented 8 months ago

Using yarn instead, the build completes (woot!), but the demo fails with a webpack error, This application depends upon a library published using Angular version 16.2.9, which requires Angular version 16.1.0 or newer to work correctly.

These are the commands that I ran. Are they correct?

cd ui-collectionview
npm run fullclean
yarn
npm run build.all
npm run demo.ng.android

# also fails with npm run demo.ng.ios

Console output for that is here: yarn collection-view build failure.md

farfromrefug commented 8 months ago

yes all good. now about angular specific issues you would have to look into it(surely dép version issue). I am not angular expert sorry. the demo is there it is true but I dont have much time to keep up with angular updates. sorry

nativescript-community / ui-collectionview