使Angular 7、Angular-Material、Node、Express、Sequelize-Typescript和Postgres协同工作的问题

Question

我已经设置了一个项目，使用Angular 7(CLI7.3.9)和Angular材质作为前端，NodeJS (10.14.1)，Express (4.16.0)和Sequelize-Typescript (1.0.0-beta.3)。数据库是Postgres (4.6)。我已经创建了使用Node和Express访问数据库的后端，并且工作正常(使用Postman测试)。我还用Sequelize-Typescript设置了一个模型。带有角度7和材质的前端本身也可以工作。但是我有一些问题让这一切都能一起工作，看起来是由编译目标引起的。

我在tsconfig.json中尝试了不同的目标设置："es5“和"es6”。但是当我使用es5时，我的后端在通过Postgres的Sequelize请求数据时中断了(参见下面的错误)。当我将编译目标设置为es6时，我的前端中断。

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "outDir": "./dist",
    "pretty": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": false,
    "target": "es6",
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "include": [
    "src/**/*.ts",
    "index.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

当从数据库请求数据时，目标被设置为"es5“，我在后端得到这个错误：

TypeError: Class constructor Model cannot be invoked without 'new'
    at new Company (C:\Users\snleka\My Projects\hpms-ng2\src\app\server\models\Company.ts:8:42)
    at Function.build (C:\Users\snleka\My Projects\hpms-ng2\node_modules\sequelize\lib\model.js:2156:12)
    at Function.Model.(anonymous function) (C:\Users\snleka\My Projects\hpms-ng2\node_modules\sequelize-typescript\dist\model\model\model.js:116:28)

当目标设置为"es6“时，前端中断并显示以下错误消息：

core.js:19866 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined

如何让前端和后端协同工作？

Answer 1

es6依赖于es6，但是浏览器对Node的支持各不相同……您有两个选择，第一个，我建议为您的前端和后端使用单独的tsConfigs。如果你不这样做，另一个选择是将你的tsConfig设置为es6，但是将babel-loader添加到你的webpack配置中，这样你所有的前端代码一旦通过typescript转换到es6，就会被babel转换到es5。我强烈建议使用单独的tsConfigs，因为前端将使用tsConfig，而后端将单独转换。

Answer 2

在tsconfig.json文件中使用：

"target": "es5",

在您的项目目录中创建一个名为.jshintrc的新文件，并在其中写入以下内容：

 { "esversion": 6 }

这对我很有效。