Plugin doesn't work with angular 5.0.0-rc.0

[log2-hwan]

Seems angular team changed @angular/compiler-cli API since 5.0.0-rc.0.

TypeError: compiler_cli_1.NgcCliOptions is not a constructor
    at /home/travis/build/shakrmedia/frontend/node_modules/ngc-webpack/src/plugin.js:54:76
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

[cyr-x]

Propaply because of this: angular/angular#18966

NgcCliOptions was part of @angular/tsc-wrapper which doesn't exists anymore in angular ^5.x.x.

[Ks89]

The same problem also with 5.0.0-rc.1

[shlomiassaf]

Angular 5 will introduce lots of changes...
Possibly an AOT watch mode and more...

I'll try to explore and see what we can add/improve

[gregbown]

This affects both awesome-typescript-loader and fork-ts-checker-webpack-plugin for Angular AOT builds, so, currently, in order to use Angular 5.0.0+, the only way forward is ngtools/webpack

const { AotPlugin } = require('@ngtools/webpack');
...
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['@ngtools/webpack']
        },
'''
plugins: [
      new AotPlugin({
        tsConfigPath: 'tsconfig.aot.json',
        skipCodeGeneration: false
      }),

[Ks89]

Angular 5.0.0 final is out :)

[shlomiassaf]

Bad news, they have changed the whole process, it's completely different.

They have watch mode built in the compiler now which changed everything... I'll have to assess it and see.

[shlomiassaf]

You can use @gregbown workaround for now.

It means that:

• If you used one of ngc-webpack hooks you cant now
• You can not use a typescript loader (e.g. awesome-typescript-loader , ts-loader)
• You probably can't use typescript transformers (not sure if they allow it in the ng toos)

[shlomiassaf]

OK, I'm trying to get to the best solution here and the situation is tricky and complex.

I'll need you input here

Some background:

• This plugin was built when angular tools for AOT were in the early days.
• It allowed AOT compilation for webpack projects without the angular-cli
• It allowed passing templates and styles through the webpack setup (important!)
• It also added some features not in the @ngtools AOT plugin
  • AOT cleanup
  • Hooking into the compilation and replacing source files, metadata files, resource files
  • Using a dedicated typescript loader (e.g. awesome-typescript-loader , ts-loader)
• Some features were not implemented, such as i18n AOT, virtual FS and more

Nowdays, most of the features are in the @ngtools plugin and the only things not in it are:

• Hooks
• Using a dedicated TS loader.

From a process perspective, ngc-webpack plugin worked in 2 phases

1. Before webpack starts compiling, use the angular compiler to create angular-compiled TS files with a new webpack instance to process templates, sass, css etc... (via loaders)
2. Once (1) finished, let webpack continue, now collecting compiled TS files and remove angular related metadata from developer code as it's no longer needed.

This process has 2 major downsides:

1. Using 2 phases means 2 typescript compilations (actually 3 for cleanup support). This in turn means no sharing of the typechecker, more work and more time...
2. 2 Phases does not allow watch mode, for watch mode in AOT a single process is required. This was not an issue since AOT watch mode did not exist, with 5 it does

@ngtools plugin implements a virtual file system integrated with webpack so it can run the AOT compilation within the same webpack run and add files on the fly while compiling the application.

This plays nicely with the new AOT watch mode feature in the @angular/compiler-cli.

To port ngc-webpack to angular 5 a lot of work is required and it is also mandatory now to support AOT watch mode, its worthless without.
And still, i18n is missing and some other stuff.

Optional solutions:

Here are the options, as I see them:

1. Port the whole thing, as much time as it takes (and it will take)
2. Wrap @ngtools AOT plugin and patch it to support hooks (no dedicated TS loader)
   This should be seamless to the user and with time try to push (3) below and deprecate the library. (only issue I see is lazy routes)
3. Create a PR for @ngtools plugin with the hooks (no dedicated TS loader) and deprecate the library.

Now, i'd like to hear from you:

1. What's the importance of having a dedicated TS loader is for you?
2. with @ngtools plugin getting more and more complex, isn't it risky to relay on a non-official AOT plugin?
3. What other benefits are there, if any, using ngc-webpack?

If you want to use TS Transformer API I assume @ngtools will allow adding it externally at some point...

cc
@gdi2290

[MADzO]

Well for now I will use it like this: https://ibb.co/m7eYfw

[Ks89]

@MADzO is it really possible?

[MADzO]

@Ks89 Yes it is... not ideal solution but working :)

[vadjs]

@MADzO probably it works. But it's terrible solution. Better stay several more days on Angular 4 if it is not super critical.

[shlomiassaf]

Well, the solution is not optimal but not so bad.

Reason is, the compilation is done by angular/compiler and the angular/compiler-cli is just the engine that runs it.

So yes, there are thing happening there which are important like summery files, factory etc ... but it should be fine as you use something farily recent.

For now it should probably do the trick until I push the fix