Question

我正在尝试在Ionic应用程序上构建服务器端渲染。我已经根据手册创建了所有内容：https://angular.io/guide/universal

<__main__.CLASS_NAME instance at 0x7f9adf4c0ab8>创建无效的dist / server.js文件。这是文件中的无效代码：

base_url

此代码具有语法错误：“ SyntaxError：无效的正则表达式标志”

我认为webpack.server.config.js出了点问题。也许我必须添加一些加载程序。

这是webpack.server.config.js代码：

npm run build:ssr

如何解决server.js文件中的错误（当我从https://angular.io/guide/universal调用if(typeof !!/Users/myuser/www/myapp/node_modules/file-loader/dist/cjs.js?name=[name].[ext]&outputPath=svg!./ios-add-circle-outline.svg === 'undefined') { // ... }时）

我的tsconfig.json：

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"),
      {}
    )
  ]
};

我已将此代码添加到angular.json架构师中：

npm run build:ssr

我已将这些脚本添加到package.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"
    ]
  }
}

我的tsconfig.server.json：

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

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

重现错误的步骤：

npm运行build：ssr（此命令在/ dist文件夹中创建许多文件。dist / server.js语法错误）
npm run serve：ssr（此命令失败，错误：“ SyntaxError：无效的正则表达式标志”）

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字段似乎与您遇到的错误有关，而其他选项对于您的项目应该是必需的。

Angular通用Webpack配置

1 个答案: