feature: added AOT compile support (#885) by colinskow · Pull Request #1298 · PatrickJS/PatrickJS-starter

colinskow · 2016-12-24T14:13:42Z

This PR adds AoT support using the ngc compiler. @ngtools/webpack still has many flaws, but this setup is working perfectly. npm install and then npm run ci to fully test both AoT and JIT builds.

upgraded Angular to ~2.4.1
added AoT compile script
fixed AoT incompatible code in app
enabled Webpack 2 tree shaking by specifying ES2015 module output
e2e testing script launches its own server
ci script will test both AoT and JIT builds, makes fresh builds on each test
specified noEmit typescript flag to prevent accidentally spamming compiled files into the project
disabled caching on production server to be able to see changes
updated bad links at top of README
documented new features in README

Resolves #885

samvloeberghs · 2016-12-24T14:17:26Z

wicked!

colinskow · 2016-12-24T14:37:10Z

Restart the build jobs one at a time. Travis often hangs with concurrent builds.

joshwiens · 2016-12-25T03:29:13Z

@colinskow - I'll take a look at this in the morning.

//cc @gdi2290 @katallaxie should also take a look

joshwiens · 2016-12-25T03:38:03Z

FYI - I restarted both the travis builds

joshwiens

To keep the naming consistent as well as explicit, I would rename tsconfig.webpack.json to tsconfig.aot.json

Outside of that, it functions as expected and I'm personally good with all the other changes.

Thanks for the note in the README as well. Solid Work :)

joshwiens · 2016-12-25T03:57:05Z

.travis.yml

-  - npm run server:prod:ci &
-  - sleep 3
-  - npm run e2e
+  - npm run ci


I would also suggest running the two build / test steps individually.

1.) Most of us run multiple test containers, I always run my jit / aot validations in parallel.
2.) If is step is going to fail, it's probably going to be AoT, splitting them just means less log output to go dig through to find the failure.

The complication in running the builds in parallel is that we need two different build directories and setup servers on two different ports to not cause conflicts. With this PR each step is an individual command and npm run ci simply composes them. I think parallel builds is a separate PR because it would take some work to setup.

Do you think the Travis builds would be more likely to pass the first time if I added a sleep 3 between starting the server and starting the test?

Also, after I got AoT working I hit a hitch where Angular was crashing on startup with the JIT build, even though the build process didn't show errors. That's why it is important to test both for this repo's CI. Individual developers can use npm run ci:aot for lint, karma, and e2e test of AoT build.

I personally use Circle but this should still be applicable ..

I agree completely in regards to testing both builds, the point i was trying to make is to separate the two completely to allow the parallel execution. I have multiple containers available for any given build so my Jit & AoT validations run in parallel. Given it's a devops thing and most people aren't going to be running the vanilla Travis file for their projects, no need to have the build config hold up this PR.

If I want to fiddle with the Travis execution, i'll do it later. Far more important to get the AoT support in for those that have been asking for it.

As far as the e2e tests go, I run a sleep 5 after I spin up the server. I've had problems with 2-3 second sleeps when it's build prime time on Travis or Circle.

@d3viant0ne are you talking about Docker containers? If you can get the builds to test in parallel and create a script command that would be great.

joshwiens · 2016-12-25T04:02:18Z

.gitignore

 /node_modules
 /bower_components
 npm-debug.log
+yarn.lock


The yarn.lock is set in .gitattributes as a binary file and shouldn't be ignored. See notes in #1226

OK, I will remove this.

colinskow · 2016-12-25T06:14:55Z

@d3viant0ne tsconfig.webpack.json is correctly named. This is used by awesome-typescript-loader to run dev, production, and aot builds. It uses the es2015 module format in order to enable tree shaking.

Karma and other node libraries can't deal with es2015 modules and must use commonjs. That is why I forked the file. One for Webpack's internal use. The other for everything else.

joshwiens · 2016-12-25T09:15:18Z

re: json config misinterpreted the intent, makes sense.

colinskow · 2016-12-25T20:45:57Z

I've got another incoming commit on this PR to reduce bundle size and enable automatic tree shaking of the vendors bundle.

colinskow · 2016-12-25T21:12:03Z

