Using 'import' and 'export' in Ionic 2 requires specifying 'sourceType: module'

Starting a new project using Ionic 2 and encountering an error after installing angular2-jwt:

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

D:\desenv\arquivos\workspace_inbit\medipop-parent\medipop-app\node_modules\angular2-jwt\angular2-jwt.ts:1
import {Injectable, Injector} from 'angular2/core';

To reproduce the issue:

ionic start testapp --v2 --ts 
cd testapp
npm i --save angular2-jwt

Here is the code snippet causing the error:

@App({
    templateUrl: 'build/app.html',
    providers: [
        provide(AuthHttp, {
            useFactory: (http) => {
                return new AuthHttp(new AuthConfig({
                    headerPrefix: '',
                    noJwtError: true
                }), http);
            },
            deps: [Http]
        })
    ]
})
class MyApp {}

Seeking help to solve this puzzle. Any suggestions?

Answer №1

Make sure to include the following configuration in your ts settings:

"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
},

If you're still facing issues, you can try using the configuration that has been successful on my own computer (tsconfig.json):

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "ES5",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": true,
        "moduleResolution":"node"
    },
    "files": [
        "angular2-jwt.ts",
        "typings/browser.d.ts",
        "custom.d.ts"
    ]
}

Answer №2

Using 'import' and 'export' is only allowed with 'sourceType: module'

To resolve this issue, make sure to define a module in your tsconfig file or through the command line. For example:

'module': 'commonjs'

For further information

Visit this link for more details.

Answer №3

Encountered a similar problem today while working with Ionic 2 beta 11. The issue turned out to be caused by using the (.js) extension for a file named user-data.js instead of the required (.ts) extension for TypeScript files (user-data.ts). Simply changing the file extension from .js to .ts resolved the problem for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sign up for the identical Observable within a Child Component in Angular 2 using TypeScript

This question may seem simple, but as a newcomer to Angular 2, I often find myself needing more explanation despite the good examples and tutorials available. Within a component, I have an observable that gets updated periodically. While I've simplif ...

Steps for confirming whether each element in the array includes the specified search string using Typescript and protractor

How can I verify if each element in an array contains a specific search string in Typescript/Protractor? The issue I faced was that the console statements were returning false because they searched for exact matches instead of the search string. Any sugg ...

The type 'Data' is lacking the following attributes from its definition

Being a newcomer to Angular 8, I can't figure out why this error is popping up. If you have any suggestions on how to improve the code below, please feel free to share your tips. The error message reads: Type 'Data' is missing the follo ...

My initial venture into Solidity DApp development, Encounter of an Unresolved Runtime

As I embark on developing my inaugural Solidity DApp using Next.js and Hardhat, I've encountered a perplexing error. After successfully deploying my contract on a local blockchain via npx hardhat node, the issue arises when calling the getProposalCoun ...

Angular8 Material Grid displaying headers and tiles, experiencing slight resizing issue with mat-grid-tile content

Exploring Angular8 Material: Grid Layout with Headers and Tiles Currently, I am delving into the workings of the grid system within Angular Material. I am dynamically fetching components and organizing them within a grid. While the grid list and tiles are ...

What is the most effective way to refresh SCSS in a current Angular project?

I'm in the process of updating the SCSS version within my angular project. From the beginning, I selected scss in the angular cli for this project, so I have been using SCSS already. However, now I need to incorporate a spacing library that requires t ...

Guide to selecting a specific element in a loaded template depending on an *ngIf statement

I'm having trouble accessing an element in my template using a template variable as it keeps returning as undefined. At a specific route in my application, my component makes a call to fetch some data within the forkJoin method from rxjs. Due to the ...

The object may be 'null', and the argument of type 'null' cannot be passed as a parameter of type 'CloudProduct' in Angular

After successfully creating my backend API with functionalities to create, update, and delete products, I have been tasked with developing the frontend using Angular and Bootstrap. While I managed to make the homepage visually appealing, I encountered issu ...

Steps to automatically close a Bootstrap modal after redirection using RouterLink in Angular 6

Currently, I am working on my first Angular application. The issue I am facing involves a Bootstrap modal with a button that redirects to another section within the app. <button type="button" class="btn btn-info btn-lg" routerLink="/contactar">Cont ...

Encountering a POST 504 error while attempting to proxy an Angular application to a Node server

error message: Failed to connect to http://localhost:4200/api/user/login with a 504 Gateway Timeout error. Encountered this issue while attempting to set up a login feature in my Angular application and establish communication with the Express backend. Th ...

Managing animations with multiple components in Angular 2+

I am currently developing an Angular application that will utilize a series of Modals in a wizard-style setup. For this project, I am utilizing the Angular-cli tool. Below is the code snippet showing how I have set up my animations: animations:[ t ...

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

Behavior of routing not functioning as anticipated

In my app-routing.module.ts file, I have defined the following routes variable: const routes: Routes = [ { path: '', redirectTo: '/users', pathMatch: 'full' }, { path: 'users', component: UsersComponent }, ...

Angular - encountering challenges when implementing the native Web Speech API

My goal is to integrate the native Web Speech API directly without relying on any third-party libraries. I have successfully integrated the API into my service and voice recognition is functioning properly, able to generate text from recognized speech. Ho ...

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

Upon successful Google login, Angular 2 fails to initiate the callback function

import {Component,Directive,OnInit,NgZone} from 'angular2/core'; declare const gapi:any; declare const $:any; @Component({ selector: 'mysite', templateUrl:'./app/template.html' }) export class Test{ userAuthToken; ...

Is there a way to prevent vertical scrolling during left swipes in Ionic?

I am in the process of creating an Ionic mobile application, where the main view consists of a vertical list of cards. I would like each card to be "swipable" in a similar fashion to Google Now cards. I have begun implementing this functionality: $scope. ...

Unable to install a specific commit of an angular library from GitHub using npm

While utilizing Angular 2.0.0-beta.15, I encountered the inability to upgrade it. Thus, I had to search for a specific commit from the ng2-dnd library on GitHub. Upon locating a compatible commit for version 2.0.0-beta.17: "ng2-dnd": "git://github.com/ak ...

Comparing the use of Angular with Node.js and Nginx

Simply a question on my mind. In terms of benefits, which would be more advantageous: running my angular application through node with nginx as a reverse proxy or serving it directly from nginx? My intuition tells me that direct server from nginx would r ...

Using Keyof on a type combined with Record<string, unknown> results in missing properties and can cause errors when paired with Omit<T, K>

I encountered a situation that has left me unsure whether it is an actual issue or simply a misunderstanding on my part. Upon reviewing this code snippet: type Props = { foo: string bar: string } & Record<string, unknown> // Using Record< ...