could you please add example how to run it with @angular/cli

[MariMax]

1) I created new project ng new typewiz && cd ./typewiz 2) ejected angular cli ng eject 3) added typewiz-webpack: yarn add typewiz-webpack -D 4) added loader, plugin and middleware

   {
     test: /\.ts$/,
     loaders: ['@ngtools/webpack', 'typewiz-webpack'],
   }
....
   plugins: [
      ...
      new TypewizPlugin(),
    ]
...
  "devServer": {
    "historyApiFallback": true,
    before: function(app) {
      typewizCollectorMiddleware(app, 'collected-types.json');
    }
  }

after build I can see an error in the console:

webpack: Compiled successfully.
/Users/max/projects/typewiz/src/index.html:68
                var xhr = new XMLHttpRequest();
                          ^

ReferenceError: XMLHttpRequest is not defined
    at Timeout._onTimeout (/Users/max/projects/typewiz/src/index.html:68:27)
    at ontimeout (timers.js:460:11)
    at tryOnTimeout (timers.js:298:5)
    at Timer.listOnTimeout (timers.js:261:5)
error An unexpected error occurred: "Command failed.
Exit code: 1

mac/high sierra/node 9.6.1/yarn 1.5.1/angular-cli 1.7.1

[urish]

Thanks for the report @MariMax!

Seems strange that XMLHttpRequest is not defined - it seems like this code is running inside your Webpack process for some reason. Perhaps this happens because of Angular universal?

Any chance you can put the setup that you created in a github repo so I can further look into it?

[MariMax]

@urish here https://github.com/MariMax/typewiz-18-example

[urish]

Thanks, seems to reproduce here - I added a throw statement to where we define the timer, and it seems to do with the HtmlWebpackPlugin:

ERROR in   Error: C:\P\demos\typewiz-18-example\src\index.html:67
              throw new Error('here');
              ^
  Error: here

  - index.html:67
    C:/P/demos/typewiz-18-example/src/index.html:67:19

  - index.js:231 HtmlWebpackPlugin.evaluateCompilationResult
    [typewiz-18-example]/[html-webpack-plugin]/index.js:231:26

  - index.js:117
    [typewiz-18-example]/[html-webpack-plugin]/index.js:117:21

We probably have to be more selective about adding the reporting code to the generated webpack bundles. I will keep investigating!

[urish]

I fixed this and released as 0.3.2.

It seems like the loader does not add the code to collect the type information on your project, however. I will try to figure out why - I have a feeling it may be related to the way @ngtools/webpack works.

[urish]

Related issue: angular/angular-cli#9559

[krishna217]

@urish can u add a example how to integrate it with angular-cli.

[urish]

@krishna217 Angular CLI has a built-in webpack configuration and it does not allow you to make arbitrary changes to that configuration. In addition, the AngularCompilerPlugin does not take any input provided by previous loaders in the chain. Thus, making TypeWiz work with the Angular CLI is very challenging. The situation may improve once #41 is implemented, as we won't need to set up a separate loader just for the instrumentation.

There is a workaround though - you can run the instrumentation process manually, outside of webpack, using the instrument command TypeWiz CLI, and import $_$twiz from typewiz-core/type-collector-snippet somewhere in your code and register it on the global object (i.e. window). Then, you'd have to copy the collected type information - this could be done by running JSON.stringify($_$twiz.get()) in your browser console and copying the result into collected-types.json. Finally, use git to revert the instrumented source files to their original version. This process is quite cumbersome, but it can probably do the trick if you wanted to do just one shot.

[krishna217]

@urish Thanks for the workaround.

[urish]

Update: I had some progress on the angular branch. Once this is released, using TypeWiz with Angular should be as simple as:

npm i -D typewiz-webpack typewiz
npm run typewiz angular

[urish]

https://medium.com/@urish/angular-schematics-and-the-future-of-typewiz-c266a5442c82

Closing this issue - watch progress in #73