设置 Angular 2 的开发环境
4.79/5 (9投票s)
Angular 2 的开发环境设置
引言
在本文中，我们将介绍如何设置 Angular 2 的本地开发环境。本文涵盖了使用 TypeScript 和 ES6 创建基于 Angular 的 Hello World 应用程序所需的最低配置。
我希望就本文获得反馈。请随时分享您的评论，您也可以通过 shettyashwin@outlook.com 发送电子邮件给我。如果您喜欢本文，请不要忘记给它评分。
关于 Angular 2 的其他文章。
必备组件
您需要在本地系统上安装 Nodejs 和 npm。您可以通过运行 node --version 和 npm --version 来验证这一点。我使用的是 node 版本 6.9.1 和 npm 版本 3.10.8。
开始吧
让我们开始构建我们的环境。在本文中，我们将构建一个依赖于 TypeScript 和 ES6 的环境。打开命令提示符/终端，通过 npm 安装 typescript 包。
npm install -g typescript
使用 -g，我们已全局安装了 TypeScript，可以在所有应用程序中访问。现在，让我们创建一个文件夹来存放我们的应用程序代码。我已将文件夹创建在 D:\RD\AngularII，但您可以根据自己的偏好选择不同的路径。在 AngularII 文件夹中，我们将为本次会话创建一个单独的文件夹。在执行以下命令之前，请确保您的命令提示符/终端已设置为我们将要存放应用程序代码的文件夹（在本例中为 D:\Rd\AngularII）。
mkdir gettingStarted && cd gettingStarted
上述命令将创建一个文件夹，并将您的基础目录设置为我们刚刚创建的文件夹。要使用 TypeScript 构建我们的应用程序，我们需要添加 tsconfig.json。使用 tsconfig.json，我们将定义输出类型和目录。
tsc --init --target es5 --sourceMap --experimentalDecorators --emitDecoratorMetadata
上述命令将在您的根目录中创建 tsconfig.json。在记事本或您熟悉的任何文本编辑器中打开 tsconfig.json。将以下标签添加到 compileroption 部分。
"outDir" : "build"
通过添加以上标签，我们刚刚配置了 TypeScript 的输出，使其在根级别生成一个 build 文件夹。此 build 文件夹将包含将提供给 Web 浏览器的脚本。同样，我们将配置 TypeScript 以从打包中排除 node_modules。将以下标签添加到您的 tsconfig.json。
"exclude": ["node_modules"]
您的 tsconfig.json 的最终版本应如下所示
还将需要 Package.json 文件。在 Package.json 中，我们将拥有有关依赖项和我们将经常用于开发的任务的信息。在命令提示符/终端中运行以下命令。这将启动一个交互式工作流。
npm init
以下是您可以在交互模式下输入的信息。您可以按 Enter 键忽略其他值。
- 名称: session-v
- 版本: 1.0.0
- 描述: 一个第 5 节的教程
- 主文件: index.js
- 作者: [您的姓名]
让我们添加运行此应用程序所需的依赖项。请注意，如果您使用的是 npm 3 或更高版本，则必须手动加载依赖项。以下命令基于 npm 3 功能。对于低于 npm 3 的版本，您只需要包含 angular2。它将自动加载其他依赖项。
npm install --save @angular/common@2.4.0 @angular/compiler@2.4.0
@angular/core@2.4.0 @angular/platform-browser@2.4.0 @angular/platform-browser-dynamic@2.4.0
@angular/router@3.4.0 systemjs@0.19.40 core-js@2.4.1 reflect-metadata@0.1.8 rxjs@5.0.1 zone.js@0.7.4
npm install --save-dev lite-server concurrently
Lite-Server 和 Concurrently 仅在开发时需要，因此我们添加了 --save-dev 作为参数。使用 --save-dev 加载的模块不会与应用程序的最终代码一起打包。
打开并向您的 package.json（应位于您的根文件夹中）添加以下标签。这些标签是用于（监视）代码更改时重新加载脚本和（服务）在本地托管我们的应用程序的任务。
"scripts": {
"start": "concurrently \"npm run watch\" \"npm run serve\"",
"watch": "tsc -w",
"serve": "lite-server"
},
您的最终 package.json 应如下所示
要了解为什么我们在上面使用 ^，请访问 https://docs.npmjs.net.cn/files/package.json#dependencies 以获取详细信息。
在根目录中创建一个 app 文件夹，并在其中创建一个名为 app.component.ts 的新文件，并添加我们的第一个组件。在本教程中，我们将在此 app 文件夹中维护所有 .ts 文件。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>Hello, Angular2</h1>'
})
export class AppComponent { }
要打包我们的应用程序模块，请添加一个名为 app.module.ts 的新文件。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
现在，在根目录中添加 index.html，它将作为起始页面。
<html>
<head>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('applicationStartup').catch(function (err) {
console.error(err);
});
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
好的，现在让我们通过添加一个新文件 main.ts 和 systemjs.config.js 来引导我们的代码。
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
systemjs.config.js
System.config({
defaultJSExtensions: true,
map: {
app:"applicationStartup",
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser':
'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic':
'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
'rxjs': 'node_modules/rxjs'
},
packages : {
app : {
main : '../../build/main.js',
defaultJSExtensions : 'js'
},
rxjs :{
defaultJSExtensions : "js"
}
}
});
我们的文件夹结构应如下所示
在命令提示符/终端窗口中，执行以下命令。
npm start
npm 将读取您的 package.json 文件并执行我们在 scripts 部分添加的 start 命令。一旦 npm start 执行成功，您应该可以在 https://:3000 上看到应用程序页面。
由于 npm start 也配置为自动加载，因此对代码文件的任何更改都将在保存代码更改时自动重新加载页面。要测试这一点，请更改 app.component.ts 中的“hello angular 2”为“My session 5 tutorial”并保存。您应该能够看到应用程序页面已自动更新为新文本。
