Production build failing

[gnesher]

Hi,

Just cloned the repo to check the rollup aot build works size wise, but the production build fails (the dev build works fine).

I get the following error: Could not resolve './ngfactory/tmp/app/app.module.ngfactory' from /Users/guynesher/Work/kingfisher/rollup/main.prod.js Error: Could not resolve './ngfactory/tmp/app/app.module.ngfactory' from /Users/guynesher/Work/kingfisher/rollup/main.prod.js at Error (native) at /Users/guynesher/Work/kingfisher/rollup/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:78:21 at /Users/guynesher/Work/kingfisher/rollup/node_modules/resolve/lib/async.js:55:18 at load (/Users/guynesher/Work/kingfisher/rollup/node_modules/resolve/lib/async.js:69:43) at onex (/Users/guynesher/Work/kingfisher/rollup/node_modules/resolve/lib/async.js:92:31) at /Users/guynesher/Work/kingfisher/rollup/node_modules/resolve/lib/async.js:22:47 at FSReqWrap.oncomplete (fs.js:123:15) Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki [11:2:39] LOG Rollup bundled bundle.es2015.js in ./dist [11:2:39] LOG Closure Compiler is optimizing bundle.js for prod Error: Unable to access jarfile ./compiler.jar [11:2:39] LOG Closure Compiler transpiled ./dist/bundle.es2015.js to ./dist/bundle.js [11:2:39] LOG Ready to serve [11:2:39] WARN Error: ENOENT: no such file or directory, open './dist/bundle.js'

Let me know if you need any additional information, but all I've done is npm install + run the production build command you supplied

[steveblue]

@gnesher Are you attempting to build for prod with the default code that came with the repo or your own project? If the latter, this is probably the result of an error in the parser for AOT. AOT is very particular.

[gnesher]

I'm trying to build a new clone of your repo, no changes made on my part. The package.json dependencies are quite long so hard to nail down what changed, but some library may have changed? Are you able to run it out of the box at the moment?

[steveblue]

Yes, the default builds for me on prod @gnesher. Make sure you are using the latest node, npm. At the very least v5.5.0 of node.

[gnesher]

I'm running node v6.3.1 and npm v3.10.3 which I think should be fine? What version of typescript are you using?

[steveblue]

@gnesher 2.0.0+ of typescript

[odubuc]

I'm having the same issue Node: 6.9.1 npm: 4.0.5 typescript: 2.1.4

[steveblue]

@odubuc windows, linux or mac os?

[odubuc]

windows 10

[steveblue]

I only have access to mac os and linux for testing ATM @odubuc @gnesher but I suspect the problem lies somewhere in this line of rollup.config.js. Other users have reported windows requires a different way to parse the directory. This is a common problem with rollup and windows. You may need to google for a different way to resolve the alias between rxjs-es and rxjs.

          let result = `${__dirname}/node_modules/rxjs-es/${id.replace('rxjs/', '')}.js`;

[ivaylopivanov]

I had the same problem, but on linux. I managed to build it after locked the version of all angular modules to 2.1.2 and typescript to 2.0.0.

[steveblue]

@gnesher is this resolved?

[steveblue]

I could replicate the issue due to the way the versions were formatted in the package.json. At the time 2.1.2 was released it worked. I have since updated to 2.4.7 and 2.4.8. This should resolve the issue.

[gnesher]

@steveblue yeah I was able to get it working, just using this as an example to why AOT was (and kinda still is) far from straight forward to use outside of the recommended Angular CLI

[snewell92]

tldr; where does build.prod.js compile the ngfactories?

@gnesher @steveblue Follow up question - I can clone this repo on windows and npm run build:prod but if I try to run only npm run compile:prod by itself, ngc can't find the ngfactory (since it hasn't been compiled yet).

I see the difference between those two scripts is that build:prod calls a javascript file, and I can see that build.prod.js is using shelljs and essentially copying over a lot of files, setting up the styles, then compiling - but which exact step in the build.prod.js file sets up the compilation to work? I only see the call to :

let tsc = exec(scripts['compile:'+env], function(code, output, error) {
  ...
}

And I don't see where the ngFactories are being constructed :\ The init function doesn't do it, and I think the styles.src kicks off compilation, but why would the styles script compile ngfactories? Are the ngfactories baked into the repo somewhere and just copied? What if I was in a project where those originals get nuked, how do I regenerate that (if that's the case)?

My set up is essentially only npm run compile:prod - and I want that to be able to be run in a CI environment which may or may not be cleaned out. In development/locally, I can run my own compile prod script, but if I run my clean script before it borks out since those ngfactories haven't been compiled yet.

So how can I extract out that ngfactory compilation? It'd be really helpful to me/my project to have this pointed out :D ... the angular docs seem to just have those factories compiled before making a change to their main.ts - but what if the change is already made and the compiled output gets nuked (like in CI)?

Thanks for reading, <3<3 - Really great repo, learned a lot from it!

[snewell92]

It's strange because build.prod.js has:

let clean = exec(scripts['clean:ngfactory'], function(code, output, error) {
  ...
  let tsc = exec(scripts['compile:'+env], function(code, output, error) {
    ...

But if I try to do that in the CLI by invoking the npm scripts directly I get:

$ npm run clean:ngfactory
$ npm run compile:prod
  Error File 'C:/dorianRepos/ng-aot-compiler-example/tmp/app/app.module.ts' not found.

I thought compiling would populate ./tmp, not rely on it. I can't tell where the first call to compilation is.

I'd like to see what scripts I need to run manually to simulate what the production script is doing, so I can extract only what I need and replicate it in other scenarios.

[snewell92]

mm... I think I just set something up wrong. I need to peer more closely into that build.prod.js script, because I think ngc is supposed to generate those ngfactories, that's why the clean script is before the compile script in the compile.src function. Might be my environment/typescript... but I have tsc 2.3.4.... Might post on SO or something. Sorry for bugging y'all here!

[steveblue]

@snewell92

Try typescript@2.4.0. It seems to be the most reliable version with the current build.

styles.src kicks off ngc because SASS and PostCSS need to compile CSS before ngc runs and builds the ngfactory files. If you don't require SASS or PostCSS then you can edit the init function to run compile.src instead of styles.src. Omitting PostCSS for production is not recommended though, because PostCSS minifies and optimizes the CSS gracefully.

Copy build.prod.js and rename it, so you can pick up changes from the starter code in the future. Then edit package.json to reflect the change.

/tmp is created to ensure src remains clean.

Perhaps /tmp needs to be cleaned like so for the script to run without ShellJS:

"clean:ngfactory": "rimraf ngfactory && mkdir ngfactory && rimraf tmp && mkdir tmp",

/tmp is cleaned in the init().

tsconfig.prod.json specifies where the entry points for ngc and where ngfactory files should be compiled.

 "angularCompilerOptions": {
   "genDir": "./ngfactory",
   "annotateForClosureCompiler": true,
   "debug": false
  },
  "files": [
    "./tmp/app/app.module.ts",
    "main.prod.ts"
  ],

 let tsc = exec(scripts['compile:'+env], function(code, output, error)
``

is what starts `ngc`. When the callback fires the `ngfactory` files are compiled.

Hope this helps,
Steve

[snewell92]

Thanks, it ended up being a typescript version issue, but I'll for sure be coming back to this repo and pulling out some goodies. Thanks for such a great repo!