ng build --prod --aot not working #5802

luishmcmoreno · 2017-04-03T01:40:19Z

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.2.1
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

npm install --save-dev @types/googlemaps

and then, change the tsconfig.app.json to:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": ["google.maps", "io"]
  },
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

if we did not change this file, ng serve fails to provide the google type: Cannot find namespace 'google'. Without this change, the ng build --prod --aot works.

The log given by the failure.

$ ng build --aot --prod

Hash: 0e5ac752f36ed80df3cd                                                              
Time: 3144ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 1.09 kB {3} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 806 kB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ./src/main.ts
Module not found: Error: Can't res

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/luishmcmoreno/tmp/teste/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

The text was updated successfully, but these errors were encountered:

Wykks · 2017-04-03T08:34:24Z

Juste remove "types": entry from tsconfig.

Why angular-cli set "types": [] ?

luishmcmoreno · 2017-04-03T11:11:11Z

I removed and had the same issue. :(

ishehata · 2017-04-03T12:41:55Z

can you show us your main.ts file ?

luishmcmoreno · 2017-04-03T12:53:49Z

Sure

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

ishehata · 2017-04-03T12:58:11Z

i just noticed a thing, in your "tsconfig.app.json" you have: "**/*.spec.ts" in both include and exclude. try remove it from the include object and try again. it might not solve the problem but it seems wrong to me.

insta-code1 · 2017-04-03T15:00:37Z

Yep same here, just upgraded from angular 2 to angular 4 everything works except when I use the --aot command I get this:

ERROR in Child compilation failed:

Module build failed: TypeError: Cannot read property 'newLine' of undefined
    at Object.getNewLineCharacter (/home/insta/angularfire/AF4/node_modules/typescript/lib/typescript.js:9514:20)
    at Object.createCompilerHost (/home/insta/angularfire/AF4/node_modules/typescript/lib/typescript.js:63770:26)
    at Object.ngcLoader (/home/insta/angularfire/AF4/node_modules/@ngtools/webpack/src/loader.js:380:33):
TypeError: Cannot read property 'newLine' of undefined

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/insta/angularfire/AF4/src'
 @ ./src/main.ts 5:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

luishmcmoreno · 2017-04-03T16:10:38Z

I removed "**/*.spec.ts" from include at tsconfig.app.json e the error still happening.

jclancy93 · 2017-04-03T16:13:36Z

I had the same types of issues as @insta-code1 and @luishmcmoreno when trying to upgrade to v4.0.0. Can run ng serve but cannot build with AOT

ishehata · 2017-04-03T17:44:39Z

which version of TypeScript are you using @luishmcmoreno and @insta-code1 ?

luishmcmoreno · 2017-04-03T17:45:23Z

2.2.0 here.

MarkPieszak · 2017-04-04T04:18:25Z

This seems to be happening outside of the CLI as well, with @ngtools/webpack in general.

currently facing issues like angular/angular-cli#5802 cannot find browser-app.module.ngfactory

mcosta74 · 2017-04-04T08:08:28Z

Hi I have the same issue, is there a workaround ?

UPDATE: just created a "fresh" app with ng new xxxx and ng build -prod works without errors. my app, (I migrated it to cli 1.0.0 and angular4 few days ago) doesnt'. might be a migration issue

ipaschenko · 2017-04-04T08:27:58Z

Hello.
A have problem with "ng build --prod --aot" too, but got other mistake.

@angular/cli: 1.0.0
node: 7.8.0
os: macos

dependencies:

"@angular/animations": "^4.0.1",
"@angular/common": "^4.0.1",
"@angular/compiler": "^4.0.1",
"@angular/compiler-cli": "^4.0.1",
"@angular/core": "^4.0.1",
"@angular/forms": "^4.0.1",
"@angular/http": "^4.0.1",
"@angular/platform-browser": "^4.0.1",
"@angular/platform-browser-dynamic": "^4.0.1",
"@angular/platform-server": "^4.0.1",
"@angular/router": "^4.0.1",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"typescript": "^2.2.2",
"zone.js": "^0.6.12"

devDependencies:

"@angular/cli": "^1.0.0",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "^2.2.30",
"@types/node": "latest",
"@types/protractor": "^1.5.16",
"codelyzer": "latest",
"tslint": "latest"

> ng build --prod --aot

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:14876:109)
    at parseSourceFileWorker (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:14808:26)
    at Object.parseSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:14757:26)
    at Object.createSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:14612:29)
    at VirtualFileStats.getSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/@ngtools/webpack/src/compiler_host.js:66:35)
    at WebpackCompilerHost.getSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/@ngtools/webpack/src/compiler_host.js:213:38)
    at findSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:64751:29)
    at processImportedModules (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:64898:25)
    at findSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:64779:17)
    at processSourceFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:64682:27)
    at processRootFile (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:64570:13)
    at /Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:63919:60
    at Object.forEach (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:1398:30)
    at Object.createProgram (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/typescript/lib/typescript.js:63919:16)
    at AotPlugin._setupOptions (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/@ngtools/webpack/src/plugin.js:128:28)
    at new AotPlugin (/Users/ivan/Amason_reps/essaypro.com-client/node_modules/@ngtools/webpack/src/plugin.js:26:14)

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build --prod --aot`
npm ERR! Exit status 1

This error heapen only with Angular 4 and keys "--prod --aot". How to fix this?

luishmcmoreno · 2017-04-04T14:21:51Z

@mcosta74 try to add a type npm install --save-dev @types/googlemaps for example.

* wip - aot upgrade currently facing issues like angular/angular-cli#5802 cannot find browser-app.module.ngfactory * feat(AoT): ✨ ✨ added initial AoT support any many other things Added Bootstrap with SCSS / SASS support Added ng2-bootstrap Passing Server originURL so that URLs can use it (when 4.1 comes out with HttpInterceptors this will be even easier to do) ✨ AoT added ! for prod (npm run build:aot) - Still need to test this for Azure deployments etc Removed es6-shim added core-js

mcosta74 · 2017-04-05T13:01:37Z

@luishmcmoreno tried also if I don't really understand why this should have effect. nothing changed. Thanks anyway

luishmcmoreno · 2017-04-05T14:17:37Z

You need to use the type in the code. try in app.component using: const latlng = new google.maps.LatLng(23,23);. The type should work properly but trying ng serve you will see the error: Cannot find namespace 'google'..

If you put:

  "include": [
    "**/*.d.ts"
  ],

in tsconfig.app.json the error disappears but ng build --prod --aot not works.

luishmcmoreno · 2017-04-25T21:08:09Z

Hey guys. Thank you everyone.

The "include" property at tsconfig.app.json was totally unnecessary and I had to include each @types I had added at "files" property inside "compilerOptions" and now I can build with --prod flag.

The problem was I had added "google.maps" but the "@types" is "googlemaps".

mcosta74 · 2017-04-26T07:23:11Z

Small Update

I'm still not understanding where is the problem but when I run

$ ng build -prod -aot false

it works and the size of the generated code is about 70% smaller than the normal one

davidstellini · 2017-04-26T22:07:08Z

@mcosta74 That just disables AOT - the app is 'smaller than the normal one' because a prod build does other stuff, minification etc.

mcosta74 · 2017-04-26T22:09:21Z

@davidstellini I know that. At the moment I was mainly interested to reduce the size of the build. SO for now it's ok. Anyway my guess is that the guilty is Bootstrap Alpha and/or ng-bootstrap

filipesilva · 2017-05-04T14:03:34Z

Closing as @luishmcmoreno seems to have his problem sorted. Thanks to everyone that helped out!

julienbiaussat · 2017-07-22T15:59:01Z

same problem :
o TypeError: Cannot read property 'length' of undefined : at createSourceFile (C:_DATA\RENAULT\CADRAGE\GIT\Cadrage\node_modules\typescript\lib\typescript.js:14876:109)
I just played with environment.ts adding a baseURL :
export const env = {
production: false,
baseUrl: 'http://localhost:8080/api'
};
but the file was not found in my login service :
import { env } from '../environments/environment';
so I moved it one directory up to test, and it was ok
import { env } from '../environment';

I don't see relation with the bug ???

julienbiaussat · 2017-07-22T19:46:37Z

main.ts -> wrong path : import { environment } from './environments/environment';
because I moved environment.ts.... pfff

Hosar · 2017-08-23T17:28:00Z

Running ng build -prod i'm getting the following error:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Users\hosarsiph.valle\Projects\TestOf-Angular42\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  }

cli:
"@angular/cli": "1.0.3",

The problem seems to be with AOT

jorawarsingh · 2017-08-23T17:30:45Z

@Hosar upgrade to 1.3.1 the latest and it should work fine.

gavinsui · 2017-09-14T06:12:21Z

when i finish ng build --prod ,i get some js file like this main.65413sdfs156432dfdfaf.bundle.js. what's this?? how can i get file like main.bundle.js??what should i do ??

sinhider · 2017-09-16T13:23:44Z

@gavinsui look this http://prntscr.com/glv1j9

* wip - aot upgrade currently facing issues like angular/angular-cli#5802 cannot find browser-app.module.ngfactory * feat(AoT): ✨ ✨ added initial AoT support any many other things Added Bootstrap with SCSS / SASS support Added ng2-bootstrap Passing Server originURL so that URLs can use it (when 4.1 comes out with HttpInterceptors this will be even easier to do) ✨ AoT added ! for prod (npm run build:aot) - Still need to test this for Azure deployments etc Removed es6-shim added core-js

Makeon · 2017-10-01T17:31:05Z

Hi, can you help me too?
I try to use AOT as described in https://angular.io/guide/aot-compiler
Only create new project, no any change
ng build --aot --prod
works normally, bun when I try
build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js
and got build.js minimized file, I have error in browser:
ReferenceError: require is not defined

roolup-config.js
`import nodeResolve from 'rollup-plugin-node-resolve-angular';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';

