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

Question

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.

I have the same problem. "ionic serve" works, "ionic build" fails with this unexpected character exception — Chris, Oct 21 '16 at 13:05

score 2 · Answer 1 · answered Oct 28 '16 at 16:22

2

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

answered Oct 28 '16 at 16:22

Jay Raparla

45
1
7

This solved my issue. I had to run this to find where I had imported the file incorrectly: $ grep -r \\.ts src/ – Lincoln Nov 01 '16 at 00:34

score 0 · Answer 2 · edited May 23 '17 at 12:17

@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.

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

2 Answers2