Javascriptservices: Consider using angular2-template-loader in templates/Angular2Spa

[colltoaction]

Hi guys,

I just stumbled upon angular2-template-loader, and thought it's worth considering for this template (I'll definitely use it in my project from now on).

If you see some component's code like this you'll notice the template and styles are required. This is nice because we don't make as many requests compared to using templateUrl and styleUrls.

But there's a drawback: we're tying our code into Webpack. And that brings some issues like not being able to run the ngc compiler on our code. Surely someone's going to make it work at some point, but it's not working at the moment.

Using the mentioned loader, we're able to write plain Angular code like templateUrl: './app.component.html', while retaining all the benefits from bundling and transparency that Webpack provides.

I tested it and I can even require scss like styleUrls: ['./app.component.scss'], but as a side note, this probably won't work with ngc.

Thanks for your great support!

[SteveSandersonMS]

This is a good idea. Do you know how close this gets us to having ngc support with full AoT compilation and proper tree shaking? Once we can demonstrate all of that working, it will be a big step forwards. Or if that's not all doable yet, then this change might not be so useful.

[MarkPieszak]

@tinchou I can look into this and whether it'll work with ngc. I know as of right now, the AoT support is a little shakey, but hopefully soon it'll be working 100% :)

[colltoaction]

Awesome!

I suggested this change because the errors you see when you try to use ngc
is that you can't use require. From the Angular docs, it seems that they
want to run the compiler directly, and not using webpack or other tools.

Anyway, I stopped trying when I saw every guide was using rollup and not
webpack. And they were transpiling es6 code into ts and back to es5. And
the build process was not easy. Not a one-day task, at least for me :/.

On Tue, Oct 4, 2016, 09:53 Mark Pieszak [email protected] wrote:

@tinchou https://github.com/tinchou I can look into this and whether
it'll work with ngc. I know as of right now, the AoT support is a little
shakey, but hopefully soon it'll be working 100% :)

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/aspnet/JavaScriptServices/issues/356#issuecomment-251379283,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9H5D7LfZ9TozN06XjIv7f0wqM6sGks5qwkxfgaJpZM4KNKVf
.

[colltoaction]

This looks promising! http://www.michaelbromley.co.uk/blog/551/some-notes-on-angular-2-aot-mode-with-webpack-sass-ngtools. I'm not ready to spend time on this yet because we have a deadline soon, but I'll keep you posted. Are we ready to upgrade to Webpack 2 in order to support AoT?

I was right suggesting this after all :).

[MarkPieszak]

I don't know if Steves aspnet webpack is ready for 2?

We are close to finishing AoT support from a Universal point of view so hopefully soon we can integrate all these amazing things 😃 don't forget AoT is super new and shakey itself! It'll take time for it to mature.

[colltoaction]

I made it work in the Angular template with a few tweaks. I think he was
planning to upgrade when they released the final version.

On Sun, Oct 9, 2016, 17:21 Mark Pieszak [email protected] wrote:

I don't know if Steves aspnet webpack is ready for 2?

We are close to finishing AoT support from a Universal point of view so
hopefully soon we can integrate all these amazing things 😃 don't forget
AoT is super new and shakey itself! It'll take time for it to mature.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aspnet/JavaScriptServices/issues/356#issuecomment-252510077,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABeg9MUVVPk1DQm_hyPM5NUIovi2mq5Cks5qyUzCgaJpZM4KNKVf
.

[SteveSandersonMS]

Webpack is pretty easy for us to update, because it doesn't really tie into any other tooling (e.g., unlike TypeScript, which your IDE needs to know about).

So we could technically go to Webpack 2 beta now. We haven't done just because there wasn't a sufficiently compelling benefit to justify the risk that they make breaking changes before the Webpack 2 final release. I'd say that if we got easy and clean AoT/tree shaking, then that would be worth considering. Otherwise it would be beneficial to stay on Webpack 1 until the final stable version of Webpack 2 ships.

[colltoaction]

I made it work :). I completely removed server-side prerendering since I wasn't using it, so I don't know if that's working.

Once it's configured it's pretty transparent, I like it. If anyone tries to tackle this let me know and I'll try to help overcoming some quirks. For example this the only configuration that worked for me:

        new ngToolsWebpack.AotPlugin({
            tsConfigPath: "./tsconfig.aot.json",
            entryModule: path.resolve(__dirname, "ClientApp", "components", "main.aot") + "#MainModule",
            typeChecking: true,
        })

[kjartanvalur]

@tinchou Can you please explain steps to enable AoT ? It would be really helpful

[colltoaction]

@kjartanvalur please refer to this gist with my configuration.

In simple words:

1. use @ngtools/webpack loader for AoT, and remove all calls to require()
2. use the angular2-template-loader for your dev configuration if you want to avoid AoT
3. write the AoT tsconfig and bootstrap files
4. ignore the error in the AoT bootstrap file, as it will be handled by the @ngtools/webpack loader

[SteveSandersonMS]

I'd be interested to know if anyone's managed to achieve any substantial bundle size reductions via AoT/tree-shaking.

The best I've managed - following roughly @tinchou's approach - is to reduce the production build from about 1.1MB to about 0.8MB (even after going through rollup) which is not really significant enough to warrant the massive extra complexity in the build system.

Can anyone improve on that?

[JonCubed]

@SteveSandersonMS my understanding is you wont see the big size reductions until AoT compiler is using the closure compiler. It is used internally by Google but is not ready for public consumption.

You can also use Source Map Explorer to get a breakdown of where your bloat is coming from and what is getting shaken out.

[c1rus]

Or use this new cool thing :) https://github.com/th0r/webpack-bundle-analyzer

[SteveSandersonMS]

The Angular2Spa template now uses angular2-template-loader. Thanks for suggesting this!