怎么通过 tsc 将 angular 项目编译成 node 可运行的 js 文件

矫情吗；* 2022-11-14 14:51 127阅读 0赞

我们知道 webpack 可以将 angular 打包成静态文件，但是用起来太麻烦。有没有简单的方法，因为 angular 使用的是 typescript。所以直接用 typescript 的 tsc 编译命令即可。

通过 ng new angular 新建个 angular 项目

![20210330101751937.png][]

**tsconfig.json**

/* To learn more about this file see: https://angular.io/config/tsconfig. */
    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "es2020",
        "lib": [
          "es2018",
          "dom"
        ]
      }
    }

npm start 启动服务

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

现在执行 tsc 看看编译后的文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

执行：node .\\dist\\out-tsc\\src\\main.js 时报错

SyntaxError: Cannot use import statement outside a module

因为 javascript 不支持直接使用 import 语句

更改 **tsconfig.json** 的 "module": "commonjs"

/* To learn more about this file see: https://angular.io/config/tsconfig. */
    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "module": "commonjs",
        "lib": [
          "es2018",
          "dom"
        ]
      }
    }

编译后的文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2][]

[20210330101751937.png]: /images/20221022/6871faa19fe143ee9b788978fb5b8fd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20221022/a7ab9bef93174fca9ead1f67eebbf740.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: /images/20221022/70af54857a084d3e8eeb501b988e8617.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2]: /images/20221022/d3103c4e423141a19a256925cc709f3a.png