Question

Error: NotYetImplemented
    at HTMLCanvasElement.Wo4J.exports.nyi (/path/server/main.js:1:3906285)
    at rj.nf (/path/server/main.js:1:1929447)
    at /path/server/main.js:1:1930713
    at Object.ADia (/path/server/main.js:1:2061225)
    at __webpack_require__ (/path/server/main.js:1:295)
    at Object.7PEY (/path/server/main.js:1:1216808)
    at __webpack_require__ (/path/sen3aPro/server/main.js:1:295)
    at Object.d2mR (/path/server/main.js:1:5425768)
    at __webpack_require__ (/path/server/main.js:1:295)
    at Object.ZAI4 (/path/server/main.js:1:3975117)

我正在解决这个错误，Angular 9服务器端渲染我正在使用开放式街道地图（OSM），我认为 ngx-openlayers 导致此问题的原因是我将其删除时没有错误

我试图仅在客户端加载 AngularOpenlayersModule 模块和使用此模块的组件，但是没有运气

我的 SharedModule.ts ：

import {NgModule, PLATFORM_ID} from '@angular/core';
import {OsmViewComponent} from './osm-view/osm-view.component';
import {AngularOpenlayersModule} from 'ngx-openlayers';
import {CommonModule, isPlatformBrowser} from '@angular/common';

let osmC = [];
let ol = [];
if (isPlatformBrowser(PLATFORM_ID)) {
  osmC = [OsmViewComponent];
  ol = [AngularOpenlayersModule];
}

@NgModule({
  imports: [
    CommonModule,
    AngularOpenlayersModule
  ],
  declarations: [
    OsmViewComponent
  ],
exports: [
  OsmViewComponent
],
})
export class SharedModule {}

我的依赖项是：

  "dependencies": {
    "@angular/animations": "~9.0.3",
    "@angular/cdk": "^9.1.2",
    "@angular/common": "~9.0.3",
    "@angular/compiler": "~9.1.3",
    "@angular/core": "~9.1.3",
    "@angular/fire": "^5.4.0",
    "@angular/forms": "~9.0.3",
    "@angular/platform-browser": "~9.0.3",
    "@angular/platform-browser-dynamic": "~9.0.3",
    "@angular/router": "~9.0.3",
    "@auth0/angular-jwt": "^4.2.0",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@types/chart.js": "^2.9.15",
    "animate.css": "^3.7.2",
    "boostrap": "^2.0.0",
    "bootstrap": "^4.1.3",
    "chart.js": "^2.9.3",
    "easy-pie-chart": "^2.1.7",
    "firebase": "^7.14.4",
    "get-blob-duration": "^1.1.0",
    "hammerjs": "^2.0.8",
    "lodash": "^4.17.15",
    "mdbootstrap": "^4.14.0",
    "ng-circle-progress": "^1.5.1",
    "ng-uikit-pro-standard": "file:ng-uikit-pro-standard-9.0.0.tgz",
    "ng2-charts": "^2.3.0",
    "ng5-slider": "^1.2.4",
    "ngx-device-detector": "^1.4.2",
    "ngx-openlayers": "^1.0.0-next.15",
    "ol": "^6.3.1",
    "openlayers": "^4.6.5",
    "recordrtc": "^5.5.9",
    "rxjs": "~6.5.4",
    "screenfull": "^3.3.0",
    "tslib": "^1.10.0",
    "units-converter": "^1.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.4",
    "@angular/cli": "~9.1.3",
    "@angular/compiler-cli": "~9.1.3",
    "@angular/language-service": "~9.0.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }

Answer 1

就像我在此answer中指出的那样，开放层依赖于pixelworks lib，它会在导入lib时尝试创建画布元素（即使您实际上没有实例化开放层）地图）。这将无法在服务器端运行，并且会导致SSR进程崩溃

基于我不需要渲染地图服务器端这一事实，我的修改是修改server.js文件（对于角度9+，则修改main.js），以删除代码

sed -i "s/var context = document.createElement('canvas').getContext('2d');/var context = null;/" dist/server.js

这将允许代码执行继续服务器端。当客户端角度应用程序接管时，地图将仅在浏览器中启动。

在创建地图的组件中，您还可以使用isPlatformbrowser

检查是否正在执行代码客户端或服务器端以仅实例化地图客户端。

Angular 9通用服务器端渲染（SSR）错误HTMLCanvasElement

1 个答案: