Detailed explanation of WebPack + Angular2 development environment

Just built a WebPack + Angular2 environment, because there is no compromise on Angular and WebPack official website, so it can only be built, and there are some pits in the middle, and summarize the record for communication.

The initial environment after construction is as follows:

 App ---- app.Component.ts ---- app.Module.ts- --- main.tsindex.htmlpackage.jsontsconfig.jsonWebPack.config.js   app.componnet.ts: Component file. Angular2 application is composed of components, component control view; 
Import {company} from ‘@ Angular / Core’; @ Component ({Selector: ‘My- App ‘, Template: `

{{Title}}

my favorite helo is: {{myhero}}
`}) // Export Class AppComponent {Title =’ Tour Of Heroes’; Myhero = ‘Windstorm’;}
  

App.Module.ts: Apply heel module. Angular is modular, has its own module system, known as Angular Module or NgModules; // Missing the module introduction, will output "Uncaught Reflect-Metadata Shim Is Required When Using Class DecorATORS "error

Import 'Core-JS / ES6'; Import 'Core-JS / ES7 / Reflect'; Import 'Zone.JS / DIST / ZONE '; // Introduced ngmodule decorator import {ngmodule} from' @ Angular / core '; // introduced browser module import {browsermodule} from' @ Angular / Platform-Browser '; // Introduced created ComponentImport {appcomponent} From './app.component'; @ ngmodule ({Imports: [Browsermodule], Declarations: [AppCompComponent], Bootstrap: [AppComponent]}) Export Class AppModule {}

main.ts: Used to guide the module start application;

 Import {platformBrowserDynamic} from '@ Angular / Platform-Browser-Dynamic'; import {appmodule} from './app.module'; // Booting Module Launch App PLATFORMBROWSERDYNAMIC (). BootstrapModule (AppModule); index.html: Angular App Host page;   

SmallFat blog

      package.json: one Standardized NPM description file contains the dependent package, custom script command, etc., the CMD terminal can be created in the CMD terminal.   Note that if the introduced Angular module version is included here 2.4.X, will report an error "Angular2 + Jspm.io: Reflect-metadata Shim Is Required by Class Decorators", which is unclear, I hope there is a friend to communicate.    {"Name": "BlogCode", "Version": "1.0.0", "Description": "", "Main": "WebPack .config.js "," dependencies ": {" TS-Loader ":" 2.0.0 ":" @ Angular / Common ":" 2.1.2 "," @ Angular / Compiler ":" 2.2 "," @ Angular / Core ":" 2.1.2 "," @ Angular / Platform-Browser ":" 2.1.2 "," @ Angular / Platform-Browser-Dynamic ":" 2.0 "," RXJS ":" 5.0 .0-beta.12 "," zone.js ":" 0.6.26 ":" ^ 2.4.1 "}," devdependencies ": {" Webpack ":" ^ 2.2.1 ", "@ Types / CorE-JS ":" ^ 0.9.35 "," TypeScript ":" ^ 2.2.0 ":" ^ 2.2.0 "," WebPack-Dev-Server ":" ^ 2.3.0 "}, "scripts": {"test": "echo \" error: no test specified \ "&& exit 1"}, "repository": {"Type": "git", "URL": "https: // git. Coding.net/frankshin/xudengwei.git "}," author ":" "," license ":" ISC "}      Tsconfig.json: Used to define TypeScript Compile into ES5 parameters;   
{“compilerOptions”: {“Module”: “CommONJS”, “Target”: “ES5”, “ModuleResolution “:” Node “,” NOIMPLICITADATA “: True,” EmitDecoratorTadata “: True,” ExperimentAldecorators “: True,” SourceMap “: true,” declaration “: false},” buildons “: false,” Compileonsave “: False,” Exclude “: [” Node_Modules “]}

WebPack.config.js: A standardized CommonJS file for configuring the WebPack compiling parameters.

Module.exports = {Entry: “./app/main.ts”, Output: {Path: __dirname + ‘/ dist’, FileName: ” Bundle.js “}, module: {rules: [{test: /\.tsx?/, loader: ‘ts-loader’, exclude: / node_modules /,},]}, resolve: {EXTENSIONS: [“. Tsx “,” .TS “,” .js “]}};
   
The above is all the contents of this article, I hope that everyone is helped, I hope everyone Support TUMI clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment