Errors in Angular2 (Angular cli) application after updating from 1.6.1 to version 1.7.0

Hi, I am using linqts within an angular-cli project. There is a problem with linqts, since I updated from 1.6.1 to 1.7.0. I am not sure, if it is a webpack or angular-cli problem - or just my fault. Maybe someone here can help.

system: windows 7 node: v7.3.0 npm: 4.0.2

My project uses angular-cli version 1.0.0-beta.24. When updating linqts to version 1.7.0, the angular 2 app throws this error:

zone.js:682Uncaught Error: Cannot find module "."
    at webpackMissingModule (linq.js:8) [<root>]
    at List.List.elements (linq.js:8) [<root>]
    at Object.<anonymous> (linq.js:13) [<root>]
    at __webpack_require__ (bootstrap c8b9130…:52) [<root>]
    at Object.481 (main.ts:12) [<root>]
    at __webpack_require__ (bootstrap c8b9130…:52) [<root>]
    at Object.482 (app.component.ts:24) [<root>]
    at __webpack_require__ (bootstrap c8b9130…:52) [<root>]
    at Object.372 (src async:7) [<root>]
    at __webpack_require__ (bootstrap c8b9130…:52) [<root>]
    at Object.694 (main.bundle.js:223) [<root>]
    at __webpack_require__ (bootstrap c8b9130…:52) [<root>]
    at webpackJsonpCallback (bootstrap c8b9130…:23) [<root>]
    at :4200/main.bundle.js:1:1 [<root>]
ZoneAwareError @ zone.js:682
webpackMissingModule @ linq.js:8
List.List.elements @ linq.js:8
(anonymous) @ linq.js:13
__webpack_require__ @ bootstrap c8b9130…:52
481 @ main.ts:12
__webpack_require__ @ bootstrap c8b9130…:52
482 @ app.component.ts:24
__webpack_require__ @ bootstrap c8b9130…:52
372 @ src async:7
__webpack_require__ @ bootstrap c8b9130…:52
694 @ main.bundle.js:223
__webpack_require__ @ bootstrap c8b9130…:52
webpackJsonpCallback @ bootstrap c8b9130…:23
(anonymous) @ main.bundle.js:1

To reproduce the Problem create a dummy project with:

  npm install -g webpack
  npm install -g webpack-dev-server
  npm install -g angular-cli
  ng new linqtstest
  cd linqtstest
  npm install linqts@latest -D

Replace the file linqtstest\src\app\app.component.ts with some linqts :

  import { Component } from '@angular/core';
  import { List, Enumerable } from 'linqts';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    name: string;
    private linqs: string[];
    constructor() {
      this.name = 'LinqTs + Angular2'
      this.linqs = Enumerable
        .Range(1, 5)
        .Select(i => 'LinqTs ' + i)
        .ToArray();
    }

    foo(l: string): void {
      console.log(l);
      alert(l)
    }
  }

Replace the file linqtstest\src\app\app.component.html with the following

  <div>
    <h2>Hello {{name}}</h2>
      <button *ngFor="let l of linqs" (click)="foo(l)" md-fab>
          <span>{{l}}</span>
      </button>
  </div>

Run the dummy project with:

  ng serve

The app should now run on http://localhost:4200 and You should see the described error. The same app with linqts version 1.6.1 runs without any errors.

[zskovacs]

I could reproduce your problem. It looks like WebPack cannot load linq.ts if it is compiled as UMD module. If I recompile it to commonjs, then it works fine. But I’m not sure this is a linq.ts problem. I tried it with SystemJS and it could handle it even if I used it as UMD.

[kentcdodds]

Hey @kutyel, I generally distribute a UMD version as well as a CommonJS version of my modules. Watch this for more info. One important bit that’s not noted in the video is that your package.json main is set to the CommonJS version. Also, in my video I’m using babel to generate the CommonJS version of my module, but you could use webpack to do this as well (if you need any loaders to run as part of your build for example).

Good luck!