Need advice about which tool to choose?Ask the StackShare community!

Angular

1.6K
4.7K
+ 1
499
Angular CLI

898
740
+ 1
0
Add tool

Angular 2 vs Angular CLI: What are the differences?

Introduction

Angular 2 and Angular CLI are both widely used frameworks for developing web applications. While Angular 2 is a complete platform for building single-page applications, Angular CLI is a command-line interface tool that simplifies the process of creating and managing Angular projects. Although they are closely related, there are several key differences between Angular 2 and Angular CLI that developers should be aware of.

1. Template Structure:

In Angular 2, the template structure follows a component-based approach, where each component has its own HTML, CSS, and TypeScript files. This allows for better organization and separation of concerns. On the other hand, Angular CLI provides a project structure that includes separate folders for components, services, and other modules, making it easier to manage larger projects.

2. Code Generation:

Angular 2 requires developers to manually create the skeleton code for components, services, and other modules. This can be time-consuming and error-prone, especially for larger projects. Angular CLI, on the other hand, provides a set of powerful commands that automatically generate the necessary files and code for different project components, saving developers a significant amount of time and effort.

3. Build and Compilation:

Angular 2 uses a custom build process that involves transpiling TypeScript code to JavaScript, bundling all the dependencies, and generating the final output files. While this provides a high level of customization, it can be complex and requires additional tools and configuration. In contrast, Angular CLI abstracts away the build process and automates it, making it easier for developers to build, compile, and optimize their applications.

4. Testing and Debugging:

Angular 2 provides a testing framework, known as @angular/testing, which allows developers to write unit tests and perform end-to-end testing. However, setting up and configuring the testing environment can be challenging and time-consuming. Angular CLI simplifies this process by providing a built-in testing framework, making it easier for developers to write and execute tests, as well as debug their applications.

5. Project Configuration:

Angular 2 requires developers to manually configure various aspects of the project, such as routing, TypeScript compilation options, CSS preprocessors, and more. This can be overwhelming, especially for beginners. Angular CLI, on the other hand, provides a centralized configuration file (angular.json) that allows developers to easily configure different aspects of their project, reducing complexity and making it easier to maintain and update the project configuration.

6. Deployment and Optimization:

Deploying and optimizing an Angular 2 application can be a complex process, involving tasks such as minification, code splitting, tree shaking, and caching. Angular CLI simplifies this process by providing built-in optimization features, such as production builds that automatically minify and optimize the code, making the application smaller and faster to load. Additionally, Angular CLI includes features like lazy loading, which further enhances the performance of the application.

In Summary, Angular 2 and Angular CLI have several key differences. Angular 2 focuses on providing a platform for building single-page applications, while Angular CLI simplifies the development process by automating tasks like project setup, code generation, testing, and deployment. Angular CLI provides a centralized configuration file, built-in optimization features, and a modular project structure, making it easier for developers to manage and maintain their applications.

Decisions about Angular and Angular CLI
Dennis Ziolkowski
Migrated
from
AngularJSAngularJS
to
AngularAngular

I was first sceptical about using Angular over AngularJS. That's because AngularJS was so easy to integrate in existing websites. But building apps from scratch with Angular is so much easier. Of course, you have to build and boilerplate them first, but after that - you save a ton of time. Also it's very cozy to write code in TypeScript.

See more
Julius alvarado

