Can't resolve 'Canvas'

[ethanzhu1]

I'm trying to get a simple example working. But I got the error in the screenshot.

I import like this, according to the document for Angular.
import { CanvasModule } from '@nativescript/canvas/angular';
When running, I get error below.

[triniwiz]

A couple things

1. {N} version
   2.Angular version

[NathanWalker]

@ethanzhu1 Something you can also try, add this to your app's package.json:

"scripts": {
  "postinstall": "npm run ngcc",
    "ngcc": "ngcc --tsconfig tsconfig.json --properties es2015 module main --first-only"
}

Then run: ns clean

You can then try running your app. Also can you confirm what cli you have installed? ns -v - should be using 8.0.2 at latest. (npm install -g nativescript)

[ethanzhu1]

My cli was on 7.2.0 and now upgraded to 8.0.2. I also followed your suggestions to add scripts, run ns clean. Unfortunately, it throws similar error as before - the difference is that ivy_ngcc disppears from the path.

My Angular version is

[OzymandiasTheGreat]

I'm experiencing the same issue. I tried to add Canvas to the webpack alias. Then it compiles without errors, but the app crashes on startup with LookedUpClassNotFound exception.

So I did much more debugging, and that last error is completely unrelated to this.
Seems like a webpack configuration issue, the relative import to ./Canvas fails to resolve in the production build.
The fastest and easiest workaround is to replace
import { CanvasModule } from "@nativescript/canvas/angular";
with
import { Canvas } from "@nativescript/canvas";
and then just do registerElement("Canvas", () => Canvas);
since that's what's done in the angular module, but this way we bypass the module resolution issue.

[triniwiz]

Can you try updating to the alpha tag thanks 😄

[darkyelox]

Can you try updating to the alpha tag thanks 😄

Tested in a bare new NativeScript v8.0.2 with the alpha tag and I got:

ERROR in ./node_modules/@nativescript/canvas/__ivy_ngcc__/angular/fesm2015/nativescript-canvas-angular.js 5:32-56
Module not found: Error: Can't resolve 'Canvas' in '/Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/__ivy_ngcc__/angular/fesm2015'
resolve 'Canvas' in '/Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/__ivy_ngcc__/angular/fesm2015'
  Parsed request is a module
  using description file: /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/package.json (relative path: ./__ivy_ngcc__/angular/fesm2015)
    resolve as module
      looking for modules in /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules
        single file module
          using description file: /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/package.json (relative path: ./node_modules/Canvas)
            no extension
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas doesn't exist
            .android.ts
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.ts doesn't exist
            .ts
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.ts doesn't exist
            .android.js
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.js doesn't exist
            .js
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.js doesn't exist
            .android.css
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.css doesn't exist
            .css
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.css doesn't exist
            .android.scss
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.scss doesn't exist
            .scss
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.scss doesn't exist
            .android.json
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.json doesn't exist
            .json
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.json doesn't exist
        /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas doesn't exist
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/__ivy_ngcc__/angular/fesm2015/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/__ivy_ngcc__/angular/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/__ivy_ngcc__/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/canvas/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/@nativescript/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules
        single file module
          using description file: /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/package.json (relative path: ./node_modules/Canvas)
            no extension
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas doesn't exist
            .android.ts
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.ts doesn't exist
            .ts
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.ts doesn't exist
            .android.js
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.js doesn't exist
            .js
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.js doesn't exist
            .android.css
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.css doesn't exist
            .css
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.css doesn't exist
            .android.scss
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.scss doesn't exist
            .scss
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.scss doesn't exist
            .android.json
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.android.json doesn't exist
            .json
              /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas.json doesn't exist
        /Users/diego/Documents/development/mobile/bridge/NativeScript/acr-app/node_modules/Canvas doesn't exist
      /Users/diego/Documents/development/mobile/bridge/NativeScript/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/bridge/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/mobile/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/development/node_modules doesn't exist or is not a directory
      /Users/diego/Documents/node_modules doesn't exist or is not a directory
      looking for modules in /Users/diego/node_modules
        single file module
          using description file: /Users/diego/package.json (relative path: ./node_modules/Canvas)
            no extension
              /Users/diego/node_modules/Canvas doesn't exist
            .android.ts
              /Users/diego/node_modules/Canvas.android.ts doesn't exist
            .ts
              /Users/diego/node_modules/Canvas.ts doesn't exist
            .android.js
              /Users/diego/node_modules/Canvas.android.js doesn't exist
            .js
              /Users/diego/node_modules/Canvas.js doesn't exist
            .android.css
              /Users/diego/node_modules/Canvas.android.css doesn't exist
            .css
              /Users/diego/node_modules/Canvas.css doesn't exist
            .android.scss
              /Users/diego/node_modules/Canvas.android.scss doesn't exist
            .scss
              /Users/diego/node_modules/Canvas.scss doesn't exist
            .android.json
              /Users/diego/node_modules/Canvas.android.json doesn't exist
            .json
              /Users/diego/node_modules/Canvas.json doesn't exist
        /Users/diego/node_modules/Canvas doesn't exist
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

[OzymandiasTheGreat]

Yeah, same issue with the latest alpha. Also xmldom is now a hard dependency and not installed automatically.

[triniwiz]

I'll published a new version packed with version of ng-packagr

[triniwiz]

Can you try this again an lmk

[nmongiya]

I am still getting the same error and if you choose to go with workaround suggested then I am getting this

`ERROR in node_modules/@nativescript/canvas/Canvas/index.d.ts:9: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/canvas) which declares Canvas 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.

9 export declare class Canvas extends CanvasBase {`

[triniwiz]

Did you install the package with the @alpha tag ?

[nmongiya]

yes @triniwiz I have tried with alpha tag