Module parse failed

[cschroeter]

Since a few days this starter project comes up with an error message after I've installed angular2-moment.

ERROR in ./~/angular2-moment/TimeAgoPipe.ts
Module parse failed: /Users/cschroeter/Projects/Playground/angular2-webpack-starter/node_modules/angular2-moment/TimeAgoPipe.ts Line 3: Unexpected token
You may need an appropriate loader to handle this file type.
| /* angular2-moment (c) 2015, 2016 Uri Shaked / MIT Licence */
| 
| import {Pipe, ChangeDetectorRef, PipeTransform, OnDestroy} from 'angular2/core';
| import * as moment from 'moment';
| 
 @ ./src/app/home/home.ts 13:20-58

What I did?

npm i angular2-moment --save


// home.ts
import {TimeAgoPipe} from 'angular2-moment/TimeAgoPipe';
...
pipes: [TimeAgoPipe]

Do you have any idea what the problem could be?

[PatrickJS]

https://github.com/AngularClass/angular2-webpack-starter/blob/master/webpack.config.js#L55
remove the part where it's excluding node_modules

[cschroeter]

Wow that was the fastest reply I've ever gotten :D

Could you explain what the purpose is of helpers.root('node_modules') and why it fails with the angular2-moment plugin?

[PatrickJS]

the angular2-moment module is exposing the typescript files directly when it should only be the js files. because of this you need to make sure the typescript loader can see the files (because I excluded them) which means you take a small perf hit now that the typescript loader needs to parse all .ts files in node_modules

[cschroeter]

Thanks man !

[urish]

@gdi2290 do you have any other examples of TypeScript modules which only expose the js files? I am trying to find whether there is any kind of best practice.

@cschroeter another solution that could work would be to implicitly reference the js file in your code:

import {TimeAgoPipe} from 'angular2-moment/TimeAgoPipe.js';

[cschroeter]

@urish Unfortunately this leads to Cannot find module 'angular2-moment/TimeAgoPipe.js'.

By the way - using angular2-jwt also causes a module parse error.
Maybe it is "okay" to include node_modules so people don't struggle with this. @gdi2290 Your thoughts on this?

[dweitz43]

i have experienced a similar issue to #402 attempting to load css into the App component from ng2-toasty in node_modules, and can work around it by removing node_modules from the exclude array of the css loader, but i realize this causes performance issues and probably is not an optimal production solution.

Does anyone have an idea of how I should be attempting to load css from node_modules correctly so that I could still exclude node_modules in the css loader? Do I need to load the css from the assets directory instead?

[BrainCrumbz]

@gdi2290 could you please point to a recent version of webpack config file with the offending line? Or maybe fix the link with the version at that time? Thank you!