-3

My project has a TypeScript/Express server, and I want to add Angular to the same project.

I completed the official tutorial, so I understand the basics.

Most people will just use the official Angular "boilerplate" - ng new appname. But I want to know the minimum set of packages to add to package.json, and why.

I assume some packages are unnecessary, and were added to make it easier for devs to learn Angular - I don't want these.

The CLI adds these as dependencies:

@angular/animations
@angular/common
@angular/compiler
@angular/core
@angular/forms
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/router
core-js
rxjs
tslib
zone.js

And these as devDependencies:

@angular-devkit/build-angular
@angular/cli
@angular/compiler-cli
@angular/language-service
codelyzer
jasmine-core                     // I assume this is for unit testing
jasmine-spec-reporter            // I assume this is for unit testing
karma
karma-chrome-launcher
karma-coverage-istanbul-reporter
karma-jasmine
karma-jasmine-html-reporter
protractor                       // I assume this is for integration testing
ts-node

Which of these are actually needed? (or put another way: which of them can I remove?)

lonix
  • 14,255
  • 23
  • 85
  • 176
  • Explain the downvote. This is a good question. Most devs just use the boilerplate without caring about the details. I can't build a professional system that way, I need to know why all its bits are needed. – lonix Feb 20 '19 at 13:17
  • Unnecessary tags, too many questions in one question... – Maihan Nijat Feb 20 '19 at 13:19
  • @MaihanNijat These are the questions every professional dev will ask when using an **official** "boilerplate". Should I ask 20 separate questions for the same topic? – lonix Feb 20 '19 at 13:20
  • I understand... I hope you get your answer. – Maihan Nijat Feb 20 '19 at 13:23
  • @MaihanNijat Thanks, me too! :) – lonix Feb 20 '19 at 13:23
  • 1
    _I test my server with Jest. Can I use it instead of Jasmine and Karma and Protractor_ a professional dev would know that this question makes no sense. – Jota.Toledo Feb 20 '19 at 13:35
  • 1
    _An Angular project is compiled and deployed as a set of static files... so I thought everything would be in devDependencies. Why are there packages in dependencies_ you might want to read about the conceptual difference of these two – Jota.Toledo Feb 20 '19 at 13:36
  • 1
    Most of the packages in `dependencies` are required. You could trim a couple from angular depending on your needs. A lot in `devDependencies` is optional, you should be able to answer what you need with some effort by reading about the different modules included in there. – Jota.Toledo Feb 20 '19 at 13:40
  • @JotaToledo A professional would know not to insult others. And by the way, I'm new to the stack so I don't know the answers to that... and I'm humble enough to ask. – lonix Feb 20 '19 at 16:14
  • @Jota.Toledo And my question is valid. I know the difference between the two. But upon deployment, only the dev dependencies are needed. And from what I understand about angular, there will be no "action" on the server.... so why are packages in deps instead of all in devdeps? See, reasonable question. If you don't feel like being helpful, why are you here? – lonix Feb 20 '19 at 16:16
  • Didn't commented with the intention to offend or similar. I actually hinted some answers at your questions. _But upon deployment, only the dev dependencies are needed_ I dont know where you got that from, but its wrong. There is both a conceptual and functional difference in relation to `dependencies` and `devDependencies` that you could easily find in SO. Other than that, you could look at https://stackoverflow.com/questions/47155209/create-angular-cli-app-without-default-packages-for-tooling – Jota.Toledo Feb 20 '19 at 16:58
  • @Jota.Toledo Some of the stuff in that link was helpful, thanks. And my misunderstanding is because from what I understood from the official angular tutorials, was that it compiles - at development time - to a set of static files, which are uploaded to a server. So I could not (and still don't) understand why I need dev dependencies at runtime - I will do more digging. – lonix Feb 20 '19 at 17:42
  • _why I need dev dependencies_ Do you mean `devDependencies`? If thats the case, then no, they arent required. See https://stackoverflow.com/a/22004559/5394220 – Jota.Toledo Feb 21 '19 at 07:04
  • Sorry no I mean `dependencies`. I'm gonna ask a separate question for that. – lonix Feb 21 '19 at 07:17

1 Answers1

1

dependencies. From what I can tell, in this list nothing is optional.

@angular/animations For animations. Without animations, web page transitions can seem abrupt and jarring. Docs

@angular/common @angular/compiler @angular/core All three are core library.

@angular/forms Supports HTML forms, specifically bindings.

@angular/platform-browser Supports delivery of Angular apps on different supported browsers. Docs

@angular/platform-browser-dynamic Knows how to bootstrap the application on specific browser. Docs

@angular/router Supports routing.

core-js Modular standard library for JavaScript. Includes polyfills for ECMAScript 5, ECMAScript 6. Docs

rxjs Supports events and observables.

tslib This is a runtime library for TypeScript that contains all of the TypeScript helper functions. Docs

zone.js The main purpose of using zonejs in angular2 is to know when to render. Docs

devDependencies.

@angular-devkit/build-angular Probably required by angular-cli to build.

@angular/cli @angular/compiler-cli Both are required for angular-cli to work correctly.

@angular/language-service The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates. Docs

codelyzer Static analysis for Angular projects. Docs

jasmine-core jasmine-spec-reporter Used for unit-testing and generating coverage report respectively.

karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter Karma is a test runner. Jasmine uses this. The reporters are used to generate coverage.

protractor Used for end-to-end testing.

ts-node Typescript for NodeJs.

To your original question, I wouldn't recommend to remove anything because as you can see, each of them are doing something specific which you don't want to loose while development. My small angular app is about 500Mb, but it doesn't matter because once I do ng build, it gets compiled to 20Mb.

Additionally as pointed in linked SO answer, you can use ng new --minimal [name] to generate a minimal list of packages absolutely required to run your application.

Community
  • 1
  • 1
Rash
  • 7,677
  • 1
  • 53
  • 74