Home > Developer > Web Develop
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 packagesModify 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.jsonAdd 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 " ]}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 componentIn 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 ModuleAngular 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 AppTo 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.
7. Packaging with WebpackImport "./polyfills.browser""./app";
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!.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
