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.

Answer 1

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