详解webpack+angular2开发环境搭建
刚搭建完一个webpack+angular2环境,由于angular及webpack官网上没有一个折中的搭建方案,所以只能摸索着搭建,中间遇到一些坑,遂总结记录下来,以供交流。
搭建完后的项目初步环境如下:
app ----app.component.ts ----app.module.ts ----main.ts index.html package.json tsconfig.json webpack.config.js
app.componnet.ts:组件文件。angular2应用是由组件构成,组件控制视图;
import{Component}from'@angular/core'; @Component({ selector:'my-app', template:`{{title}}
Myfavoriteherois:{{myHero}}
` }) //使用变量初始化方式 exportclassAppComponent{ title='TourofHeroes'; myHero='Windstorm'; }
app.module.ts:应用跟模块。angular是模块化,拥有自己的模块系统,被称为angular模块或NgModules(深入了解);//缺少下述模块引入,会输出"Uncaughtreflect-metadatashimisrequiredwhenusingclassdecorators"的错误
import'core-js/es6'; import'core-js/es7/reflect'; import'zone.js/dist/zone'; //引入NgModule装饰器 import{NgModule}from'@angular/core'; //引入浏览器模块 import{BrowserModule}from'@angular/platform-browser'; //引入创建的component import{AppComponent}from'./app.component'; @NgModule({ imports:[BrowserModule], declarations:[AppComponent], bootstrap:[AppComponent] }) exportclassAppModule{}
main.ts:用于引导跟模块启动应用;
import{platformBrowserDynamic}from'@angular/platform-browser-dynamic'; import{AppModule}from'./app.module'; //引导跟模块启动应用 platformBrowserDynamic().bootstrapModule(AppModule); index.html:angular应用宿主页面;small胖的博客