Ionic 4/Angular 6 compatibility?

[jameskane05]

While considering TypeORM for a new production project, I was able to get the example app running no problem. Works as expected, looks great.

Now trying to configure it w/ my project environment and I've thrown a lot of time away. I'm using the new Ionic 4 beta 12 along with Angular 6. I'm getting the same issues referenced here re: @types/node and some settings in tsconfig.json files:

typeorm/typeorm#900

But the suggested fixes don't work (see my latest comment on that thread). Any idea if TypeORM can or will support Ionic 4 + Angular 6? I can post more info if requested - not sure if anyone's monitoring issues here. Cheers & thanks.

[daniel-lang]

I haven't had the time yet to what needs to be done to support Ionic 4. Our end goal is to support Ionic 4 but I can't tell you how soon it will be done.

[nextbyn]

is there any advance about this issue? please @daniel-lang

[exequielc]

I've started a new project and I'm stuck on this issue to Ionic 4/Angular 6 , so I
I'v have to ask ..When you think spec this issue is solved?

[MarkRabey]

I'm using Ionic 7/Angular 6 and was able to get it working by adding "types": ["node"] to src/tsconfig.app.json, not the tsconfig.json in the root directory.

Edit
I was wrong. Once I actually started using it I just got different errors.

[nextbyn]

I'm using Ionic 7/Angular 6 and was able to get it working by adding "types": ["node"] to src/tsconfig.app.json, not the tsconfig.json in the root directory.

Edit
I was wrong. Once I actually started using it I just got different errors.

Can You post your tsconfig.app.json and package.json so I can compare with mine

[MarkRabey]

@nextbyn sorry, I reverted back to try to find another solution. Like I said, it actually didn't work anyway.

[nextbyn]

@nextbyn sorry, I reverted back to try to find another solution. Like I said, it actually didn't work anyway.

It's a shame, I'm still waiting for a solution to this issue or a workaround

[MarkRabey]

@nextbyn sorry, I reverted back to try to find another solution. Like I said, it actually didn't work anyway.

It's a shame, I'm still waiting for a solution to this issue or a workaround

Me too :(

[amorgulis]

Based on this discussion: typeorm/typeorm#857, I was able to get TypeORM to work in my Ionic project by adding the following lines to src/tsconfig.app.json:

"types": ["node"],
"paths": {
  "typeorm": ["node_modules/typeorm/browser"]
}

Using:

• Ionic 4.0.0-beta.19
• Angular 7.1.3
• TypeORM 0.2.9

Hope this helps!

[nextbyn]

Based on this discussion: typeorm/typeorm#857, I was able to get TypeORM to work in my Ionic project by adding the following lines to src/tsconfig.app.json:

"types": ["node"],
"paths": {
  "typeorm": ["node_modules/typeorm/browser"]
}

Using:

• Ionic 4.0.0-beta.19
• Angular 7.1.3
• TypeORM 0.2.9

Hope this helps!
@amorgulis
can you put your ts config complete and the package.json to compare

[nextbyn]

@amorgulis

added "baseUrl": ".", inside "compilerOptions" tree and the build --prod finish OK.

And now when run my project (index.html) habe this error in console window.

vendor.js:1 Uncaught Error: Cannot find module "." at vendor.js:1 at vendor.js:1 at Object.<anonymous> (vendor.js:1) at e (vendor.js:1) at Object.<anonymous> (main.js:1) at e (vendor.js:1) at Object.<anonymous> (main.js:1) at e (vendor.js:1) at window.webpackJsonp (vendor.js:1) at main.js:1

[amorgulis]

@nextbyn

package.json is default from a new Ionic project, except for the specific dependencies for my project. Here are the tsconfig.json and tsconfig.app.json, which are also default except for the two settings I mentioned above that went into tsconfig.app.json (notice the .app).

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

tsconfig.app.json

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

[exequielc]

@amorgulis is it working with ionic 4
@pmathulan Sorry ,can you share a sample project to check and compare with mine. I can't make it my project work.
Thanks in advance

Just found a good sample here🥇(https://github.com/coturiv/ionic4-typeorm-starter).

[glaucogoca]

I was able to get work following this instruction

@nextbyn

package.json is default from a new Ionic project, except for the specific dependencies for my project. Here are the tsconfig.json and tsconfig.app.json, which are also default except for the two settings I mentioned above that went into tsconfig.app.json (notice the .app).

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

tsconfig.app.json

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

But I had to install @angular-builders/custom-webpack and @angular-builders/dev-server

npm i @angular-builders/custom-webpack
npm i @angular-builders/dev-server

and I modifed angular.json to use angular-builders/custom-webpack:browser instead of @angular-devkit/build-angular:browser including the webpack.config.js and I modified also to use @angular-builders/dev-server:generic instead of @angular-devkit/build-angular:dev-server as follow

"builder": "@angular-builders/custom-webpack:browser",
          "options": {
                   "customWebpackConfig": {
                          "path": "./config/webpack.config.js"
                     },
...
"serve": {
          "builder": "@angular-builders/dev-server:generic",
...