ANGULAR2 + Webpack Project to build demo

This article will start from scratch to write the actual code to complete a ANGULAR2 demo.

The digression is actually ANGULAR2 official website's quick Start Project already very cool, but its emphasis fast two words, only enough to practice the play, actually GitHub has already had some good angular2-starter.

1. Install the necessary node environment and NPM

Of course TS environment is also necessary, the current TS has been updated to the 2.1.5+, the author is using the 2.1 5 version, and it is best to use more than 2.0 version of TS, otherwise there will be some embarrassing problems (including type definition and compile errors).

2. About Editors

The author uses is Vscode, uses other popular editor to be possible to like on the line, can even use Visual Studio (but has seen on the net someone uses VS2015 to develop the project which involves the NPM package, even if is the Mac Ding Edition also can the card explode).

3. Bottom directory structure

Imagine that you are writing a background language project, we write the file will eventually be compiled to build the target file to run, Ng2 is also the case, wrote the. ts file, and eventually compiled by our configured compiler (Webpack) to build the target code and run.

Therefore, in addition to ANGULAR2 dependencies, must be configured to the bottom of the webpack. All of the dependency packs are installed through the previously installed NPM. Here's a package.json:package.json.

Package.json is used to manage NPM dependencies, and then you need Tsconfig.json to configure TS, and Tsconfig.webpack.json to match Webpack compilation: Tsconfig.json Tsconfig.webpack.json

Then the Webpack configuration file, the entry for Webpack.config.js:webpack.config.js

This profile will decide whether to use the compilation of the development environment or the compilation of the production environment based on the parameters at run compile time, and the specific compilation configuration will not be affixed to the GitHub address given at the end of the article to view the entire project.

4. Configuration of Angular2

The 3rd section of the configuration is the project NPM dependencies, typescript and Webpack configuration, to provide a dependency on the entire project, and to help compile the actual project code will be written later, and angular2 relationship is not really small, but is the premise of ANGULAR2 project operation. To configure ANGULAR2 now, Webpack as a modular tool requires a portal file index.html as well as several portal scripts: Main.browser.ts polyfills.browser.ts

The role of the former is to guide the operation of the ANGULAR2 program, which is to manage all dependencies of the ANGULAR2 (because ANGULAR2 uses many ES new features, it requires some dependencies to extend the capabilities of browsers that do not support new features).

The actual code may also require a boot file with AOT mode (precompiled mode, more efficient in production environment, very high efficiency), and a custom type declaration file (to help write TS code).

5. The actual code to write--app directory and assets directory

After everything is configured, it's your turn to write ANGULAR2 code, a new app directory to store the code, and a assets file to hold the static resources.

One of the simplest ANGULAR2 projects requires the following files: App.module.ts app.component.ts

One is the root module is a root component, this is not to mention ANGULAR2 specific syntax, the project successfully run first.

In order for Webpack to find our ANGULAR2 code and successfully boot the ANGULAR2 project, you must also add an environment file and an index file: index.ts environment.ts

The following is the current file directory structure:

Now you can run the first ANGULAR2 project by running NPM Install, installing all the NPM packages, and then running the command NPM run Server:dev.

PostScript:

This ANGULAR2 demo configuration has the use of Angularclass HMR plug-ins, and the purpose of building to learn and summarize the main, the actual development of the need to configure unit testing and other things, You can view Angularclass's Angular-webpack-starter open source project directly, which gives a very complete set of ANGULAR2 startup projects that are worth taking some time to understand.

Finally, give the GitHub address of this demo:

Https://github.com/yitimo/angular2-demo-yitim