Угловой универсальный конфиг

Question

Я пытаюсь построить рендеринг на стороне сервера в приложении Ionic.Я создал все из руководства: https://angular.io/guide/universal

npm run build:ssr создает неверный файл dist / server.js.Вот неверный код из файла:

if(typeof !!/Users/myuser/www/myapp/node_modules/file-loader/dist/cjs.js?name=[name].[ext]&outputPath=svg!./ios-add-circle-outline.svg === 'undefined') {
   // ...
}

Этот код имеет синтаксическую ошибку: "SyntaxError: Недопустимые флаги регулярного выражения"

Я думаю, что что-то не так с webpack.server.config.js.Может быть, я должен добавить какой-нибудь загрузчик.

Вот код webpack.server.config.js:

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

module.exports = {
  entry: { server: "./server.ts" },
  resolve: { extensions: [".js", ".ts"] },
  target: "node",
  mode: "none",
  // this makes sure we include node_modules and other 3rd party libraries
  externals: [/node_modules/],
  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"),
      {}
    )
  ]
};

Как исправить эту ошибку в файле server.js (когда я звоню npm run build:ssr из https://angular.io/guide/universal)

my tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types" : ["node"],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Я добавил этот код в angular.json architect:

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

Я добавил эти сценарии в package.json:

"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 run app:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",

my tsconfig.server.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "commonjs"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

my server.ts

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

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

// 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');

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

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

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

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// 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('index', { req });
});

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

Действия по воспроизведению ошибки:

1. npm run build: ssr (Эта команда создает много файлов в папке / dist. Dist / server.js имеет синтаксическую ошибку)

2. npm run serve: ssr (Эта команда не выполненас ошибкой: «SyntaxError: недопустимые флаги регулярного выражения»)

Answer 1

Я думаю, вам нужно 3 tsconfig.webpack-server.json.Для меня есть 4:

• ./tsconfig.json - root tsconfig
• ./src/tsconfig.app.json - tsconfig, используемый для сборки пакета на стороне браузера
• ./src/tsconfig.server.json - используется tsconfigдля построения серверного пакета
• ./src/tsconfig.webpack-server.json - tsconfig, используемый веб-пакетом.

В webpack.server.config.js, необходимо указать конфигурацию вручную:

    plugins: [
      new TsconfigPathsPlugin({ configFile: './src/tsconfig.webpack-server.json', logLevel: 'INFO', silent: false, logInfoToStdOut: true }),
    ],

Я использую tsconfig-paths-webpack-plugin в приведенном выше примере.

Причиной наличия нескольких tsconfig является то, что целевые пакеты отличаются.

Для ./src/tsconfig.webpack-server.json:

"compilerOptions": {
  "module": "commonjs",
  "target": "es2017",
}

Убедитесь, что module и target установлены соответственно.

Для ./src/tsconfig.server.json:

"compilerOptions": {
  "module": "commonjs",
  "target": "es5",
}

Для ./src/tsconfig.app.json:

"compilerOptions": {
  "module": "es2015",
  "target": "es5",
}

Только *Поля 1043 * и target проиллюстрированы выше, так как они, по-видимому, имеют отношение к получаемой ошибке, другие параметры должны быть необходимыми для вашего проекта.