Module parse failed [example]

[alienlike]

I am trying to run the example app on a Windows 7 box. I used the following commands:

npm run ngc
npm install -g angular-cli@1.0.0-beta.21
cd example
npm install
ng serve

Output of ng serve follows:

$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
4313ms building modules
13ms sealing
1ms optimizing
0ms basic module optimization
106ms module optimization
1ms advanced module optimization
6ms basic chunk optimization
0ms chunk optimization
1ms advanced chunk optimization
0ms module and chunk tree optimization
43ms module reviving
4ms module order optimization
2ms module id optimization
3ms chunk reviving
1ms chunk order optimization
7ms chunk id optimization
43ms hashing
2ms module assets processing
90ms chunk assets processing
3ms additional chunk assets processing
1ms recording
0ms additional asset processing
1075ms chunk asset optimization
66ms asset optimization
29ms emitting
Hash: 15c37587dad06e68f597
Version: webpack 2.1.0-beta.25
Time: 5824ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.71 MB    0, 2  [emitted]  main
 styles.bundle.js    15.1 kB    1, 2  [emitted]  styles
 inline.bundle.js    5.54 kB       2  [emitted]  inline
  main.bundle.map    2.82 MB    0, 2  [emitted]  main
styles.bundle.map    20.9 kB    1, 2  [emitted]  styles
inline.bundle.map     5.6 kB       2  [emitted]  inline
       index.html  513 bytes          [emitted]

ERROR in ./src/app/ng2-ol
Module parse failed: D:\Projects\angular2-openlayers\example\src\app\ng2-ol Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| ../../../src/
 @ ./src/app/app.module.ts 14:0-51
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.85 kB       0
webpack: bundle is now VALID.
[default] Checking started in a separate process...
[default] D:\Projects\angular2-openlayers\example\src\app\app.module.ts:5:41
    Cannot find module './ng2-ol'.
[default] Checking finished with 1 errors

[quentin-ol]

Oh gosh, ng2-ol is a symlink to src ! Symlinks and windows do not play well along. One way to fix it would be to use relative paths, i.e. ../../../dist/ but I'm not a big fan of this solution as relative paths are keen to create weirds bugs. I'd prefer the example (which is an angular-cli project) to depend on the angular2-openlayers NPM package. Opinions ?

[alienlike]

Aha. I wondered what ng2-ol was exactly.

My concern with using the NPM package as opposed to a relative path is that the NPM package will not necessarily be current with the cloned repo.

[quentin-ol]

@alienlike exactly. This argument goes in favour of relative paths. @FallenRiteMonk opinion?

[FallenRiteMonk]

@alienlike sorry the one with the symlink goes on me. @quentin-ol I used to have this as relative path, but the reason I changed it to the symlink was due to a error when running the example with ng serve --aot as the compiler wouldn't compile modules out side the example/src dir, because it would handle it like modules from node_modules folder and they have to be already compiled with ngc in order for aot to work. In my point of view there are two solutions:

• get the example to work with the compiled library from the dist folder instead of the source from the src folder. I would prefer this, but I can remember that I also had some problems with aot (sorry but can't exactly remember what problem).
• move the example (angular-cli) to the root of the library and make the src folder a sub folder in the example/cli-app. This should then work perfectly fine, only that the repo then would be some kind of example app containing a library which is published. I don't know how preferred that would be, plus some stuff like the prepublish script would have to be changed to something that would build everything and then strip away all the unneeded example stuff.

[quentin-ol]

@FallenRiteMonk I had the same issue you described regarding making ngc find the dist files outside of the example directory. The second solution is somewhat misleading for someone interested in the library.

I believe the best option is to make the example rely on the NPM package. You're right that this is prone to mishaps though. If that bites us too often, we'll reopen this issue and find another way