Uglify and minify Angular 4 code

Question

I'm using Asp Core +Angular 4 template + webpack in VS 2017. I've published my app ..and looking to ClientApp/dist/main-server.js I see the content is not uglify and minify..it is something like this

    ...
ConfirmComponent.prototype.ngAfterViewInit = function () {
            try {
                $('.modal').removeClass('fade'); 
                setTimeout(function () {
                    $('.modal').addClass('fade');
                }, 500);
            }
            catch (exception) { }
        };
...

in webpack.config.vendor.js I can see a plugin call:

.... 
  plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()   //HERE
        ])
    });
....

in package.json I've added: "uglifyjs-webpack-plugin": "1.0.1", how to uglify and minify the code? thanks

Answer 1

I recommend refactoring your code to work with the Angular CLI, and then minifying with:

ng build --prod

With a Web API project on .net core, once you create a new Angular App with (run this from the same directory as your solution (sln) file:

ng new my-app

Then:

• In angular-cli.json , change outDir to wwwroot
• In tsconfig.json , change outDir to ./wwwroot/out-tsc

At this point, ng build will publish everything to wwwroot , so as long as you include:

app.UseDefaultFiles();

In the Configure method in Startup.cs , browsing to the root of your API will display your Angular app.

Additionally, I like to include a proxy file, called proxy.config.json , which looks like this (replace the port with your API port):

{
  "/api/*": {
    "target": "http://localhost:12345",
    "secure": false,
    "logLevel": "debug"
  }
}

Then, I amend the start script in package.json , like so:

"start": "ng serve --proxy-config proxy.config.json"

At this point, you can debug your API, and just run npm start from the command line, making full use of the Angular CLI. Then, when you want to release, run:

ng build --prod

Also, you can amend your .csproj file to build and minify your angular app when you build your Web API project like so:

<Target Name="Build Angular" BeforeTargets="Build">
  <Message Text="* * * * * * Building Angular App * * * * * *" Importance="high" />
  <Exec Command="ng build --prod" />
</Target>

I personally view Angular as an all-in framework. I don't see the value of using it with Razor. If you want progressive enhancement, use React!