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: https://github.com/angular/angular/pull/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

[Ks89]

@shlomiassaf Thank for you interest in this project and to try to update it to support Angular 5. It's really appreciated.

[MISRV001]

@shlomiassaf - Thanks for sharing details. Also, Can you please share the plan to push these fixes. Do let me know if I can help you on this!!

[shlomiassaf]

Hi guys,

Thank you all for the support!

I have refactored ngc-webpack to support angular 5 using @ngtools/webpack instead of @angular/compiler-cli, this allows keeping the extra features in ngc-webpack with full support for all @ngtools/webpack features.

It will also allow easy migration to/from @ngtools/webpack

Please see the readme for more details.

Use [email protected]

Thanks!

[MISRV001]

@shlomiassaf - Thanks, Buddy!! Let me try it and get back to you with the result!!

[Ks89]

I have some question?

1. Is it mandatory to install angular/cli to use ngtools/webpack?
2. Is angular2-template-loader required?
3. Is HMR working with angularclass/hmr-loader also with ngtools/webpack?
4. And how to configure ng-router-loader (for instance genDir)

I never used ngtools. Please, could you provide an example, for instance with a pull request to angularclass starter? Because I cannot use it. I'm able to build, but when I try to run it I get this error:

Uncaught ReferenceError: __decorate is not defined

[shlomiassaf]

1. No
2. Not required, you need to remove it.
3. Did not test it, will require exploration with @gdi2290
4. Not required, done by the plugin, you need to remove it.

Pushing this to angular-starter will take some time because it requires rearranging the plugins and loaders to be efficient.

Running it however should be an issue.

The test directory has a webpack config it uses to init the tests https://github.com/shlomiassaf/ngc-webpack/blob/master/test/testing/buildConfig/webpack.plugin-full.js

Follow it from there to the base webpack config to get a clue on a valid setup

[artaommahe]

@shlomiassaf add @ngtools/webpack to install string in readme

[Ks89]

@shlomiassaf first of all, thank you for the update of angular-starter by angularclass. I have a question, probably stupid, but I will try.

ngc-webpack supports multiple entry point (for instance 2 spa applications (main and admin))?

[shlomiassaf]

@Ks89 ngc-webpack is just a proxy to @ngtools/webpack with some extensibility features added.

So, if @ngtools/webpack supports it so does ngc-webpack, best way to look is in the angular cli docs.

If it works there but not with ngc-webpack it's probably something that are required to setup in the angular starter project.

Let me know if this is the case.

[artaommahe]

@shlomiassaf no way for custom ts loaders here? tried to update medium size project (~70-80k loc) to ng5 from ng4 and got x2 prod build time (x3 with all build optimizations from angular team). ng4 build uses ngc-webpack + ts-loader + thread-loader, ng5 - @ngtools/webpack. Or maybe any way to get only components factories from ngc without compiled ts code..