在 Angular 2 开发中，使用 JavaScript 而非 TypeScript 搭建环境需要手动配置依赖与模块加载逻辑。本文按步骤演示从目录初始化、npm 依赖安装、组件与模块定义到 HTML 入口集成的完整流程，并提供运行验证与常见问题排查依据，帮助开发者快速构建可运行的 Angular 2 基础项目。
创建项目目录与依赖配置
Angular 2 的 JavaScript 环境依赖 npm 进行包管理。首先创建项目目录并初始化结构：
$ mkdir angular-quickstart
$ cd angular-quickstart在项目根目录创建 package.json 文件，声明 Angular 核心库、polyfill 与开发服务器依赖：
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}若 npm 官方源下载较慢，可配置淘宝镜像加速：
$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ cnpm install安装完成后，项目根目录会生成 node_modules 文件夹，包含所有声明的依赖包。此时可创建 app 子目录用于存放应用代码：
$ mkdir app
$ cd app编写 Angular 组件与模块
Angular 应用以组件为核心，组件通过 ng.core.Component 定义视图与行为。在 app/app.component.js 中创建根组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '我的第一个 Angular 应用
'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));该代码使用 IIFE 隔离作用域，将 AppComponent 挂载到全局 window.app 命名空间。selector: 'my-app' 指定组件在 HTML 中的挂载标签，template 定义组件渲染内容。构造函数留空，后续可根据业务扩展属性与方法。
Angular 2 采用模块化架构，需在 app/app.module.js 中声明模块元数据：
(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));imports 引入浏览器平台模块，declarations 注册组件，bootstrap 指定启动组件。模块配置确保 Angular 在初始化时能正确解析依赖与组件树。
配置启动逻辑与 HTML 入口
在 app/main.js 中编写应用启动逻辑，监听 DOM 加载完成后调用 bootstrapModule：
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));创建项目根目录的 index.html 作为入口文件，按顺序加载 polyfill、Angular 核心库与应用脚本：
Angular 2 实例
Loading...
加载顺序需严格遵循：先 polyfill 与 Angular UMD 包，再按组件、模块、启动脚本的顺序引入。HTML 中的 selector 对应，Angular 启动后会替换该标签内容。
添加基础样式文件 styles.css：
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}运行项目与结果验证
在项目根目录执行启动命令：
$ npm start该命令会调用 lite-server 启动本地开发服务器，默认监听 http://localhost:3000/。浏览器访问该地址后，页面将渲染组件模板内容。
若页面未正常显示，可检查以下常见问题：
- 确认
node_modules目录存在且依赖安装完整。 - 检查
index.html中脚本路径与加载顺序是否正确。 - 确保浏览器支持 ES5 并正确加载
core-js与zone.jspolyfill。 - 查看浏览器控制台是否有模块未定义或选择器匹配失败的报错。
本示例使用 Angular 2.0.0 与 JavaScript 语法，适用于学习框架基础结构。现代 Angular 开发已全面转向 TypeScript 与 Angular CLI，建议在实际项目中采用官方推荐工具链以提升开发效率与类型安全。