export default {
input: 'src/mainAOT.js',
output: {
file: 'dist/build.js', // output a single application bundle
format: 'iife'
},
sourceMap: false,
onwarn: function(warning) {
// Skip certain warnings

// should intercept ... but doesn't in some rollup versions
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

// console.warn everything else
console.warn( warning.message );

},
plugins: [
nodeResolve({
// es2015: true,
jsnext: true,
module: true,
browser: true
}),
commonjs({
include: 'node_modules/rxjs/**'
}),
uglify()
]
};tsconfig-aot.json:{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": false,
"typeRoots": [
"./node_modules/@types/"
]
},

"files": [
"src/typings.d.ts",
"src/mainAOT.ts"
],

"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}tsconfig.json:{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}.angular-cli.json:{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular1"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"defaults": {
"styleExt": "css",
"component": {}
}
}tsconfig.app.json:{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts"
]
}
mainAOT.js:import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
//# sourceMappingURL=main.js.map`

MarceloVareladaSilva · 2017-10-06T12:55:40Z

@gavinsui
The "hashtag" prevents cache.

Use:

ng build --prod --output-hashing=none

to remove, but remove only if you are aware of the implications.
With cordova or ionic I currently have not tested, but before do not build with hashtag.

Then for Cordova / ionic for example you can use:

