Error "Unexpected character '@'" with webpack

[abakumov-v]

Hi everyone!

I'm found that webpack throw the next error after installing ng2-datepicker and importing in module.

I have an AppModule.ts and some other "business" modules. I'm import the DatePickerModule in one of modules - OperationsAreaModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
// == Other modules:
import { OperationsAreaRoutingModule } from './operations-area-routing.module';
// == ChartJS Angular2 module
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { AppModule } from '../../../modules/app.module';
import { PipesModule } from '../../../modules/pipes.module';
import { DatePickerModule } from 'ng2-datepicker';

import { OperationsAreaComponent } from './operations-area.component';
import { AddOperationComponent } from './add-operation/add-operation.component';
import { PanelOperationGroupsComponent } from './panel-operation-groups/panel-operation-groups.component';
import { FilterCalendarComponent } from './filter-calendar/filter-calendar.component';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        OperationsAreaRoutingModule,
        ChartsModule,
        PipesModule,
        DatePickerModule
    ],
    declarations: [
        OperationsAreaComponent,
        AddOperationComponent,
        PanelOperationGroupsComponent,
        FilterCalendarComponent,
    ],
    providers: [
        //HeroService
    ]
})
export class OperationsAreaModule { }

In FilterCalendarComponent I'm using ng2-datepicker:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'filter-calendar',
    templateUrl: './filter-calendar.html'
})
export class FilterCalendarComponent {
    date;

    datepickerOptions = {
        locale: 'ru',
        firstWeekdaySunday: false,
        //format: 'MM-DD-YYYY'
    };
}

Here is filter-component.html:

<ng2-datepicker [(ngModel)]="date"></ng2-datepicker>

And when I'm tryed compile my app throught webpack, I'm get this error:

Module parse failed: D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\ng2-datepicker\index.ts Unexpected character '@' (9:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (9:0)
    at Parser.pp$4.raise (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:2468:15)
    at Parser.pp$7.next (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:2413:10)
    at Parser.pp.eat (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:536:12)
    at Parser.pp.semicolon (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:581:15)
    at Parser.pp$1.parseExport (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:1199:12)
    at Parser.pp$1.parseStatement (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:719:71)
    at Parser.pp$1.parseTopLevel (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at D:\Projects\My\Git\SaveUp.New\src\Client\Client.Web.Spa\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:404:3)
 @ ./~/ng2-datepicker/ng2-datepicker.js 5:9-27

Here is my webpack.config part for loading *.ts files:

module: {
            loaders: [
                // Typescript loader
                {
                    test: /\.ts$/,
                    include: /ClientApp/,
                    loaders: ['awesome-typescript-loader', 'angular2-template-loader']
                    //loaders: ["ts-loader", "angular2-template-loader"]
                    //loader: "awesome-typescript-loader",
                    //loader: "ts",
                    //// Include only for ts-loader
                    //query: {
                    //    'ignoreDiagnostics': [
                    //        2403, // 2403 -> Subsequent variable declarations
                    //        2300, // 2300 -> Duplicate identifier
                    //        2374, // 2374 -> Duplicate number index signature
                    //        2375, // 2375 -> Duplicate string index signature
                    //        2502 // 2502 -> Referenced directly or indirectly
                    //    ]
                    //},
                    //exclude: [/node_modules\/(?!(ng2-.+))/]
                },

[abakumov-v]

I'm found reason. Error occurs because I'm restrict my ts loaders by folder "ClientApp" in this line in webpack.config:

include: /ClientApp/

If I comment out this line, the build is completed successfully.

If I'm doing this:

include: [
                        /ClientApp/,
                        /node_modules\/ng2-datepicker/
                    ],

then it does not work and still throws the same "Unexpected character '@'" error.

But if I'm doing this:

include: [
                        /ClientApp/,
                        /node_modules/
                    ],

then compile without errors.

P.S. To be honest i'm a beginner in Webpack, Typescript and Angular, and I don't know why this error "Unexpected character '@'" occured when I'm used only one folder in "include" section of ts laoder config. I would be happy if someone explained.

[sfmskywalker]

Thanks for sharing this, I ran into the exact same problem and your suggestion helped me fix it!

[maartentibau]

I think this might be a better solutions, just add ngx- prefix to the exclude.

module: {
  loaders: [
    // Typescript loader
    {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      exclude: [/node_modules\/(?!(ng2-.+|ngx-.+))/]
     },

     ....