Angular 通用 webpack 配置

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: Invalid regular expression flags”

我认为 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 文件中的这个错误（当我从 https://angular.io/guide/universal 调用 npm run build:ssr 时）

我的 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 架构师：

"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",

我的 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"
  }
}

我的服务器.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: Invalid regular expression flags”）

Answer 1

我认为你需要第三个tsconfig.webpack-server.json。对我来说有 4 个：

• ./tsconfig.json - 根 tsconfig
• ./src/tsconfig.app.json - 用于构建浏览器端包的 tsconfig
• ./src/tsconfig.server.json - 用于构建服务器端包的 tsconfig
• ./src/tsconfig.webpack-server.json - webpack 使用的 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",
}

只有上面所示的 module 和 target 字段似乎与您遇到的错误相关，其他选项应该是您的项目所必需的。