ng build --prod --output-hashing=none --output-path=cordova/www/

My opinion... Until someone can teach us more about it.. :
Of course this does not follow what "today" is considered good practices but whereas in the app's webview cache it does not matter. (FOR USE ONLY WITH MOBILE APPLICATIONS, FOR THE WEB USE HASHTAG)

I hope I have helped.

angular-automatic-lock-bot · 2019-09-07T13:41:08Z

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

MarkPieszak added a commit to TrilonIO/aspnetcore-angular-universal that referenced this issue Apr 4, 2017

wip - aot upgrade

2415d68

currently facing issues like angular/angular-cli#5802 cannot find browser-app.module.ngfactory

xealot mentioned this issue Apr 20, 2017

New version of cli ng build --prod gives error. #5733

Closed

filipesilva closed this as completed May 4, 2017

criticalbh mentioned this issue Jul 25, 2017

Prod build fails with "Can't resolve '@angular/material/material' #7062

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ng build --prod --aot not working #5802

ng build --prod --aot not working #5802

luishmcmoreno commented Apr 3, 2017

Wykks commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

ishehata commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

ishehata commented Apr 3, 2017

insta-code1 commented Apr 3, 2017 •

edited

Loading

luishmcmoreno commented Apr 3, 2017

jclancy93 commented Apr 3, 2017 •