The AoT build was including lots of unnecessary files so I added a commit which automatically extracts imports from node_modules into the vendors module and tree shakes them. This cuts the output bundle size in less than half. Previously there was no tree shaking of vendor imports.

I also added the Webpack Bundle Analyzer plugin and made it accessible by setting the command line flag --env.analyze. This allows for easy inspection of output bundles to ensure they are fully optimized. For example: npm run build:aot:prod -- --env.analyze.

tsawan · 2016-12-26T07:29:18Z

eagerly waiting for this PR to be merged.

katallaxie

I would recommend to have AoT as default of prod. That's the way to go in production. I am still not a fan of the @ngtools, but it seems to have it in webpack seems a nicer solution. I would also have the BundleAnalyzerPlugin removed. Webpack 2 in RC and beyond provides sufficient information. This seems to blow up the size of the boilerplate.

0xphilipp · 2016-12-26T22:09:54Z

Awesome work, you should also add a script for: npm run start:aot.
And how can one import bootstrap 4 with that changed logic for referencing vendors?

colinskow · 2016-12-27T00:20:59Z

@katallaxie not all Angular apps are compatible with AoT so I wouldn't want to break people's builds by setting it as default. The idea is to add features without making breaking changes.

As mentioned above @ngtools/webpack is still unstable and I wasn't able to get it to work with this repo. But when they work out the bugs it is the best way to go with Webpack.

The BundleAnalyzerPlugin adds 5.5mb to dependencies that are already 320mb+. It is very useful for ensuring that the builds contain what we expect them to contain and is optional to use via a command line flag.

colinskow · 2016-12-27T00:25:39Z

@Phmager AoT is more for production builds. Since the NGC compiler is running separately from Webpack it may not play well with the dev server.

The new vendor referencing logic is that anything from node_modules that you import into your project will be automatically pulled into the vendor bundle. You don't have to do anything. For Bootstrap I would import at the top of your main app module file.

However its bad practice to have large CSS files inlined in the Javascript code, so my next step is a PR to setup a styles directory and everything in there will be compiled to a separate .css file.

joshwiens · 2016-12-27T03:13:25Z

@katallaxie - AOT should not be the default for prod for exactly what @colinskow stated, it breaks things. After a developer has his application running stable on AoT, he or she can default it to AoT in their project. We should be enabling features in a starter, not mandating them.

Given the commitment required to create a large application published AoT, this is a feature that should be off by default & opt in or it's going to break every production build this starter backs when they pick up the changes.

joshwiens · 2016-12-27T03:17:07Z

