TypeError: Cannot read property 'message' of undefined

[marmelin]

Versions

$ ng --version
Angular CLI: 1.5.4
Node: 8.9.1
OS: linux x64
Angular: 5.0.3
... core
@angular/cli: 1.5.4
@angular/common: 5.0.1
@angular/compiler-cli: 5.0.1
@angular/compiler: 5.0.1
@angular/platform-browser-dynamic: 5.0.1
@angular/platform-browser: 5.0.1
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.7
typescript-register: 1.1.0
typescript-require: 0.2.9
typescript: 2.6.1
webpack-config: 7.5.0
webpack-dev-server: 2.9.4
webpack-node-externals: 1.6.0
webpack-stream: 4.0.0
webpack: 3.8.1

LInux: Ubuntu 16.04.3 LTS - 4.10.0-40-generic #44~16.04.1-Ubuntu SMP - x86_64

Repro steps

Use my config and app-files below.

Observed behavior

 build [=================   ] 86%
/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:1312
                this.errors.forEach(function(error) {

              ^
TypeError: Cannot read property 'message' of undefined
    at /home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:1313:25
    at Array.forEach (<anonymous>)
    at Compilation.createHash (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:1312:15)
    at sealPart2 (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:645:9)
    at next (/home/python1/Dokumente/development/git/v2-web-client/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/ProgressPlugin.js:111:6)
    at Compilation.applyPluginsAsyncSeries (/home/python1/Dokumente/development/git/v2-web-client/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compiler.js:508:17)
    at /home/python1/Dokumente/development/git/v2-web-client/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/home/python1/Dokumente/development/git/v2-web-client/node_modules/webpack/lib/Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

Desired behavior

AOT compilation of my source code.

Mention any other details that might be useful (optional)

webpack.config.ts (main part for aot compiler)

 ...
  , plugins: [
      new ProgressPlugin()
    , new HtmlWebpackPlugin({
        inject: false
        , template: helpers.getPath('config/webpack/index.ejs')
        , title: 'Webapp V2'
        , filename: 'index.html'
    })
  , new AngularCompilerPlugin({
        tsConfigPath: helpers.getPath('tsconfig.json')
        , entryModule: helpers.getPath('src/client/web.module#AppComponent')
    })
  ]
, module: {
    rules: [
        { test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/ , loader: '@ngtools/webpack' }
      , { test: /\.html$/ , loader: "raw-loader" , exclude: /\.async\.html$/ }
      , { test: /\.css$/ , loader: ['css-loader'] }
   ]
  }

web.main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {enableProdMode} from '@angular/core';
import { WebModule } from './web.module';
platformBrowserDynamic().bootstrapModule(WebModule /*, options*/)
  .catch(err => console.log(err));

web.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_COMPONENTS, AppComponent } from './app/components/index.components';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ APP_COMPONENTS ],
  bootstrap: [ AppComponent ]
})
export class WebModule { }

app.component.ts

import { Component } from '@angular/core';
@Component ({
   moduleId: module.id.toString()
  , selector: 'aslingo-app'
  , templateUrl: 'app.component.html'
  , styleUrls: ['app.component.css']
})

export class AppComponent {  title = 'title is that'; }

index.components.ts

import { AppComponent } from './app.component';
export const APP_COMPONENTS: any[] = [  AppComponent ];
export * from './app.component';

• The app compiles perfectly with "awesome-typescript-compiler" without AOT.
• It does compile with "skipCodeGeneration: true" (ngctools/webpack), but with errors:

ERROR in Error: No NgModule metadata found for 'AppComponent'.
    at NgModuleResolver.resolve (/home/python1/Dokumente/development/git/v2-web-client/node_modules/packages/compiler/esm5/src/ng_module_resolver.js:50:12)
    at CompileMetadataResolver.getNgModuleMetadata (/home/python1/Dokumente/development/git/v2-web-client/node_modules/packages/compiler/esm5/src/metadata_resolver.js:641:58)
    at visitLazyRoute (/home/python1/Dokumente/development/git/v2-web-client/node_modules/packages/compiler/esm5/src/aot/compiler.js:757:14)
    at AotCompiler.listLazyRoutes (/home/python1/Dokumente/development/git/v2-web-client/node_modules/packages/compiler/esm5/src/aot/compiler.js:725:17)
    at AngularCompilerProgram.listLazyRoutes (/home/python1/Dokumente/development/git/v2-web-client/packages/compiler-cli/src/transformers/program.ts:194:26)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/python1/Dokumente/development/git/v2-web-client/packages/compiler-cli/src/ngtools_api.ts:95:34)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/home/python1/Dokumente/development/git/v2-web-client/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:246:66)
    at Promise.resolve.then.then (/home/python1/Dokumente/development/git/v2-web-client/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:542:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Thanks for any help.

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please? Custom webpack configurations can have any subtle details so a partial config isn't enough.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[marmelin]

Thanks @filipesilva .

I setup an repository on GitHup to reproduce the error:

ngtools-webpack-error-message-undefined

New research results can also be documented in the README.md file - under section "RESEARCH RESULTS". I already added one :). So we can keep this thread as clear as possible.

