Webpack Getting Started Guide-3. Hello, angular2!.

Source: Internet
Author: User
Tags export class

Webpack Getting Started Guide-1. Install Webpack Getting Started Guide-2. Modules

This time, we use Webpack to package the application of Angular 2.

Compared to the official Hello, Angular 2 project, we do not use system.js, but instead use the TypeScript to compile directly, and then use Webpack to package the generated code.

1. Download Angular 2 and dependent packages

Modify our Package.json file, add Angular 2 involved package, and Angular 2 depends on the package, later, we can slowly introduce the purpose of each package, this file can also be saved, and then directly used.

{  "Name": "W1",  "Version": "1.0.0",  "description": "",  "Main": "Index.js",  "Dependencies": {    "@angular/common": "~2.1.1",    "@angular/compiler": "~2.1.1",    "@angular/core": "~2.1.1",    "@angular/forms": "~2.1.1",    "@angular/http": "~2.1.1",    "@angular/platform-browser": "~2.1.1",    "@angular/platform-browser-dynamic": "~2.1.1",    "@angular/router": "~3.1.1",    "Angular-in-memory-web-api": "~0.1.13",    "Core-js": "^2.4.1",    "Reflect-metadata": "^0.1.8",    "Rxjs": "5.0.0-beta.12",    "Zone.js": "^0.6.26",    "Ie-shim": "^0.1.0"  },  "Devdependencies": {    " html-webpack-plugin": "^2.24.0 ",    "Ts-loader": "^0.9.5",    "Typescript": "^2.0.3",    "Webpack": "^1.13.2"  },  "Scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1"  },  "keywords": [],  "Author": "",  "License": "ISC"}

Yellow is the newly added package, we can edit the Web page of an app hosted by ourselves, so the plugin that automatically generated the page is deleted.

Open the console window and perform a NPM install to mount the packages to your local.

2. Modify Tsconfig.json

Add two more lines to the TypeScript profile Tsconfig.json to support decorator, which is a new feature of JavaScript, Angular 2 uses this feature everywhere. The contents of the modified file are as follows.

{  "compileroptions": {    "target": "ES5",    true,      true ,     true    },  " Exclude ": [    " Node_modules "  ]}

3. Create an app hosted Web page

This time, we edit the hosted page directly instead of generating it automatically. This is because we want to be able to add a stage for the Angular 2 application.

<!DOCTYPE HTML><HTML>  <Head>    <MetaCharSet=utf-8>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1">    <title>Hello, Angular2.</title>  </Head>  <Body>    <My-app>Loading ...</My-app>    <Scriptsrc= "./bundle.js"></Script>  </Body></HTML>

is a my-app tag, in Angular 2, we can customize the mark, this My-app is our application after the stage of performance.

A simpler paragraph of the script is to directly reference the script we are going to generate.

4. Creation of the first Angular 2 component

In Angular 2, the basic unit of the UI is called the component Component, a component is mapped to a custom tag, and we can define the actual content of the tag ourselves.

Create a file named Appcomponent.ts at the root of the project, as follows.

Import {Component} from ' @angular/core '; @Component ({    selector: ' My-app ',    template: ' < H1 > My First Angular App</H1>'}) Export class AppComponent {}

@Component is the statement that we are going to define a component, selector defines how we will use the component later, and the My-app tag we use on the page comes from here. When the template is running, the My-app actually shows the content of the templates. Here is the headline of a number one.

5. Define Module

Angular 2 defines a concept of a module, the related components can be encapsulated as a component, the concept we learn later, here first to see.

Under the project root directory, create a file named App.module.ts, as follows.

Import {Ngmodule} from      ' @angular/core '@angular/platform-browser '; import {AppComponent}  './app.component '; @NgModule ({  imports: [Browsermodule],  declarations: [AppComponent],  Bootstrap: [AppComponent]}) Export class Appmodule {}

It is to encapsulate the newly defined AppComponent into a Module, noting that the bootstrap, which starts with this component, starts with AppComponent. Can be understood as the first interface.

6. Guide the App

To launch the app, Angular 2 provides the loader. Create a file named App.ts as the startup file for our app. Here we use the browser loader provided by Angular 2 to load our boot module.

Import {platformbrowserdynamic} from ' @angular/platform-browser-dynamic './app.module '; Platformbrowserdynamic (). Bootstrapmodule (appmodule);

In fact, the basic structure of the program has been created.

However, there is a basic file that needs to be addressed.

In Angular 2, the underlying technology, such as many of ES6 's technologies, is not supported by the current JavaScript, Angular 2 is supported with Core-js, and zone.js and so on. In order to load these dependent libraries in advance, we need to create a file named Polyfills.browser.ts to load the libraries, which generally do not need to be modified frequently.

//PolyfillsImport' Ie-shim ';//Internet Explorer 9 Support//import ' core-js/es6 ';//Added parts of ES6 which is necessary for your project or your browser support requirements.Import ' Core-js/es6/symbol '; Import' Core-js/es6/object '; Import' Core-js/es6/function '; Import' Core-js/es6/parse-int '; Import' Core-js/es6/parse-float '; Import' Core-js/es6/number '; Import' Core-js/es6/math '; Import' Core-js/es6/string '; Import' Core-js/es6/date '; Import' Core-js/es6/array '; Import' Core-js/es6/regexp '; Import' Core-js/es6/map '; Import' Core-js/es6/set '; Import' Core-js/es6/weak-map '; Import' Core-js/es6/weak-set '; Import' Core-js/es6/typed '; Import' Core-js/es6/reflect ';//See issue https://github.com/AngularClass/angular2-webpack-starter/issues/709//import ' core-js/es6/promise ';Import' Core-js/es7/reflect '; Import' Zone.js/dist/zone '; Import' Zone.js/dist/long-stack-trace-zone ';

Finally, we want Webpack to introduce this polyfills and then boot the Angular 2 application, so we can create another index.ts to accomplish this task. The content is very simple.

Import "./polyfills.browser""./app";

7. Packaging with Webpack

Finally, we just need to tell Webpack to start packing from this index.ts, Webpack can find other related modules according to the Import module in this file, until all the modules are found, then compile, package, and finally output to Bundle.js can do it. Instead of using auto-generated pages this time, the files are actually shorter,

varHtmlwebpackplugin = require (' Html-webpack-plugin ')); Module.exports= {    //entrance    entry: "./index.ts", //the file name of the outputoutput: {filename:' Bundle.js '}, Resolve: {//Add '. ts ' and '. TSX ' as a resolvable extension.Extensions: [', '. ts ', '. js ']}, module: {loaders: [//All files with a '. ts ' extension would be handled by ' Ts-loader '{test:/\.ts$/, Loader: ' Ts-loader ' }        ]    }};

8. Packaging and Running

If you have completed the previous steps, open the console creation and execute the webpack command directly, a new Bundle.js file will be generated automatically.

Launch your browser and open the Index.html page directly, you should be able to see your first Angular 2 interface.

Webpack Getting Started Guide-3. Hello, angular2!.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.