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

JMK · Accepted Answer · 2017-11-10 11:53:18Z

4

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!

edited Nov 10, 2017 at 11:53

answered Nov 10, 2017 at 11:40

JMK

28.2k56 gold badges176 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mrapi Over a year ago

Hi.I'm new to this,please be patient.I've created a new angular cli project,I only got the file .angular-cli.json and put in my VS 2017 Angular then follow your steps..but I end up with this error Cannot find module '@angular/compiler-cli'.I'm looking more for uglify the code.thanks

JMK Over a year ago

Hey, could you try creating just a blank asp.net core Web Api project (no angular) and then go through the above steps?

mrapi Over a year ago

Hi.I've created a new project,this time got this error: The command "ng build --prod" exited with code 1 with no other error info.What about React,is powerful than Angular?Can you give a starting point to get more info about it?thanks

Shoniisra Over a year ago

angular is a complete framework: it has tools to do routing to the pages, it has a clear structure of how to use everything, practically you have everything ready to start working. On the other hand react is a library that you can include in any project and it is in charge of one thing in particular, creating reusable components. Both are excellent options depending on what you want to do.

Collectives™ on Stack Overflow

Uglify and minify Angular 4 code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related