search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

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

Closed luishmcmoreno closed 7 years ago

luishmcmoreno commented 7 years ago

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 commented 7 years ago

Juste remove "types": entry from tsconfig.

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

luishmcmoreno commented 7 years ago

I removed and had the same issue. :(

ishehata commented 7 years ago

can you show us your main.ts file ?

luishmcmoreno commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

jclancy93 commented 7 years ago

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 commented 7 years ago

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

luishmcmoreno commented 7 years ago

2.2.0 here.

MarkPieszak commented 7 years ago

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

mcosta74 commented 7 years ago

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 commented 7 years ago

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! essay-client-front@0.1.2 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 commented 7 years ago

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

mcosta74 commented 7 years ago

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

luishmcmoreno commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

mcosta74 commented 7 years ago

@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 commented 7 years ago

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

julienbiaussat commented 7 years ago

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 commented 7 years ago

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

Hosar commented 7 years ago

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 commented 7 years ago

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

gavinsui commented 7 years ago

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 commented 7 years ago

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

Makeon commented 6 years ago

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 commented 6 years ago

@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] commented 5 years ago

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.