Question

Я могу создать приложение для рендеринга на стороне сервера, но когда я запускаю файл server.ts, я получаю эту ошибку. Команды:

"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 --prod && ng build --prod --app 1 --output-hashing=false",
"webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",

Я пытался найти zone.js во всем проекте, но нашел его только в файле polyfills.js и server.ts. Я попытался прокомментировать и в строке импорта файловой зоны server.ts и построить ее снова, но это не сработало. Я также попытался прокомментировать его в polyfills.js и собрать его снова, но это не сработало.

Я не могу найти проблему, с чем это связано? Любая помощь будет оценена. Вы можете найти файл конфигурации ниже. Если вам нужен какой-либо другой файл, прокомментируйте его.

Эта проблема возникает, только когда я пытался реализовать рендеринг на стороне сервера. В противном случае без него все работает нормально.

.angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "version": "1.0.0",
        "name": "demo"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist/browser",
            "assets": [
                "assets"
            ],
            "index": "index.html",
            "main": "main.ts",
            "polyfills": "polyfills.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "../node_modules/font-awesome/scss/font-awesome.scss",
                "../node_modules/simple-line-icons/css/simple-line-icons.css",
                "scss/style.scss",
                "../node_modules/primeng/resources/themes/omega/theme.scss",
                "../node_modules/primeng/resources/primeng.min.css",
                "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
                "../node_modules/npm-font-open-sans/open-sans.scss"
            ],
            "scripts": [
            ],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        },
        {
            "platform": "server",
            "root": "src",
            "outDir": "dist/server",
            "assets": [
            "assets",
                "assets"
            ],
            "index": "index.html",
            "main": "main.server.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.server.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "styles": [
                "../node_modules/font-awesome/scss/font-awesome.scss",
                "../node_modules/simple-line-icons/css/simple-line-icons.css",
                "scss/style.scss",
                "../node_modules/primeng/resources/themes/omega/theme.scss",
                "../node_modules/primeng/resources/primeng.min.css",
                "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
                "../node_modules/npm-font-open-sans/open-sans.scss"
            ],
            "scripts": [],
            "environmentSource": "environments/environment.ts",
            "environments": {
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "prefixInterfaces": false
    }
}

webpack.server.config.js

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

module.exports = {
  entry: {  server: './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' },
      { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', query: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } }
    ]
  },
  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'),
      {}
    )
  ]
}

server.ts

//import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

Package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "desc",
  "author": "",
  "homepage": "http://www.test.com/",
  "copyright": "Copyright 2017",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port=3333 --live-reload false",
    "build": "ng build --prod --aot=true",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "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 --prod && ng build --prod --app 1 --output-hashing=false",
    "webpack:server": "node --max_old_space_size=5110 ./node_modules/webpack/bin/webpack.js --config webpack.server.config.js --progress --colors",
    "compile": "node_modules\\.bin\\webpack.cmd"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^0.6.0",
    "@angular/animations": "5.2.0", // old: 5.2.3
    "@angular/common": "5.2.0",  // old: 5.2.3
    "@angular/compiler": "5.2.0", // old: 5.2.3
    "@angular/core": "5.2.0", // old: 5.2.3
    "@angular/forms": "5.2.0", // old: 5.2.3
    "@angular/http": "5.2.0", // old: 5.2.3
    "@angular/platform-browser": "5.2.0", // old: 5.2.3
    "@angular/platform-browser-dynamic": "5.2.0", // old: 5.2.3
    "@angular/platform-server": "5.2.0", // old: 5.2.3
    "@angular/router": "5.2.0", // old: 5.2.3
    "@angular/upgrade": "5.2.0", // old: 5.2.3
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0",
    "@swimlane/ngx-charts": "^7.1.1",
    "amazon-cognito-identity-js": "^2.0.2",
    "aws-sdk": "^2.212.1",
    "bootstrap": "4.0.0",
    "core-js": "2.5.3",
    "d3": "^5.0.0",
    "font-awesome": "^4.7.0",
    "moment": "2.20.1",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "2.0.2",
    "ngx-loading": "^1.0.14",
    "ngx-treeview": "^2.0.5",
    "npm-font-open-sans": "^1.1.0",
    "primeng": "^5.2.0-rc.2",
    "regexp-replace-loader": "^1.0.1",
    "rxjs": "5.5.6",
    "simple-line-icons": "^2.4.1",
    "string-replace-loader": "^2.1.1",
    "ts-helpers": "1.1.2",
    "ts-loader": "^4.2.0",
    "webpack": "^4.6.0",
    "webpack-dev-server": "^3.1.1",
    "zone.js": "0.8.12" // old: 0.8.20
  },
  "devDependencies": {
    "@angular/cli": "1.6.3", // old: 1.6.6
    "@angular/compiler-cli": "5.2.0", // old: 5.2.3
    "@types/jasmine": "2.8.6",
    "@types/node": "^10.0.3",
    "codelyzer": "4.1.0",
    "jasmine-core": "2.9.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.3.0",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typescript": "^2.6.0-rc", // old: 2.6.6
    "webpack-cli": "^2.1.2"
  },
  "engines": {
    "node": ">= 6.9.0",
    "npm": ">= 3.0.0"
  }
}

jiali passion · Answer 1 · 05 июня 2018

Эта проблема будет лучше решена в следующей версии zone.js, если зона загружена, мы не будем выдавать ошибку при перезагрузке.

Andrey Kogut · Answer 2 · 16 мая 2018

Чтобы это исправить, вам нужно искать импорт zone.js / dist / zone в модулях узла, а затем у вас есть два варианта, чтобы это исправить. Сначала нужно прокомментировать этот импорт или просто обновить библиотеку (в моем случае (ng2-dnd) в новой версии эта строка пропала). Но я уверен, что когда вы исправите эту ошибку, вы получите что-то вроде «Cannot find module». ». Эта ошибка была вызвана библиотекой @ swimlane / ngx-charts . Некоторые диаграммы вызывают ошибку, в моем случае это ngx-charts-line-chart .

Надеюсь, что это будет полезно для вас и сэкономит чье-то время в будущем (я трачу три дня на решение этой проблемы).

Угловая проблема рендеринга на стороне сервера [Зона уже загружена]

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Угловая проблема рендеринга на стороне сервера [Зона уже загружена]

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы