Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Ivy compiler and webpack

We would like to use the new Angular 8 Ivy compiler with webpack. We don't use Angular CLI. Is this possible? How can this be done? I can't seem to find information regarding this requirement.

like image 341
stephan.peters Avatar asked Jun 18 '19 07:06

stephan.peters


People also ask

Can we use Webpack with Angular?

The Angular build process uses webpack behind the scenes to transpile TypeScript to JavaScript, transform Sass files to CSS, and many other tasks. To understand the importance of this build tool, it helps to understand why it exists.

What is the Ivy compiler in Angular?

Ivy Compiler is the latest compiler for Angular application released by Angular Team. Currently, Angular is using View Engine compiler to compile Angular application. In general, Angular compiler has two options to compile an application.

Does Angular 12 use Webpack?

I updated to Angular 12 yesterday which uses Webpack 5. The release notes blog says: In the v11 update we added experimental support for Webpack 5. Today, we're happy to announce that we're releasing a production ready version of Webpack 5 support in Angular.


1 Answers

To learn what to do you have to dig into Angular CLI code and see where exactly they use enableIvy flag.

I haven't seen your Webpack config but I guess you're using AngularCompilerPlugin.
If this is the case then you have to provide it with enableIvy in compilerOptions.

For more details look here (where the flag is defined), here (where the plugin options are defined) and here (where plugin's compilerOptions are initialized).

The plugin configuration will probably look like this:

... // The rest of your webpack config
plugins: [
  new AngularCompilerPlugin({
    compilerOptions: {
      enableIvy: true,
      ...// the rest of compiler options
    }
    ...// The rest of options you provide to AngularCompilerPlugin
  })
  ...// The rest of your plugins 
]

I'm not sure if they are using this flag in other places but this place is a must and it will probably give you what you want.

In any case if you want to save yourself a headache I'd recommend you to stick with Angular CLI.
Otherwise you'll have to visit their code base quite often.

If you're using Webpack then most probably it is possible to do what you need with Angular CLI and Custom Webpack Builder.
If you're having a hard time configuring the builder you're more than welcome to visit Angular Builders Slack channel.

like image 160
JeB Avatar answered Oct 19 '22 13:10

JeB