Question

TypeORM主页特别提及支持Ionic平台，但我看不到任何方法让它工作。如果我创建一个新的Ionic项目，然后运行typeorm init，那么它会做什么＆＃34;但由于覆盖了Ionic需要的几个文件，因此打破了实际的离子项目。

我从谷歌上看到，使用带有离子的TypeORM是可能的，人们正在这样做，但我如何从一个空白的离子项目变为将TypeORM输入到它？

我还假设我会使用＆＃34; cordova＆＃34;数据库驱动程序，因为它是最简单的启动和运行方式，但我可能是错的。对此的任何帮助也会很棒。谢谢！

Answer 1

TypeORM的入门指南特别提到某些文件如果已经存在可能会被覆盖：

您也可以在现有节点项目上运行typeorm init，但要小心 - 它可能会覆盖您可能已有的一些文件。

因此，在emtpy文件夹中运行init命令，然后复制/合并文件。您可以复制以下文件/文件夹，因为它们在离子项目中不存在（除非您有名为entity或migration的页面）：

/src/entity至/src/entity
/src/migration至/src/migration
/ormconfig.json至/ormconfig.json

您必须手动合并以下两个文件（只需将依赖项/配置添加到现有的离子文件中）：

/package.json加入/package.json
/tsconfig.json inot /tsconfig.json

您确实需要index.ts文件，因为您的离子项目已经有一个入口点。

Here是一个使用TypeORM的示例离子项目。

当然，您还必须安装所需的npm包here。

Answer 2

这些是将TypeORM与Ionic 4和Angular集成的步骤。

创建项目后，可以按以下方式安装和集成TypeORM。

打开一个新终端，导航到您的项目并从npm安装TypeORM：

$ cd ionic-project
$ npm install typeorm --save

接下来，安装Node.js类型：

$ npm install @types/node --save-dev

由于我们将在浏览器中进行测试，因此我们还需要安装sql.js：

$ npm install sql.js --save

下一步，打开tsconfig.json文件，如果尚未在"typeRoots": ["node_modules/@types"]下添加compilerOptions。

下一步，打开src/tsconfig.app.json并进行相应的更改：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"],
    "paths": {
      "typeorm": ["node_modules/typeorm/browser"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

添加自定义Webpack配置

接下来，在项目的根目录中创建一个自定义Webpack配置文件：

$ touch custom.webpack.config.js

打开custom.webpack.config.js文件并添加以下代码：

const webpack = require('webpack');
console.log('The custom config is used');
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.SQL': 'sql.js/js/sql.js'
        }),
        new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
            result.request = result.request.replace(/typeorm/, "typeorm/browser");
        })
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    optimization: {
        minimize: false
    }
};

接下来，回到终端并从npm安装@angular-builders/custom-webpack和@angular-builders/dev-server软件包：

$ npm install --save @angular-builders/custom-webpack
$ npm install --save @angular-builders/dev-server

将安装 @ angular-builders / custom-webpack v7.4.3 和* @ angular-builders / dev-server v7.3.1 * 软件包。

>

@angular-devkit/build-angular:dev-server构建器利用定制的webpack构建器来获取Webpack配置。与默认的@angular-devkit/build-angular:dev-server不同，它不使用@angular-devkit/build-angular:browser配置来运行开发服务器。如果您将@angular-builders/dev-server:generic与@angular-builders/custom-webpack:browser一起使用，则ng serve将使用后者中提供的自定义配置运行。

现在，打开angular.json文件，找到projects -> app -> architect -> build -> builder条目，然后将 @ angular-devkit / build-angular：browser 与 @ angular-builders / custom-webpack：浏览器。

接下来，在options对象下，添加"customWebpackConfig": {"path": "./custom.webpack.config.js"}：

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom.webpack.config.js"
            },

接下来，将builder属性下的serve属性更改为@angular-builders/dev-server:generic：

  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "app:build"
          },

现在，如果再次提供应用程序，将使用自定义Webpack配置，并且您应该会在终端上看到已使用自定义配置消息。

您可以找到完整的tutorial here和example project here

如何将TypeORM与Ionic一起使用？

2 个答案:

添加自定义Webpack配置