Search code examples
angulartypescriptionic-frameworkaspnetboilerplate

How do I integrate Ionic 4 with aspnetboilerplate, without any typescript errors?

I am trying to integrate ionic 4 as a front end to the aspnetboilerplate backend API.

I have copied some of the code from the example Angular front end and added all the packages I needed. I only copied the auth folder and the service proxy folder so I could add ASP .net boilerplate authentication to the ionic app. VS Code did not detect the abp package and was showing import errors until I also copied the typings.d.ts file, which removed the errors in the editor.

//typings.d.ts snippet

///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/abp.d.ts"/>
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.d.ts"/>
///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.signalr.d.ts"/>

When trying to run the app using ionic serve, I get the same errors that I had before I added the typings.d.ts file.

ERROR in node_modules/abp-ng2-module/dist/src/features/feature-checker.service.d.ts:2:31 - error TS2503: Cannot find namespace 'abp'.

src/account/account.component.ts:34:9 - error TS2592: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery` and then add `jquery` to the types field in your tsconfig.

I think the issue is that VS Code is recognizing the typings.d.ts file while the actual ionic typescript install is not.

Solution

  • You need to add the references to the tsconfig.json file in the types or typeroots properties.

      {
   "compilerOptions": {
       "typeRoots" : ["node_modules/abp-web-resources/Abp/Framework/scripts"]
   }
  }

    you can check the documentation here.