search

nstudio / xplat

Cross-platform (xplat) tools for Nx workspaces.
MIT License
365 stars 52 forks source link

Various Nativescript with Angular 13 bugs #289

Closed s0l4r closed 2 years ago

s0l4r commented 2 years ago

When trying to get Angular 13 to work properly, found a few issues that might or might not be related to Xplat. However I will post them here so that you can see if you need to update anything or any dependencies.

Ivy not supported Might be related to https://github.com/angular/angular/issues/43833

npx nx run nativescript-testing:ios 

> nx run nativescript-testing:ios 
---
Running NativeScript CLI within apps/nativescript-testing/

ns debug ios --force
---
Error while loading nativescript-cloud is: Default commands should be required before child commands
Searching for devices...

> testing@0.0.0 postinstall
> node ./tools/xplat-postinstall.js

Copying ../../hooks -> hooks

up to date, audited 24 packages in 876ms

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> testing@0.0.0 postinstall
> node ./tools/xplat-postinstall.js

Copying ../../hooks -> hooks

up to date, audited 24 packages in 735ms

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Copying template files...
Platform ios successfully added. v8.1.0
Preparing project...
Error [ERR_REQUIRE_ESM]: require() of ES Module /git/nx/workspaces/testing/node_modules/@angular/compiler-cli/bundles/index.js from /git/nx/workspaces/testing/node_modules/@ngtools/webpack/src/ivy/plugin.js not supported.
Instead change the require of index.js in /git/nx/workspaces/testing/node_modules/@ngtools/webpack/src/ivy/plugin.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/git/nx/workspaces/testing/node_modules/@ngtools/webpack/src/ivy/plugin.js:30:24)
    at Object.<anonymous> (/git/nx/workspaces/testing/node_modules/@ngtools/webpack/src/ivy/index.js:13:16)
    at Object.<anonymous> (/git/nx/workspaces/testing/node_modules/@ngtools/webpack/src/index.js:33:34)
    at getAngularCompilerPlugin (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/configuration/angular.js:218:39)
    at default_1 (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/configuration/angular.js:87:35)
    at /git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/index.js:129:13
    at Array.forEach (<anonymous>)
    at resolveChainableConfig (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/index.js:127:10)
    at Object.resolveConfig (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/index.js:156:42)
    at module.exports (/git/nx/workspaces/testing/apps/nativescript-testing/webpack.config.js:20:18)
    at Command.<anonymous> (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/bin/index.js:66:44)
    at Command.listener [as _actionHandler] (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:488:17)
    at /git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:1227:65
    at Command._chainOrCall (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:1144:12)
    at Command._parseCommand (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:1227:27)
    at Command._dispatchSubcommand (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:1050:25)
    at Command._parseCommand (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:1193:19)
    at Command.parse (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/node_modules/commander/lib/command.js:897:10)
    at Object.<anonymous> (/git/nx/workspaces/testing/node_modules/@nativescript/webpack/dist/bin/index.js:106:21) {
  code: 'ERR_REQUIRE_ESM'
}
No configuration!
Executing webpack failed with exit code 0.

Fix to above npm install @ngtools/webpack@13.0.4

NGCC incorrect import

npm install

> testing@0.0.0 postinstall
> node ./tools/xplat-postinstall.js

Copying ../../hooks -> hooks
node:internal/modules/cjs/loader:488
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './ngcc/main-ngcc.js' is not defined by "exports" in /git/nx/workspaces/testing/node_modules/@angular/compiler-cli/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:692:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (/git/nx/workspaces/testing/apps/nativescript-testing/tools/xplat-postinstall.js:18:26)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Fix to above The Xplat post install script must be updated git/nx/workspaces/testing/apps/nativescript-testing/tools/xplat-postinstall.js with something like this: const ngccPath = require.resolve('@angular/compiler-cli/ngcc');

