Angular-cli: ERROR in Cannot read property 'getSourceFile' of undefined

Created on 9 Mar 2017  Â·  20Comments  Â·  Source: angular/angular-cli

Hi, I am trying to configure webpack in order to work with AOT, however I am getting this error. I tried with changing versions but without success, in some cases I even got more errors.

OS?

Windows 10

Versions.

Node: v7.6.0
@ngtools/webpack: 1.2.12

Repro steps.

https://github.com/milenkovic/webpack-angular-aot
npm install
npm run project-aot

The log given by the failure.

ERROR in Cannot read property 'getSourceFile' of undefined

ERROR in C:/Workspace/webpack-aot/public/javascripts/core/projects/main.aot.ts (3,34): Cannot find module './ngfactory/public/javascripts/core/projects/app.module.ngfactory'.)

ERROR in ./public/javascripts/core/projects/main.aot.ts
Module not found: Error: Can't resolve './ngfactory/public/javascripts/core/projects/app.module.ngfactory' in 'C:\Workspace\webpack-aot\public\javascripts\core\projects'
@ ./public/javascripts/core/projects/main.aot.ts 3:0-103

investigation

Most helpful comment

I'm on Windows 10 using @ngtools/webpack:1.3.0. I can confirm @maffelbaffel's fix works.

You can paste this into your webpack.config.js and avoid touching the node_modules folder, especially useful for automated deployment scenarios:

// workaround https://github.com/angular/angular-cli/issues/5329
var aotPlugin = new ngToolsWebpack.AotPlugin({
    tsConfigPath: "./tsconfig.aot.json",
    entryModule: path.resolve(__dirname, "./ClientApp/components/main.module#MainModule"),
});
aotPlugin._compilerHost._resolve = function(path_to_resolve) {
    path_1 = require("path");
    path_to_resolve = aotPlugin._compilerHost._normalizePath(path_to_resolve);
    if (path_to_resolve[0] == '.') {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost.getCurrentDirectory(), path_to_resolve));
    }
    else if (path_to_resolve[0] == '/' || path_to_resolve.match(/^\w:\//)) {
        return path_to_resolve;
    }
    else {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost._basePath, path_to_resolve));
    }
};

All 20 comments

The error lies in node_modules\@ngtools\webpack\src\compiler_host.js in function _resolve(path), when the operating system is Windows.
In some cases, this function calls to path.join, which returns a normalized path under the current OS, which does not correspond to the idea of _resolve function to replace backslashes with normal slashes.
Until a new version with this fix appears, you can replace manually that function with the code as follows:
_resolve(path) {
path = this._normalizePath(path);
if (path[0] == '.') {
return this._normalizePath(path_1.join(this.getCurrentDirectory(), path));
}
else if (path[0] == '/' || path.match(/^\w:\//)) {
return path;
}
else {
return this._normalizePath(path_1.join(this._basePath, path));
}
}
After this, the problem disappears.

horrible error message

This error literally cost me 5 hours debugging. Replacing with
_resolve(path) { path = this._normalizePath(path); if (path[0] == '.') { return this._normalizePath(path_1.join(this.getCurrentDirectory(), path)); } else if (path[0] == '/' || path.match(/^\w:\//)) { return path; } else { return this._normalizePath(path_1.join(this._basePath, path)); } }
solved it for me thought.

@Dobryvechir's code was missing a backslash:
else if (path[0] == '/' || path.match(/^\w://)) { ^ SyntaxError: Unexpected token )

I have the same problem. After changing this method, the error persists:

ERROR in Cannot read property 'getSourceFile' of undefined

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/utils/hmac-http-client.ts (39,63): Cannot find name 'CryptoJS'.)
/home/arlindo/git/vendedoronline/frontend/src/app/utils/hmac-http-client.ts (41,63): Cannot find name 'CryptoJS'.)
/home/arlindo/git/vendedoronline/frontend/src/app/utils/hmac-http-client.ts (43,63): Cannot find name 'CryptoJS'.)

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/security/securityToken.ts (5,9): Cannot find name '_'.)

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/account/account.ts (12,13): Cannot find name '_'.)

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/empresa/empresa.ts (11,13): Cannot find name '_'.)

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/fabricante/fabricante.ts (10,13): Cannot find name '_'.)

ERROR in /home/arlindo/git/vendedoronline/frontend/src/app/linha/linha.ts (10,13): Cannot find name '_'.)

The references:

///<reference path="../../../typings/cryptojs/cryptojs.d.ts" />
///<reference path="../../../typings/lodash/lodash.d.ts" />

