CODEWITHSUNDEEP
angularwebpackangular9
Yazan Mehrez
Yazan Mehrez

Reputation: 1204

Use special loader using Angular 9

I upgraded my project to Angular 9. I'm using SSR, after upgrading my webpack.config.js become webpack.config.js.bak. Now I'm trying to do ng build --prod && ng run [projectName]:server:production

Now I got this error message

    ERROR in ./node_modules/canvas/build/Release/canvas.node 1:2
    Module parse failed: Unexpected character '�' (1:2)
    You may need an appropriate loader to handle this file type, currently no loaders are configured 
    to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)

So I tried to implement loaders such as node-loader and I need to know should I update my server.ts because I can see webpack.config.js is no longer needed in my case.

EDIT:

I tried this in angular.json but still not working

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "externalDependencies": [
              "fabric"
            ],
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },

Upvotes: 1

Views: 1427

Answers (2)

Jonathan Le Cornichone
Jonathan Le Cornichone

Reputation: 372

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/app/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "inlineStyleLanguage": "scss",
            **"externalDependencies": [
              "canvas"
            ],**
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "sourceMap": true,
              "extractLicenses": false,
              "vendorChunk": true
            },
            "ci": {}
          },
          "defaultConfiguration": "production"
        },

Upvotes: 3

Nate
Nate

Reputation: 71

I had this exact issue. First your "externalDependencies" should be set to "canvas" in Angular.json. Then be sure you have the latest stable version of node installed. Hope this helps.

Upvotes: 7

Related Questions