It is a complete waste of time and life to learn a different framework to solve the same problem (Both AngularJS and Angular build A+ UI's, but both require a lot of time to learn). It's dumb to spend 200 hours learning AngularJS, then 200 hours learning Angular when you could spend 200 hours learning AngularJS and 200 hours learning how to solve a different problem (like AI/ML, Data Science, AR/VR, Digital Marketing, etc.)

See more
Kyle Harrison
Web Application Developer at Fortinet · | 2 upvotes · 46.7K views

When deciding on a front end framework to build my bitcoin faucet project, I knew I needed something battle hardened, dependedable, but also feature filled and ready to go out of the box.

While I've written some smaller apps with ng2+, I've never gone full tilt with it so I knew there were still some things to learn, and most importantly: how to do them properly, such as proper component architecture and breaking old habbits from ng1.

I didn't opt for React in this case, simply due to the need to stack more and more things on top of it to do what I'd need it to do. I wanted a framework that was going to take over routing and execution of complex UI controls, and keep items outside of a component's scope updated and react to events. This framework needed a comprehensive event emission system, data acquisition and handling, bi-directional data binding, state, and a series of things that you'd need to install separately for React to match up to what's already in the box with Angular.

I opted to stick to Angular instead of Vue for the fact that Angular also already has it's entire build system ready to go and comprehensivly built to deliver the tiniest version of it's deliverable. I was hosting this thing in a google cloud instance, so I needed to make sure the app stayed as small as possible, and could automatically trim out the cruft. This is where Angular's built in Tree Shaking took precedence for me.

Vue is more than capable of handling everything I'd need, and it was something I took serious considerion of. For instance, Vue poweres Cointiply, another bitcoin faucet application that's highly reactive and high componentized just like I wanted.

But I'd still need to learn Vue, I'd still need to configure it's build system, and I still wanted to use SCSS and TypeScript.

So Angular it was. ng8 is a great platform for building very complex user interfaces, and has many of the problems you'd inevitably face integrating a user interface to an application already figured out, and complete with a best practice recommendation.

React and Vue, given enough time and energy, are super capable platforms. No one can deny that. Angular's "A-Z Batteries Included" approach to the whole development process is what made it especially enticing this time.

See more
Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Angular
Pros of Angular CLI
  • 109
    It's a powerful framework
  • 53
    Straight-forward architecture
  • 48
    TypeScript
  • 45
    Great UI and Business Logic separation
  • 40
    Powerful, maintainable, fast
  • 39
    Amazing CLI
  • 33
    Great mvc
  • 29
    Powerfull Dependency Injection
  • 19
    Easy to build
  • 16
    All in one Framework
  • 15
    Opinionated, batteries-included approach
  • 11
    Schematics
  • 10
    Solid Standard Setup.
  • 8
    Structured
  • 7
    Performance
  • 5
    Complex
  • 4
    Only for single page applications
  • 3
    Builders
  • 2
    RxJS
  • 2
    Ng upgrade
  • 1
    React
    Be the first to leave a pro

    Sign up to add or upvote prosMake informed product decisions

    Cons of Angular
    Cons of Angular CLI
    • 9
      Overcomplicated
    • 9
      Large overhead in file size and initialization time
    • 2
      Ugly code
    • 2
      CLI not open to other test and linting tools
      Be the first to leave a con

      Sign up to add or upvote consMake informed product decisions

      What is Angular?

      It is a TypeScript-based open-source web application framework. It is a development platform for building mobile and desktop web applications.

      What is Angular CLI?

      A command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console.

      Need advice about which tool to choose?Ask the StackShare community!

      What companies use Angular?
      What companies use Angular CLI?
      See which teams inside your own company are using Angular or Angular CLI.
      Sign up for StackShare EnterpriseLearn More

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Angular?
      What tools integrate with Angular CLI?

      Sign up to get full access to all the tool integrationsMake informed product decisions

      What are some alternatives to Angular and Angular CLI?
      React
      Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
      Polymer
      Polymer is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries. Polymer is based on a set of future technologies, including Shadow DOM, Custom Elements and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Polymer evacipates, leaving only the value-adds.
      Aurelia
      Aurelia is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.
      Vue.js
      It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.
      Meteor
      A Meteor application is a mix of JavaScript that runs inside a client web browser, JavaScript that runs on the Meteor server inside a Node.js container, and all the supporting HTML fragments, CSS rules, and static assets.
      See all alternatives