After a short glimpse at the code, I found that the error.message is not defined, but did not find the source line, where it should get the error.

[marmelin]

✅ [SOLVED] AOT working with webpack 3 and ngtools/webpack

So it was all about these things:

• You can't use extract-text-webpack-plugin for components CSS templates, because it does not support / or do not function with "Child compilations". However you can with global css.
  Use two CSS rules in webpack config: 1) with "css-loader" and second with extract-text-webpack-plugin and include statement, for your global CSS files.

  // COMPONENT CSS LOADER
      , { test: /\.css$/
        , use: ['css-to-string-loader'].concat(['css-loader'])
        }
      // GLOBAL CSS LOADER
      , { test: /\.css$/
         , include: helpers.getPath('src/client/style')
         , use: ['css-to-string-loader'].concat(
            ExtractTextPlugin.extract({
                fallback: 'style-loader'
              , use: ['css-loader']
            })
          )
        }

I had to use "css-to-string-loader" to get rid of "Loader expecting string array"-error!

• I used the wrong module (like the one with "NgModules" definitions instead of the main module with bootstrap for "mainPath" and "entryModule" options.
  --This is why I got No **NgModule** metadata found for 'AppComponent' error - in JIT MODE (skipCodeGeneration:true)
• I wrote the path to main file like a module import in "mainPath" option - means without ".ts" at the end! ("web.main" instead of "web.main.ts"). This leads to Cannot read property length of undefined and ...message of undefined... errors.

All things can be reproduced in the following ErrorProject on GitHub:
ErrorProject: ngtools-wepback-message-undefined

Thanks for contributing. Maybe the documentation could be more precisely on some points, that would help beginners to use modules more quickly.

But the Angular-Team makes great work - thanks for your effort!

[filipesilva]

Heya, the solution you came to is pretty much what we do: https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/models/webpack-configs/styles.ts#L186-L218

We load global styles 'normally' but component styles as raw strings.

I agree this isn't common knowledge. Would you be available to making a PR adding this information to https://github.com/angular/angular-cli/blob/master/packages/@ngtools/webpack/README.md?

[chris13524]

I'm getting a similar error:

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 88% hashing/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:1313
                        hash.update(`${error.message}`);
                                             ^

TypeError: Cannot read property 'message' of undefined
    at /home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:1313:25
    at Array.forEach (<anonymous>)
    at Compilation.createHash (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:1312:15)
    at sealPart2 (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:645:9)
    at next (/home/chris13524/programming/coconut/client/node_modules/tapable/lib/Tapable.js:202:11)
    at Compilation.compilation.plugin (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/ProgressPlugin.js:111:6)
    at Compilation.applyPluginsAsyncSeries (/home/chris13524/programming/coconut/client/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:605:8)
    at applyPluginsParallel.err (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compiler.js:504:17)
    at /home/chris13524/programming/coconut/client/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:507:11)
    at processModuleDependencies.err (/home/chris13524/programming/coconut/client/node_modules/webpack/lib/Compilation.js:477:14)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

[chris13524]

I'm not using custom webpack config. This error only shows up when I add --aot to ng serve. It does not occur with just plain ng serve.

[adamelliotfields]

I'm running a custom Webpack config using @ngtools/webpack that is modeled after the CLI. I've got exports-loader for Sass files and raw-loader for HTML templates just like the CLI. Works great.

I just started a new project using this config, except now I'm getting this error. I compared my package.json with my previous project and noticed raw-loader gets installed as 1.0.0-beta.0 by default now. Downgrading to 0.5.1 resolved it.

So if you're getting this error, and you've checked all the other boxes, check to see what version of raw-loader you've got installed.

Hopefully this saves somebody a few hours :)