I have used Angular1 before and although the process of learning is a bit curved, I feel that it is relatively smooth step by step, and it is mainly used in some personal projects. Later, I tried Vue and felt that it was more user-friendly and efficient, so I used it for some small projects. The project has been built using vue.

At present, Ng2 has released the official version. Considering Ng’s community, resources, and documentation, I can’t help but want to try it. After trying it, I started to wonder if I was using it in the wrong way. I mainly encountered the following problems:

1 Integration issues with Webpack

I spent the whole morning (question day) following the document step by step, and finally even directly copied all the file contents involved in the document, but it still couldn't run. Google couldn't completely solve various errors. In short, I encountered the Typescript version again. , webpack version. In the end, I had no choice but to find something like webpack-starter, run it, and then started to check the configuration. I found that webpack in the starter is version 2.x. I don’t know if this is the main reason. There is no repo in the official website that can be cloned. You can't run yet, really? ? ?

The reason why I hope to build the environment step by step is that when I come into contact with a new thing, I should know what I am doing, rather than having a big and comprehensive plan, otherwise I will not know where the problem is caused (TypeScript, Systemjs, Ng2 is relatively new to me).

In addition, the reason why webpack is used is because the workflow based on webpack is already very familiar, and the module manager Systemjs has not found any obvious advantages at present, because based on the existing conditions, I think packaging, compression, hashing Naming and the like are still necessary. Is it really wise to use Systemjs to make mindless requests?

2 Dependencies

When I first started using NG2, I found that I had to constantly copy and paste several libraries, such as polyfills zone rxjs, etc., and I was confused. These are the libraries that are necessary for Ng2 to run. Why don't you set the dependencies yourself? Do you want the user to add them one by one manually? There is also the polyfills, I thought they only support IE, and I thought I would just focus on Chrome and not add them, but it was stuck for a long time. It turns out that Chrome also needs this thing, and I really don’t want to complain.

3 frame size

After barely running, package the files in production mode, basically three polyfills vendor app:
polyfills.ts:

import 'core-js/client/shim';
import 'reflect-metadata';
require('zone.js/dist/zone');
import 'ts-helpers';
if (process.env.ENV === 'build') {
  // Production
} else {
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

vendor.ts:

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';
import '@angularclass/hmr';

After the three files are compressed and obfuscated, the total is about 1.2M. It’s really haha. There is no comparison with Vue in this regard

4 Component Organization

Traditionally, one component corresponds to a ts html less file (although the html file can be written in ts in multiple lines, but it is anti-human for templates with more content), which seems really big. , is there a file similar to .vue that can centrally manage components?

In short, the process of using Ng2 is really overwhelming (the integration with webpack part), so I want to ask what advantages Ng2 currently has?