CODEWITHSUNDEEP
angulartypescriptionic2tsconfig
sgcharlie
sgcharlie

Reputation: 1036

Ionic 2 / Typescript Build Fails: Unexpected character '@'

I'm having trouble with using my own typescript files that are outside of a ionic 2 project in the project. I have an auth module that I would like to use and it's just not working. I'm not sure if it's an issue with the typescript setup or ionic.

app.module.ts

import { NgModule } from '@angular/core';
import {IonicApp, IonicModule} from 'ionic-angular';
import { MyApp } from './app.component';
import { LoginComponent } from './login/login.component';
import {AuthModule} from "../../../web/src/shared/services/auth/auth.module";

@NgModule({
    declarations: [
        MyApp,
        LoginComponent
    ],
    imports: [
        IonicModule.forRoot(MyApp),
        AuthModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        LoginComponent
    ],
    providers: [
    ]
})
export class AppModule {}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["dom", "es2015"]
  },
  "exclude": ["node_modules"],
  "compileOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

auth.module.ts

import {NgModule} from "@angular/core";
import {HttpModule} from "@angular/http";
import {IdentityService} from "./identity.service";
import {IdentityEventService} from "./identity-event.service";
@NgModule({
    imports: [HttpModule],
    providers: [
        IdentityService,
        IdentityEventService
    ]
})
export class AuthModule {
}

I get the following error:

[14:34:24] bundle failed: Unexpected character '@' (5:0) in ..../web/src/shared/services/auth/auth.module.ts

So it appears as if it's finding the package but choking on the NgModule declaration. If I remove the reference to the auth.module, it works. I've added all of the packages that the auth module needs to my ionic project's package.json file so references shouldn't be an issue.

Let me know if there's any more relevant information that is needed to debug this.

Upvotes: 3

Views: 916

Answers (2)

JavierFuentes
JavierFuentes

Reputation: 1858

@lincoln comment to @jayraparla answer has saved my day...

I have executed this on my Ionic2 RC1 project...

$ grep -r \\.ts src/

... and I have found something like this in my AppModule generated by my IDE's automatic imports

import { mySubcomponent } from "./_path_/mySubcomponent.ts"

With ".ts", 

$ ionic serve

executes without errors, but after DELETE ".ts", and make other changes in my code as described here, I can execute again too

$ ionic build android

I hope this can help someone.

Upvotes: 0

Jay Raparla
Jay Raparla

Reputation: 45

Im making my first ionic2 app and had the same issue. I found that when i imported my providers(which were marked @injectable) to app.module.ts , they were imported as '../authservice.ts' etc instead of '../authservice'. Check if thats the case and remove .ts .. im on ionic 2.1.0

Upvotes: 2

Related Questions