Incompatibility of @ngtools/webpack@1.2.6 with angular-cli@1.0.0-beta.26

[darkkean]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

OSX El Capitan

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.26
node: 7.4.0
os: darwin x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/compiler-cli: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/platform-server: 2.4.5
@angular/router: 3.4.5
@ngtools/json-schema: 1.0.1
@ngtools/webpack: 1.2.4

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Yes

The log given by the failure.

Normally this include a stack trace and some more information.

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:14546:109)
    at parseSourceFileWorker (/frontend-ng2/node_modules/typescript/lib/typescript.js:14478:26)
    at Object.parseSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:14427:26)
    at Object.createSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:14282:29)
    at WebpackCompilerHost.getSourceFile (/frontend-ng2/node_modules/@ngtools/webpack/src/compiler_host.js:293:27)
    at findSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:63447:29)
    at processSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:63378:27)
    at /frontend-ng2/node_modules/typescript/lib/typescript.js:63488:17
    at Object.forEach (/frontend-ng2/node_modules/typescript/lib/typescript.js:1293:30)
    at processReferencedFiles (/frontend-ng2/node_modules/typescript/lib/typescript.js:63486:16)
    at findSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:63471:21)
    at processSourceFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:63378:27)
    at processRootFile (/frontend-ng2/node_modules/typescript/lib/typescript.js:63265:13)
    at /frontend-ng2/node_modules/typescript/lib/typescript.js:62614:60
    at Object.forEach (/frontend-ng2/node_modules/typescript/lib/typescript.js:1293:30)
    at Object.createProgram (/frontend-ng2/node_modules/typescript/lib/typescript.js:62614:16)
    at AotPlugin._setupOptions (/frontend-ng2/node_modules/@ngtools/webpack/src/plugin.js:161:28)
    at new AotPlugin (/frontend-ng2/node_modules/@ngtools/webpack/src/plugin.js:21:14)
    at Object.exports.getWebpackNonAotConfigPartial (/frontend-ng2/node_modules/angular-cli/models/webpack-build-typescript.js:25:13)
    at new NgCliWebpackConfig (/frontend-ng2/node_modules/angular-cli/models/webpack-config.js:41:46)
    at Class.run (/frontend-ng2/node_modules/angular-cli/tasks/serve-webpack.js:23:22)
    at /frontend-ng2/node_modules/angular-cli/commands/serve.run.js:37:22
    at process._tickCallback (internal/process/next_tick.js:103:7)

Mention any other details that might be useful.

My package.json's dependencies are:

"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/compiler-cli": "^2.4.3",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/platform-server": "^2.4.3",
    "@angular/router": "~3.4.0",
    "@ng-idle/core": "^2.0.0-beta.4",
    "@ng-idle/keepalive": "^2.0.0-beta.4",
    "core-js": "^2.4.1",
    "moment": "^2.13.0",
    "ng2-bootstrap": "^1.0.22",
    "ng2-device-detector": "^0.1.0",
    "numeral": "^2.0.4",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "typescript": "^2.0.10",
    "zone.js": "^0.7.4"
  },

In order to run a successful ng serve, I would need to explicitly set which version of @ngtools/webpack to download. So I downgraded it back to: 1.2.4.

"@ngtools/webpack": "1.2.4",

---

Thanks! We'll be in touch soon.

[RicardoVaranda]

This is an issue with a recent change in @ngtools/webpack

I would recommend if possible to update angular cli to the latest version with the following commands:

npm uninstall -g angular-cli
npm clear cache
npm install -g @angular/cli

Navigate to your project directory and do the following command:

ng init

[ryan-morris]

@RicardoVaranda , I tried your suggestion and now am getting the below with ng serve

