Error Not Yet Implemented with Webpack when run node dist/server.js

[thovo]

Hi everyone,

I am not sure this is the right place to ask the question regarding my issue. If not, please accept my apology and remove it!

I were following the guide to implement Angular Universal for my application. Everything worked out well until the last command node dist/server.js throw an error Error: NotYetImplemented

The full traceback is here:

Error: NotYetImplemented
    at HTMLCanvasElement.exports.nyi (C:\Users\dist\server.js:50200:9)
    at C:\Users\dist\server.js:238837:55
    at Object.<anonymous> (C:\Users\dist\server.js:228511:20)
    at svgNS (C:\Users\dist\server.js:228512:12)
    at Object.defineProperty.value (C:\Users\dist\server.js:228520:2)
    at __webpack_require__ (C:\Users\dist\server.js:20:30)
    at Object.<anonymous> (C:\Users\dist\server.js:228463:14)
    at __webpack_require__ (C:\Users\dist\server.js:20:30)
    at Object.<anonymous> (C:\Users\dist\server.js:228427:89)
    at __webpack_require__ (C:\Users\dist\server.js:20:30)

The current version of the packages in my application can be viewed here in package.json:

{
  "name": "application",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server.js",
    "build:client-and-server-bundles": "ng build --production && ng build --production --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "pre-commit": [
    "ng lint -fix"
  ],
  "dependencies": {
    "@angular-devkit/core": "0.3.1",
    "@angular/animations": "5.2.4",
    "@angular/cli": "1.6.8",
    "@angular/common": "5.2.4",
    "@angular/compiler": "5.2.4",
    "@angular/core": "5.2.4",
    "@angular/forms": "5.2.4",
    "@angular/http": "5.2.4",
    "@angular/platform-browser": "5.2.4",
    "@angular/platform-browser-dynamic": "5.2.4",
    "@angular/platform-server": "5.2.4",
    "@angular/router": "5.2.4",
    "@ngui/auto-complete": "0.14.4",
    "@nicky-lenaers/ngx-scroll-to": "0.3.1",
    "@types/flickity": "2.0.0",
    "angular-spinners": "5.0.2",
    "angular2-drag-scroll": "1.5.2",
    "bodymovin": "4.13.0",
    "bootstrap-sass": "3.3.7",
    "chart.js": "2.7.1",
    "core-js": "2.5.3",
    "express": "4.16.2",
    "flickity": "2.0.10",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "ng-lottie": "0.3.1",
    "ng-recaptcha": "3.0.3",
    "ng-selectize": "1.1.3",
    "ng2-charts": "1.6.0",
    "ng2-device-detector": "1.0.1",
    "ng2-input-autocomplete": "0.0.11",
    "ngx-bootstrap": "2.0.2",
    "ngx-cookie": "2.0.1",
    "ngx-loading": "1.0.14",
    "node-sass": "4.7.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "5.5.6",
    "selectize": "0.12.4",
    "slick-carousel": "1.8.1",
    "typescript": "^2.7.1",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@angular/compiler-cli": "5.2.4",
    "@angular/language-service": "4.4.6",
    "@types/jasmine": "2.8.6",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "8.9.3",
    "bootstrap-loader": "2.2.0",
    "chalk": "2.3.1",
    "codelyzer": "3.2.2",
    "copy-webpack-plugin": "4.4.1",
    "cssnano": "4.0.0-rc.2",
    "domino": "2.0.0",
    "enhanced-resolve": "4.0.0-beta.4",
    "extract-text-webpack-plugin": "3.0.2",
    "graceful-fs": "4.1.11",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "jsdom": "11.6.2",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-firefox-launcher": "1.1.0",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "lottie-web": "5.1.7",
    "memory-fs": "0.4.1",
    "npm-run-all": "4.1.2",
    "protractor": "5.3.0",
    "sass-lint": "1.12.1",
    "tapable": "1.0.0-beta.5",
    "ts-loader": "3.5.0",
    "ts-node": "3.3.0",
    "tslint": "5.9.1",
    "uglify-js": "3.3.10",
    "webpack": "3.11.0",
    "webpack-dev-server": "2.11.1",
    "webpack-merge": "3.0.0",
    "webpack-node-externals": "1.6.0"
  }
}

webpack.server.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    server: './src/server.ts'
  },
  resolve: {
    extensions: ['.js', '.ts']
  },
  target: 'node',
  // this makes sure we include node_modules and other 3rd party libraries
  externals: [/(node_modules|main\..*\.js)/],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader'
    }]
  },
  plugins: [
    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
    // for 'WARNING Critical dependency: the request of a dependency is an expression'
    new webpack.ContextReplacementPlugin(
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'), {}
    )
  ]
};

Anyone saw the same problem can give me some insights? Many thanks!

[CaerusKaru]

The issue is that one of your libraries manipulates a <canvas> element, which is not supported by the SSR DOM implementation (Domino). You need to move whatever library is responsible for this into a browser-only part of your app so that it doesn't throw errors on the server.

It's likely this doesn't impact the initial view, so doing this shouldn't impact the overall usability of your app.

[thovo]

I think the root cause is not the canvas, because I removed it and also the component used it but it didn't help.

[CaerusKaru]

Then a better avenue for support would be StackOverflow or Gitter. The main repo works on clean install, any added functionality is out of scope for filing issues here.

[thovo]

Can you give me gitter link? Many thanks!

[CaerusKaru]

Gitter

[rtyx]

I'm getting the same error from ng2-charts (which I see you're also using). The problem seems to be here:

BaseChartDirective.prototype.ngOnInit = function () {
        this.ctx = this.element.nativeElement.getContext('2d');
        this.cvs = this.element.nativeElement;
        this.initFlag = true;
        if (this.data || this.datasets) {
            this.refresh();
        }
    };

and particularly, here:

this.ctx = this.element.nativeElement.getContext('2d');

In my case, wrapping the canvas element and displaying it conditionally only if the platform is browser seems to be avoiding the error, at least.

The template:

<div style="display: block" *ngIf="isBrowser">
    <canvas baseChart
                    [datasets]="datasets"
                    [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartType]="'bar'"
                    [colors]="statisticsService.colors"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)">
    </canvas>
</div>

The typescript file:

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(this.platformId);
  }

[Nirawchawda]

If You want to run fabric.js in angular 7.

1. Add fabric.js in your assets folder.

2. Add path to fabric.js in angular.json

   "scripts": [   "./src/styles/fabric.js"  ]

3. Add following line to the component in which you are using. declare var fabric: any;

4. Add following line to server.ts / prrender.ts

   
   import * as fabric from './src/styles/fabric.js';
   global['fabric'] = fabric;

[Ilyoskhuja]

I have same error

throw new Error("NotYetImplemented");
  ^

Error: NotYetImplemented
    at HTMLCanvasElement.exports.nyi (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:96152:9)
    at Object.<anonymous> (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:299218:48)
    at __webpack_require__ (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:20:30)
    at Object.hasImageData (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:298931:20)
    at __webpack_require__ (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:20:30)
    at Object.<anonymous> (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:298922:17)
    at __webpack_require__ (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:20:30)
    at Module.<anonymous> (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:298368:78)
    at __webpack_require__ (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:20:30)
    at Module.<anonymous> (/Users/apple/Documents/honadon/temporaryquickapp/Honadon-master/Source/XonadonUz/ClientApp/dist/server.js:291645:76)

I cant find solution