如何本地搭建并运行下载的Angular Plunker项目？

刚从Plunker下载的代码包没有本地运行说明确实挺头疼的，别担心，我给你两种可行的方案，根据你的需求选就行：

方案一：快速静态运行（无需构建） #

Plunker上的Angular项目大多依赖SystemJS或者原生ES模块加载代码，不需要提前构建，只需要一个本地服务器解决浏览器的跨域限制就行：

1. 先确认你电脑上装了Node.js和npm——打开终端输入node -v和npm -v，能显示版本号就没问题，没装的话先完成安装即可。
2. 全局装个简单的静态服务器工具，比如http-server：

   npm install -g http-server
   

3. 打开终端，进入你解压后的项目根目录（就是有index.html的那个文件夹），运行：

   http-server
   

4. 终端会输出类似http://localhost:8080的地址，复制到浏览器打开就能看到项目运行了。

注意：如果你的项目里的index.html引用了config.js（看文件名大概率是SystemJS的配置），那这个方案完全适用，因为Plunker通常会通过CDN加载SystemJS，然后用这个配置文件加载本地的src代码。

方案二：配置Angular CLI实现构建打包 #

如果需要像标准Angular项目那样进行开发调试、生产打包，就把代码迁移到Angular CLI项目里：

1. 先全局安装Angular CLI：

   npm install -g @angular/cli
   

2. 在项目根目录外面的地方，新建一个Angular CLI项目（名字随便取，比如my-local-angular-project）：

   ng new my-local-angular-project
   

3. 迁移你的代码：
   • 把原项目src文件夹里的所有文件，复制到新创建的my-local-angular-project/src/app文件夹下（如果有重名文件，比如app.component.ts，直接替换成你自己的就行）。
   • 把原项目style.css里的样式内容，复制到新项目的src/styles.css中。
   • 打开原项目的index.html，把里面自定义的脚本、样式引用或者页面内容，复制到新项目的src/index.html里，注意保留Angular CLI自动生成的基础结构（比如<app-root></app-root>标签）。
4. 进入新项目的目录，安装依赖：

   cd my-local-angular-project
   npm install
   

5. 本地运行项目：

   ng serve
   

   打开浏览器访问http://localhost:4200就能看到你的项目了。
6. 如果要打包生产环境代码，运行：

   ng build --prod
   

   打包好的文件会在dist文件夹里，可以直接部署到服务器。

额外提示 #

如果运行时控制台报错说缺少某个依赖（比如RxJS、Angular Material之类的），直接用npm安装对应的包就行，比如：

npm install rxjs @angular/material

根据具体的报错信息来安装就好。

内容的提问来源于stack exchange，提问作者user9273032