edited

Loading

ishehata commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

MarkPieszak commented Apr 4, 2017

mcosta74 commented Apr 4, 2017 •

edited

Loading

ipaschenko commented Apr 4, 2017

luishmcmoreno commented Apr 4, 2017 •

edited

Loading

mcosta74 commented Apr 5, 2017

luishmcmoreno commented Apr 5, 2017

luishmcmoreno commented Apr 25, 2017

mcosta74 commented Apr 26, 2017

davidstellini commented Apr 26, 2017

mcosta74 commented Apr 26, 2017

filipesilva commented May 4, 2017

julienbiaussat commented Jul 22, 2017

julienbiaussat commented Jul 22, 2017

Hosar commented Aug 23, 2017 •

edited

Loading

jorawarsingh commented Aug 23, 2017

gavinsui commented Sep 14, 2017

sinhider commented Sep 16, 2017

Makeon commented Oct 1, 2017

MarceloVareladaSilva commented Oct 6, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

ng build --prod --aot not working #5802

ng build --prod --aot not working #5802

Comments

luishmcmoreno commented Apr 3, 2017

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Wykks commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

ishehata commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

ishehata commented Apr 3, 2017

insta-code1 commented Apr 3, 2017 • edited Loading

luishmcmoreno commented Apr 3, 2017

jclancy93 commented Apr 3, 2017 • edited Loading

ishehata commented Apr 3, 2017

luishmcmoreno commented Apr 3, 2017

MarkPieszak commented Apr 4, 2017

mcosta74 commented Apr 4, 2017 • edited Loading

ipaschenko commented Apr 4, 2017

luishmcmoreno commented Apr 4, 2017 • edited Loading

mcosta74 commented Apr 5, 2017

luishmcmoreno commented Apr 5, 2017

luishmcmoreno commented Apr 25, 2017

mcosta74 commented Apr 26, 2017

davidstellini commented Apr 26, 2017

mcosta74 commented Apr 26, 2017

filipesilva commented May 4, 2017

julienbiaussat commented Jul 22, 2017

julienbiaussat commented Jul 22, 2017

Hosar commented Aug 23, 2017 • edited Loading

jorawarsingh commented Aug 23, 2017

gavinsui commented Sep 14, 2017

sinhider commented Sep 16, 2017

Makeon commented Oct 1, 2017

MarceloVareladaSilva commented Oct 6, 2017

angular-automatic-lock-bot bot commented Sep 7, 2019

Bug Report or Feature Request (mark with an `x`)

insta-code1 commented Apr 3, 2017 •

edited

Loading

jclancy93 commented Apr 3, 2017 •

edited

Loading

mcosta74 commented Apr 4, 2017 •

edited

Loading

luishmcmoreno commented Apr 4, 2017 •

edited

Loading

Hosar commented Aug 23, 2017 •

edited

Loading