I'm on Windows 10 using @ngtools/webpack:1.3.0. I can confirm @maffelbaffel's fix works.

You can paste this into your webpack.config.js and avoid touching the node_modules folder, especially useful for automated deployment scenarios:

// workaround https://github.com/angular/angular-cli/issues/5329
var aotPlugin = new ngToolsWebpack.AotPlugin({
    tsConfigPath: "./tsconfig.aot.json",
    entryModule: path.resolve(__dirname, "./ClientApp/components/main.module#MainModule"),
});
aotPlugin._compilerHost._resolve = function(path_to_resolve) {
    path_1 = require("path");
    path_to_resolve = aotPlugin._compilerHost._normalizePath(path_to_resolve);
    if (path_to_resolve[0] == '.') {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost.getCurrentDirectory(), path_to_resolve));
    }
    else if (path_to_resolve[0] == '/' || path_to_resolve.match(/^\w:\//)) {
        return path_to_resolve;
    }
    else {
        return aotPlugin._compilerHost._normalizePath(path_1.join(aotPlugin._compilerHost._basePath, path_to_resolve));
    }
};

Thanks for sharing @tinchou! That fixed it for me. Was having the same problem on Windows 10....wasted more time than I care to admit on this issue. :-)

Yeah, that sucks. The problem is not knowing which one is the broken
component after a big update. I was lucky I was glancing over that repo's
issues a couple of hours before updating myself.

@tinchou can you share plugins context of your webpack config for this workaround?

What do you mean? This?

    plugins: [
        aotPlugin,
        new webpack.optimize.UglifyJsPlugin({
            mangle: { screw_ie8: true },
            compress: {
                screw_ie8: true,
                warnings: false,
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
    // ....

@tinchou yea thanks, i had dumb mistake with var aotPlugin = new ngToolsWebpack.AotPlugin({ part defined after webpack config instead of before

@tinchou screw_ie8: true, is default. You don't need that.

where is this webpack.config.js file everyone speaks of along with the aotPlugin settings?
Does @angular/cli use it?
I've been trying to get a --prod and/or --aot build to work for months... seem to be in upgrade/dependency hell / along with not having any idea where the error lines

ng build --aot

No NgModule metadata found for 'AppModule'

expanding that:

ZoneAwareError http://localhost:4200/polyfills.bundle.js:7954:21
NgModuleResolver.prototype.resolve http://localhost:4200/vendor.bundle.js:36464:23
CompileMetadataResolver.prototype.getNgModuleMetadata http://localhost:4200/vendor.bundle.js:37043:37
JitCompiler.prototype._loadModules http://localhost:4200/vendor.bundle.js:48238:41
JitCompiler.prototype._compileModuleAndComponents http://localhost:4200/vendor.bundle.js:48197:47
JitCompiler.prototype.compileModuleAsync http://localhost:4200/vendor.bundle.js:48159:16
PlatformRef_.prototype._bootstrapModuleWithZone http://localhost:4200/vendor.bundle.js:6792:16
PlatformRef_.prototype.bootstrapModule http://localhost:4200/vendor.bundle.js:6778:16
[104] http://localhost:4200/main.bundle.js:57:1
__webpack_require__ http://localhost:4200/inline.bundle.js:53:12
[265] http://localhost:4200/main.bundle.js:100:18
__webpack_require__ http://localhost:4200/inline.bundle.js:53:12
webpackJsonpCallback http://localhost:4200/inline.bundle.js:24:23
<anonymous>

I'm not using the CLI, but webpack with @ngtools/webpack plugin. I think
you can "eject" your webpack configuration with the CLI if you need to use
this workaround.

On Fri, Apr 14, 2017, 16:29 Brad Kent notifications@github.com wrote:

where is this webpack.config.js file everyone speaks of along with the
aotPlugin settings?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/5329#issuecomment-294219964,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9O6VT8ZXHl7bn2UfC4TJ4KuCPcWjks5rv8kdgaJpZM4MX7At
.

thx @tinchou for the workaround, works perfectly for me (win7x64)

Any ETA for when a final fix for this will be deployed? Thanks

Deployed in 1.3.1

thx @hheexx . bugfix confirmed.

I solved min by pressing Ctrl + C on the terminal to end the current npm start,
then ran the entire setup with a npm start.

This error occurred to me when I was switching branches.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sysmat picture sysmat  Â·  3Comments

IngvarKofoed picture IngvarKofoed  Â·  3Comments

naveedahmed1 picture naveedahmed1  Â·  3Comments

donaldallen picture donaldallen  Â·  3Comments

jmurphzyo picture jmurphzyo  Â·  3Comments