Nativescript issue Related to: https://github.com/NativeScript/angular/issues/44

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
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:/testing/node_modules/@angular/core/fesm2015/core.mjs:4051:0
at …µ…µngDeclareFactory(file: src/webpack:/testing/node_modules/@angular/core/fesm2015/core.mjs:28536:0
at ../../node_modules/@angular/common/fesm2015/common.mjs(file: src/webpack:/testing/node_modules/@angular/common/fesm2015/common.mjs:90:45
at __webpack_require__(file: src/webpack:/testing/webpack/bootstrap:24:0
at fn(file: src/webpack:/testing/webpack/runtime/hot module replacement:61:0
at ../../node_modules/@nativescript/an
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught Error: The injectable 'PlatformLocation' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.
The injectable is part of a library that has been partially compiled.
However, the Angular Linker has not processed the library such that JIT compilation is used as fallback.
Ideally, the library is processed using the Angular Linker to become fully AOT compiled.
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:/testing/node_modules/@angular/core/fesm2015/core.mjs:4051:0
at …µ…µngDeclareFactory(file: src/webpack:/testing/node_modules/@angular/core/fesm2015/core.mjs:28536:0
at ../../node_modules/@angular/common/fesm2015/common.mjs(file: src/webpack:/testing/node_modules/@angular/common/fesm2015/common.mjs:90:45
at __webpack_require__(file: src/webpack:/testing/webpack/bootstrap:24:0
at fn(file:///app/runtime.js:

Fix to above

npm install @nativescript/webpack@5.0.2-alpha.0
npm install @nativescript/core@8.1.5-next-12-05-2021-1540322354

This is my working package configuration after a few attempts with NS:

npm list
testing@0.0.0 /git/nx/workspaces/testing
├── __ngcc_entry_points__.json@ extraneous
├── @angular-devkit/build-angular@13.1.2
├── @angular-eslint/eslint-plugin-template@13.0.1
├── @angular-eslint/eslint-plugin@13.0.1
├── @angular-eslint/template-parser@13.0.1
├── @angular/animations@13.1.1
├── @angular/cli@13.1.2
├── @angular/common@13.1.1
├── @angular/compiler-cli@13.1.1
├── @angular/compiler@13.1.1
├── @angular/core@13.1.1
├── @angular/forms@13.1.1
├── @angular/language-service@13.1.1
├── @angular/platform-browser-dynamic@13.1.1
├── @angular/platform-browser@13.1.1
├── @angular/router@13.1.1
├── @angular/service-worker@13.1.1
├── @cosmic/api@0.9.6
├── @cosmic/xplat-scss@1.0.0 -> ./libs/xplat/scss/src
├── @nativescript/angular@12.2.0
├── @nativescript/core@8.1.5-next-12-05-2021-1540322354
├── @nativescript/eslint-plugin@0.0.4
├── @nativescript/types@8.1.1
├── @nativescript/webpack@5.0.2-alpha.0
├── @ngneat/svg-icon@4.0.2
├── @ngneat/until-destroy@9.0.0
├── @ngrx/component-store@13.0.2
├── @ngrx/component@13.0.2
├── @ngrx/effects@13.0.2
├── @ngrx/router-store@13.0.2
├── @ngrx/store-devtools@13.0.2
├── @ngrx/store@13.0.2
├── @ngtools/webpack@13.0.4
├── @ngx-translate/core@14.0.0
├── @ngx-translate/http-loader@7.0.0
├── @nrwl/angular@13.2.4
├── @nrwl/cli@13.2.4
├── @nrwl/cypress@13.2.4
├── @nrwl/eslint-plugin-nx@13.2.4
├── @nrwl/jest@13.2.4
├── @nrwl/linter@13.2.4
├── @nrwl/tao@13.2.4
├── @nrwl/web@13.2.4
├── @nrwl/workspace@13.2.4
├── @nstudio/angular@13.0.1
├── @nstudio/electron-angular@13.0.1
├── @nstudio/electron@13.0.1
├── @nstudio/nativescript-angular@13.0.1
├── @nstudio/nativescript@13.0.1
├── @nstudio/schematics@13.0.1
├── @nstudio/web-angular@13.0.1
├── @nstudio/web@13.0.1
├── @nstudio/xplat@13.0.1
├── @openapitools/openapi-generator-cli@2.4.18
├── @sentry/angular@6.16.1
├── @sentry/tracing@6.16.1
├── @types/jest@27.0.3
├── @types/lodash-es@4.17.5
├── @types/node@16.11.13
├── @typescript-eslint/eslint-plugin@4.33.0
├── @typescript-eslint/parser@4.33.0
├── autoprefixer@10.4.0
├── cypress@8.7.0
├── electron-builder@22.14.5
├── electron-installer-dmg@3.0.0
├── electron-packager@15.4.0
├── electron-rebuild@3.2.5
├── electron-reload@1.5.0
├── electron-store@8.0.1
├── electron-updater@4.6.1
├── electron@16.0.4
├── eslint-config-prettier@8.1.0
├── eslint-plugin-cypress@2.12.1
├── eslint@7.32.0
├── install@0.13.0
├── jest-preset-angular@11.0.1
├── jest@27.4.3
├── keycloak-angular@8.4.0
├── keycloak-js@15.1.1
├── lodash-es@4.17.21
├── nativescript-ngx-fonticon@7.0.0
├── nativescript-theme-core@1.0.6
├── ng-packagr@13.0.3
├── ng-zorro-antd@12.1.0
├── npm-run-all@4.1.5
├── npm@8.3.0
├── postcss@8.4.4
├── prettier@2.5.1
├── rxjs@7.4.0
├── sass@1.44.0
├── sketch-js@1.1.3
├── tailwindcss@2.2.19
├── ts-jest@27.1.0
├── tslib@2.3.1
├── typescript@4.4.4
├── wait-on@6.0.0
└── zone.js@0.11.4

nx report

>  NX  Report complete - copy this into the issue template

  Node : 16.13.0
  OS   : darwin x64
  npm  : 8.1.0

  nx : 13.2.4
  @nrwl/angular : 13.2.4
  @nrwl/cli : 13.2.4
  @nrwl/cypress : 13.2.4
  @nrwl/devkit : 13.2.4
  @nrwl/eslint-plugin-nx : 13.2.4
  @nrwl/express : undefined
  @nrwl/jest : 13.2.4
  @nrwl/linter : 13.2.4
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.2.4
  @nrwl/web : 13.2.4
  @nrwl/workspace : 13.2.4
  @nrwl/storybook : 13.2.4
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
     @angular/animations: 13.1.1
     @angular/common: 13.1.1
     @angular/compiler: 13.1.1
     @angular/core: 13.1.1
     @angular/forms: 13.1.1
     @angular/platform-browser: 13.1.1
     @angular/platform-browser-dynamic: 13.1.1
     @angular/router: 13.1.1
     @angular/service-worker: 13.1.1
     @ngneat/svg-icon: 4.0.2
     @ngrx/component: 13.0.2
     @ngrx/component-store: 13.0.2
     @ngrx/effects: 13.0.2
     @ngrx/router-store: 13.0.2
     @ngrx/store: 13.0.2
     @ngrx/store-devtools: 13.0.2
     ng-zorro-antd: 12.1.0
     @angular-devkit/build-angular: 13.1.2
     @angular/cli: 13.1.2
     @angular/compiler-cli: 13.1.1
     @angular/language-service: 13.1.1
     @nstudio/angular: 13.0.1
     @nstudio/electron: 13.0.1
     @nstudio/electron-angular: 13.0.1
     @nstudio/nativescript: 13.0.1
     @nstudio/nativescript-angular: 13.0.1
     @nstudio/schematics: 13.0.1
     @nstudio/web: 13.0.1
     @nstudio/web-angular: 13.0.1
     @nstudio/xplat: 13.0.1
NathanWalker commented 2 years ago

We just published 13.4.1 with officially angular 13 support - if you generate a new workspace and add the tools should be good now.

s0l4r commented 2 years ago

Sounds great Nathan! Thanks, I will check it out and report back 🙂