Angular-cli: ng build --prod --aot not working

[luishmcmoreno]

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

[Wykks]

Juste remove "types": entry from tsconfig.

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

[luishmcmoreno]

I removed and had the same issue. :(

[ishehata]

can you show us your main.ts file ?

[luishmcmoreno]

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]

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]

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]

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

[jclancy93]

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]

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

[luishmcmoreno]

2.2.0 here.

[MarkPieszak]

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

[mcosta74]

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]

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]

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

[mcosta74]

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

[luishmcmoreno]

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]

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]

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]

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

[mcosta74]

@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]

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

[julienbiaussat]

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]

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

[Hosar]

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]

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

[gavinsui]

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]

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

[Makeon]

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]

@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[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._}