11

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.

stephan.peters
  • 963
  • 13
  • 35

3 Answers3

10

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.

JeB
  • 11,653
  • 10
  • 58
  • 87
  • Ok thanks. We will try using the angular compiler plugin and we are planning to try angular builders with angular cli by the time Angular 9 comes out. So I probably have some questions because we do a lot of special stuff :) note that it regards an Enterprise wide architecture for many applications. – stephan.peters Jun 28 '19 at 05:59
  • No problem, find me on Slack if you have any questions. – JeB Jun 29 '19 at 06:41
  • just noted Angular 8 not working with Ivy. You have to switch to Angular@next to avoid ngcc error. – Hoang Subin Jul 02 '19 at 02:25
  • There is experimental `enableIvy` flag that you can [enable](https://blog.angularindepth.com/customizing-angular-cli-build-an-alternative-to-ng-eject-v2-c655768b48cc) in your tsconfig options. – JeB Jul 02 '19 at 06:36
3

Ivy is not yet officially released. With version 8 of Angular you can opt into the preview with the CLI.

See: https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7

Angular should be fully switched over to Ivy in version 9. You'll likely find more documentation on using Ivy with a custom webpack config then.

Until then I would suggest either of the following:

  1. Open a new issue on the Angular Builders repository and ask this question there. Angular builders is the go-to ng eject alternative and they will likely have more answers than the average joe on stack overflow when it comes to this kinds of issue.
  2. Open an issue on the Angular repository and ask this question there.
Andrew Hill
  • 2,165
  • 1
  • 26
  • 39
  • We are not using Angular CLI at all. It's pure webpack. We tried using Angular builders, but the problem was that we have a CDN system where all libraries are defined as external. Do u mean in Angular 9 we will be using Ivy out of the box? What about the @angular/compiler npm package? – stephan.peters Jun 25 '19 at 07:24
  • 1
    I understand you're not using the Angular CLI at all. If you read the official angular article I linked above you would see that yes, Angular expects that Ivy will be used out of the box in version 9. I'm not suggesting you use Angular builders - I am saying that the guys who wrote Angular Builders are experienced in working with Angular without the CLI and they might have an answer to your question. I am suggesting you ask this question on their repo. – Andrew Hill Jun 25 '19 at 07:28
2

Ivy is still in preview mode. If you want to try to follow the steps from the screenshot below,

It is mentioned in the official documentation, https://angular.io/guide/ivy#using-ivy-in-an-existing-project

enter image description here

schoolcoder
  • 1,546
  • 3
  • 15
  • 31
  • 2
    Seems he doesn't want to use Angular CLI at all – yurzui Jun 25 '19 at 07:46
  • We have an existing setup with webpack and no Angular CLI. We are defining all our libraries as external bundles (CDN). We are now moving to 8 which is going well, besides the fact we want to use Ivy. There doesn't seem to be cases where other people have a similar application setup. – stephan.peters Jun 25 '19 at 07:48
  • The Angular CLI is a dev dependency used as a piece of developer tooling, and is in many ways just a huge extension of webpack (amongst a lot of other features, I know)... I guess I don't understand why you can't use the CLI, if you are using webpack. They are both npm packages. – hevans900 Jun 26 '19 at 14:05
  • The reason is CDN script tags and externals which have to be compliant to es6 import export syntax. Angular CLI doesn't support externals the way webpack provides it where you define a module to mark as external which is then replaced by a global variable. Angular CLI expects all the sources to be present locally to be build as one piece. – stephan.peters Jul 09 '19 at 06:36