I do on the other hand agree about @katallaxie's comment in regards to the BundleAnalyzerPlugin, It's trivial to add and would suggest this be transfered to Wiki instructions & not added to the seed directly ( it's big ).

We get basic bundle analysis via Webpack RC, if people want all the bells & whistles they can add BundleAnalyzerPlugin

katallaxie · 2016-12-27T10:07:27Z

@colinskow I get your point. Though, I believe it should be considered best practice to have AoT and deviate from that. So, if you have an application, that for what ever reasons, doesn't work with AoT then you can disable it. But I would see it the other way around. As regarding to @ngtools/webpack, I had doubts some months ago, that's why it wasn't in the aot branch. Though, I see it as the tool of choice in the long run. You have less boilerplate code, better integration with what Webpack does and better code quality.

katallaxie · 2016-12-27T10:13:07Z

@d3viant0ne Because we had some deps fixed, we should take care of them now. We should also update webpack to 2.2.0-rc.2 and webpack-dev-server to 2.2.0-rc.0. As for the bundle analysis.

joshwiens

Can you update webpack to 2.2.0-rc.2 and webpack-dev-server to 2.2.0-rc.0 then drop the bundle analyzer when you have a moment? I'll land this PR once the package.json changes are in.

maxisam · 2016-12-30T00:45:41Z

do we wanna update readme because the vendor file is gone ? btw, why do we remove vendor entry point ? Because of tree shaking ? But there is actually not much change. The parsed size of new main (808.11k) ~= main (9.04k) + vendor (799.6k).

not working: component level LESS files images hash in *.html, template or templateUrl see app.component.ts, home.component.html and home.component.css

albv · 2017-02-01T13:42:55Z

config/webpack.common.js

@@ -177,6 +178,17 @@ module.exports = function (options) {
       * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
       * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
       */


I don't get what this instance of CommonsChunkPlugin is supposed to do.. As far as I can tell, with this settings it won't do anything at all. @colinskow could you elaborate please?

* feature: added AOT compile support (PatrickJS#885) * updated travis.yml with new ci script * removed yarn.lock from .gitignore * (optimize) vendor tree shaking and bundle analysis tool * (fix) support node 5 * upgraded to webpack 2.2.0-rc-2, removed analyzer

abbilovos · 2022-02-18T22:43:35Z

![@uploading 154770969...] @

feature: added AOT compile support (PatrickJS#885)

d111741

updated travis.yml with new ci script

c4844be

joshwiens suggested changes Dec 25, 2016

View reviewed changes

joshwiens reviewed Dec 25, 2016

View reviewed changes

removed yarn.lock from .gitignore

b79a4e2

joshwiens added the pr: review label Dec 25, 2016

joshwiens approved these changes Dec 25, 2016

View reviewed changes

(optimize) vendor tree shaking and bundle analysis tool

833223d

(fix) support node 5

72ece96

katallaxie reviewed Dec 26, 2016

View reviewed changes

joshwiens suggested changes Dec 27, 2016

View reviewed changes

upgraded to webpack 2.2.0-rc-2, removed analyzer

fbf3168

joshwiens approved these changes Dec 27, 2016

View reviewed changes

joshwiens added pr: merge ready and removed pr: review labels Dec 27, 2016

joshwiens merged commit c597344 into PatrickJS:master Dec 27, 2016

shlomiassaf mentioned this pull request Dec 28, 2016

feature: use loader chain for resources when compiling AOT #1307

Merged

joshwiens mentioned this pull request Jan 6, 2017

[Bug] Webpack command breaks when no npm scripts is used #1340

Closed

albv reviewed Feb 1, 2017

View reviewed changes

Uh oh!

Conversation

colinskow commented Dec 24, 2016 • edited by joshwiens Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samvloeberghs commented Dec 24, 2016

Uh oh!

colinskow commented Dec 24, 2016

Uh oh!

joshwiens commented Dec 25, 2016

Uh oh!

joshwiens commented Dec 25, 2016

Uh oh!

joshwiens left a comment

Choose a reason for hiding this comment

Uh oh!

joshwiens Dec 25, 2016

Choose a reason for hiding this comment

Uh oh!

colinskow Dec 25, 2016

Choose a reason for hiding this comment

Uh oh!

colinskow Dec 25, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joshwiens Dec 25, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

colinskow Dec 25, 2016

Choose a reason for hiding this comment

Uh oh!

joshwiens Dec 25, 2016

Choose a reason for hiding this comment

Uh oh!

colinskow Dec 25, 2016

Choose a reason for hiding this comment

Uh oh!

colinskow commented Dec 25, 2016

Uh oh!

joshwiens commented Dec 25, 2016

Uh oh!

colinskow commented Dec 25, 2016

Uh oh!

colinskow commented Dec 25, 2016

Uh oh!

tsawan commented Dec 26, 2016

Uh oh!

katallaxie left a comment

Choose a reason for hiding this comment

Uh oh!

0xphilipp commented Dec 26, 2016

Uh oh!

colinskow commented Dec 27, 2016

Uh oh!

colinskow commented Dec 27, 2016

Uh oh!

joshwiens commented Dec 27, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshwiens commented Dec 27, 2016

Uh oh!

katallaxie commented Dec 27, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katallaxie commented Dec 27, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshwiens left a comment

Choose a reason for hiding this comment

Uh oh!

maxisam commented Dec 30, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

albv Feb 1, 2017

Choose a reason for hiding this comment

Uh oh!

abbilovos commented Feb 18, 2022

Uh oh!

colinskow commented Dec 24, 2016 •

edited by joshwiens

Loading

colinskow Dec 25, 2016 •

edited

Loading

joshwiens Dec 25, 2016 •

edited

Loading

joshwiens commented Dec 27, 2016 •

edited

Loading

katallaxie commented Dec 27, 2016 •

edited

Loading

katallaxie commented Dec 27, 2016 •

edited

Loading

maxisam commented Dec 30, 2016 •

edited

Loading