目录结构:

angular-quickstart

  |_ ts

    |_ app.ts

    |_ index.ts

  |_ index.html

  |_ package.json

  |_ tsconfig.json

  |_ webpack.config.js

1. angular-quickstart/package.json

{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "I will show you how to set up angular2 development angular-quickstart",
"keywords": [
"angular2",
"angular-quickstart"
],
"scripts": {
"start": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --watch --content-base",
"build": "webpack --progress --colors",
"dev": "webpack-dev-server"
},
"author": "Lin.keqing",
"license": "MIT",
"dependencies": {
"@angular/common": "^2.4.5",
"@angular/compiler": "^2.4.5",
"@angular/core": "^2.4.5",
"@angular/platform-browser": "^2.4.5",
"@angular/platform-browser-dynamic": "^2.4.5",
"@angular/forms": "^2.4.5",
"core-js": "^2.4.1",
"rxjs": "5.0.3",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@types/core-js": "^0.9.35",
"ts-loader": "^2.0.0",
"typescript": "^2.1.5",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}

2. angular-quickstart/tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"moduleResolution": "node",
"noImplicitAny": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"declaration": false
},
"buildOnSave": false,
"compileOnSave": false,
"exclude": [
"node_modules"
]
}

3. angular-quickstart/webpack.config.js

const {resolve} = require('path');

module.exports = {
entry: {
index: './ts/index.ts'
},
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
exprContextCritical: false,
rules: [
{
test: /\.ts$/,
use: ['ts-loader']
}
]
},
resolve: {
extensions: [
'.js',
'.ts'
]
}
};

运行npm install

4. angular-quickstart/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>environment</title>
</head>
<body>
<!--这里引用我们的第一个component-->
<my-app></my-app>
<!--加载使用webpack编译后的bundle-->
<script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>

5. angular-quickstart/ts/app.ts

import {Component} from '@angular/core';

//声明第一个Component
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 AppApple</h1>'
})
export class AppComponent { }

6. angular-quickstart/ts/index.ts

//不显示引入,你会得到"Uncaught reflect-metadata shim is required when using class decorators"的错误
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'; //引入启动器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; //引入我们刚才创建的第一个component
import { AppComponent } from './app'; //声明一个应用模块
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { } //启动应用
platformBrowserDynamic().bootstrapModule(AppModule);

运行 npm start

完。

一个下下来就可以用的环境:

https://github.com/angular/quickstart

配套的学习地址:

http://angular2.axuer.com/docs/ts/latest/guide/learning-angular.html

angular2 基于webpack环境搭建的更多相关文章

  1. webpack 环境搭建

    Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...

  2. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  3. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

  4. Android开发之基于AndroidStudio环境搭建和工程创建

    断断续续的学习安卓也有一段时间了.因为之前是搞iOS开发的, 之前有关iOS的博客请看<我的iOS开发系列博文>.<我的Objective-C系列文章>和<窥探Swift ...

  5. webpack环境搭建

    环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...

  6. react+es6+webpack环境搭建以及项目入门

    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...

  7. webpack环境搭建开发环境,JavaScript面向对象的详解,UML类图的使用

    PS:因为所有的设计模式都是基于面向对象来完成的,所以在讲解设计模式之前先来过一下面向对象都有哪些知识点 搭建开发环境 初始化npm环境 下载安装nodejs安装即可,nodejs自带npm管理包,然 ...

  8. node+webpack环境搭建 vue.js 2.0 基础学习笔记

    npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-c ...

  9. 基于ruby环境搭建Redmine

    环境说明 系统版本    CentOS 6.9 x86_64 软件版本    ruby 2.4.4 rails 4.2 redmine-3.4.5 Redmine是一个开源的.基于Web的项目管理和缺 ...

随机推荐

  1. CodeForces-329C(div1):Graph Reconstruction(随机&构造)

    I have an undirected graph consisting of n nodes, numbered 1 through n. Each node has at most two in ...

  2. MySQL 单笔订单满6个及以上产品且金额>=300赠送优惠券_20161103

    活动内容: 单笔订单满6个及以上产品(帽子.浴巾除外),金额满赠300元,即赠送300-10元(除帽子.浴巾外)优惠券一张.需求数据:满足条件的用户ID活动时间:11.2-11.5(4天)活动规则:① ...

  3. 结合Mysql和kettle邮件发送日常报表_20161001

    十一假期 参加婚礼 稍晚点发博 整体流程步骤是: 写SQL-导出到excel设定excel模板调整格式-设置kettle转换--设置kettle邮件作业--完成 第一.写SQL 保持最近12个周的数据 ...

  4. Father Christmas flymouse

    Father Christmas flymouse Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 3479   Accep ...

  5. 设置可见GPU方式

    只可见第一块GPU os.environ["CUDA_VISIBLE_DEVICES"] = "0"

  6. /boot下面文件说明

    config-3.10.0-229.el7.x86_64 <==此版本核心被编译时选择的功能与模组设定档 grub/ <==旧版 grub1 ,不需要理会这目录了! grub2/ < ...

  7. 洛谷P3205合唱队——区间DP

    题目:https://www.luogu.org/problemnew/show/P3205 枚举点,分类为上一个区间的左端点或右端点,满足条件便+=即可: 注意不要重复(当l=2时). 代码如下: ...

  8. 基于Html5的移动端APP开发框架

    快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...

  9. IoT:目录

    ylbtech-IoT:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbtech.c ...

  10. git repo