�[?25h** NG Live Development Server is running on http://localhost:4200. **
Hash: �[1m719800056e4dced77c33�[39m�[22m
Time: �[1m23128�[39m�[22mms
chunk    {�[1m�[33m0�[39m�[22m} �[1m�[32mmain.bundle.js, main.bundle.map�[39m�[22m (main) 1.32 MB {�[1m�[33m4�[39m�[22m}�[1m�[33m [initial]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
chunk    {�[1m�[33m1�[39m�[22m} �[1m�[32mpolyfills.bundle.js, polyfills.bundle.map�[39m�[22m (polyfills) 419 kB {�[1m�[33m5�[39m�[22m}�[1m�[33m [initial]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
chunk    {�[1m�[33m2�[39m�[22m} �[1m�[32mstyles.bundle.js, styles.bundle.map�[39m�[22m (styles) 245 kB {�[1m�[33m5�[39m�[22m}�[1m�[33m [initial]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
chunk    {�[1m�[33m3�[39m�[22m} �[1m�[32mscripts.bundle.js, scripts.bundle.map�[39m�[22m (scripts) 31 kB {�[1m�[33m5�[39m�[22m}�[1m�[33m [initial]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
chunk    {�[1m�[33m4�[39m�[22m} �[1m�[32mvendor.bundle.js, vendor.bundle.map�[39m�[22m (vendor) 4.78 MB�[1m�[33m [initial]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m
chunk    {�[1m�[33m5�[39m�[22m} �[1m�[32minline.bundle.js, inline.bundle.map�[39m�[22m (inline) 0 bytes�[1m�[33m [entry]�[39m�[22m�[1m�[32m [rendered]�[39m�[22m

�[1m�[31mERROR in ./~/@angular/core/src/util/decorators.js
Module parse failed: C:\project\node_modules\@angular\core\src\util\decorators.js Parenthesized pattern (156:12)
You may need an appropriate loader to handle this file type.
|     if (clsDef.hasOwnProperty('extends')) {
|         if (typeof clsDef.extends === 'function') {
|             ((constructor)).prototype = proto =
|                 Object.create(((clsDef.extends)).prototype);
|         }
 @ ./~/@angular/core/src/util.js 9:0-42
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/core/src/di/forward_ref.js
Module parse failed: C:\project\node_modules\@angular\core\src\di\forward_ref.js Parenthesized pattern (24:4)
You may need an appropriate loader to handle this file type.
|  */
| export function forwardRef(forwardRefFn) {
|     ((forwardRefFn)).__forward_ref__ = forwardRef;
|     ((forwardRefFn)).toString = function () { return stringify(this()); };
|     return (((forwardRefFn)));
 @ ./~/@angular/core/src/di.js 14:0-65
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/core/src/facade/errors.js
Module parse failed: C:\project\node_modules\@angular\core\src\facade\errors.js Parenthesized pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/core/src/application_ref.js 15:0-53
 @ ./~/@angular/core/src/core.js
 @ ./~/@angular/core/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/compiler/src/aot/static_reflector.js
Module parse failed: C:\project\node_modules\@angular\compiler\src\aot\static_reflector.js Parenthesized pattern (793:4)
You may need an appropriate loader to handle this file type.
| function positionalError(message, fileName, line, column) {
|     var /** @type {?} */ result = new Error(message);
|     ((result)).fileName = fileName;
|     ((result)).line = line;
|     ((result)).column = column;
 @ ./~/@angular/compiler/index.js 30:0-61
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/compiler/src/jit/compiler.js
Module parse failed: C:\project\node_modules\@angular\compiler\src\jit\compiler.js Parenthesized pattern (283:12)
You may need an appropriate loader to handle this file type.
|             assertComponent(compMeta);
|             var /** @type {?} */ HostClass = function HostClass() { };
|             ((HostClass)).overriddenName = identifierName(compMeta.type) + "_Host";
|             var /** @type {?} */ hostMeta = createHostComponentMeta(HostClass, compMeta);
|             compiledTemplate = new CompiledTemplate(true, compMeta.selector, compMeta.type, hostMeta, ngModule, [compMeta.type]);
 @ ./~/@angular/compiler/index.js 36:0-49
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/platform-browser/src/browser/browser_adapter.js
Module parse failed: C:\project\node_modules\@angular\platform-browser\src\browser\browser_adapter.js Parenthesized pattern (88:75)
You may need an appropriate loader to handle this file type.
|      * @return {?}
|      */
|     BrowserDomAdapter.prototype.setProperty = function (el, name, value) { ((el))[name] = value; };
|     /**
|      * @param {?} el
 @ ./~/@angular/platform-browser/src/browser.js 12:0-62
 @ ./~/@angular/platform-browser/src/platform-browser.js
 @ ./~/@angular/platform-browser/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/platform-browser/src/dom/dom_renderer.js
Module parse failed: C:\project\node_modules\@angular\platform-browser\src\dom\dom_renderer.js Parenthesized pattern (321:8)
You may need an appropriate loader to handle this file type.
|      */
|     DomRenderer.prototype.setElementProperty = function (renderElement, propertyName, propertyValue) {
|         ((renderElement))[propertyName] = propertyValue;
|     };
|     /**
 @ ./~/@angular/platform-browser/src/browser.js 18:0-71
 @ ./~/@angular/platform-browser/src/platform-browser.js
 @ ./~/@angular/platform-browser/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/router/src/apply_redirects.js
Module parse failed: C:\project\node_modules\@angular\router\src\apply_redirects.js Parenthesized pattern (330:20)
You may need an appropriate loader to handle this file type.
|             if (route.loadChildren) {
|                 return map.call(this.configLoader.load(injector, route.loadChildren), function (r) {
|                     ((route))._loadedConfig = r;
|                     return new UrlSegmentGroup(segments, {});
|                 });
 @ ./~/@angular/router/src/router.js 19:0-51
 @ ./~/@angular/router/src/index.js
 @ ./~/@angular/router/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/compiler/src/facade/errors.js
Module parse failed: C:\project\node_modules\@angular\compiler\src\facade\errors.js Parenthesized pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/compiler/src/util.js 13:0-44
 @ ./~/@angular/compiler/index.js
 @ ./~/@angular/platform-browser-dynamic/src/platform-browser-dynamic.js
 @ ./~/@angular/platform-browser-dynamic/index.js
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/json3/lib/json3.js
Module parse failed: C:\project\node_modules\json3\lib\json3.js Parenthesized pattern (89:12)
You may need an appropriate loader to handle this file type.
|           if (stringifySupported) {
|             // A test function object with a custom `toJSON` method.
|             (value = function () {
|               return 1;
|             }).toJSON = value;
 @ ./~/sockjs-client/lib/main.js 7:12-28
 @ ./~/sockjs-client/lib/entry.js
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:4200/
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m

�[1m�[31mERROR in ./~/@angular/common/src/facade/errors.js
Module parse failed: C:\project\node_modules\@angular\common\src\facade\errors.js Parenthesized pattern (60:32)
You may need an appropriate loader to handle this file type.
|          * @return {?}
|          */
|         set: function (value) { ((this._nativeError)).stack = value; },
|         enumerable: true,
|         configurable: true
 @ ./~/@angular/common/src/pipes/invalid_pipe_argument_error.js 13:0-45
 @ ./~/@angular/common/src/pipes/async_pipe.js
 @ ./~/@angular/common/src/pipes/index.js
 @ ./~/@angular/common/src/common.js
 @ ./~/@angular/common/index.js
 @ ./~/@ng-bootstrap/ng-bootstrap/alert/alert.module.js
 @ ./~/@ng-bootstrap/ng-bootstrap/index.js
 @ ./src/app/dashboard/dashboard.component.ts
 @ ./src/app/dashboard/index.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts�[39m�[22m
webpack: Failed to compile.

[dsoltesz]

I am getting the same type of parse errors now as well after updating

angular-cli: 1.0.0-beta.28.3
node: 6.9.5
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5
@angular/flex-layout: 2.0.0-beta.4

[beeman]

It's probably related to this issue, and the fix: #4378 (comment)

[AbbTek]

In my case, I solved the problem updating my project and keeping "rxjs": "5.0.1" rather than "rxjs": "^5.0.3". Now the project is working again :D

[darkkean]

Tried suggestions from @RicardoVaranda @beeman, but unfortunately still not working and getting the same exact error:

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined

1. Run rm -rf node_modules dist
2. Installed angular-cli 1.0.0-beta.28.3 both project local and global
3. Run ng update
4. Installed acorn@4.0.7 on project local

However none fixed the issue.

[RicardoVaranda]

@darkkean Can you post your angular-cli.json and rest of error stack please.

Latest version is beta.30, you can get this by installing the @angular/cli instead of angular-cli

In regards to the error this seems like an error that was around when upgrading from quite old cli projects where the styles prop was not an array.

[jorude]

@darkkean Please note this line in the first post: "@ngtools/webpack": "1.2.4", it solved the problem for me.

[beeman]

@darkkean can you please try with the latest @angular/cli@1.0.0.beta.30, then and remove node_modules and npm install ?

If that does not work, can you share you package.json?

[bkdotcom]

I'm attempting to migrate from the tour-of-heroes/system.js way of doing things to angular-cli. and stuck on ng serve 'TypeError: Cannot read property 'length' of undefined'
No idea if the error is on my end or with tooling

Edit # 3: Solved: I didn't have the src/assets and src/environments folders (they were created, I just didn't copy them over)

[filipesilva]

Dupe of #4378.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}