celerio-angular-quickstart框架初始化踩坑记

【0】本机环境：mac、MySQL。

【1】官网有两段命令，Youtube上有个教学视频，基本是直接复制这两段命令，然后就完成了，看的特别简单。实际上，不要直接复制这两段仍然终端，扔进终端意味着你就开启地狱模式了。

【2】如果你安装测试有报错，甭管什么报错，先检查一下是否满足官网说的运行环境。下面就是官网要求的，以及本机查看版本和我本机最终安装的版本。

Java Development Kit 8 //查看命令：java -version（1.8.0_161）
Maven 3.5.x //查看命令：mvn -V（3.5.3）
Angular cli 1.6.3 //查看命令：ng -v（1.6.3）
Npm 5.x.x //查看命令：npm -version（5.6.0）
NodeJS 8.x //查看命令:node --version（v8.11.2）

jdk的安装不用说，maven的安装主要是把解压后的文件夹放在某个地方（下载地址maven-3.5.3），然后编辑~/.bash_profile，最后在生效source ~/.bash_profile即可。

export M2_HOME=/Users/xxx/Documents/apache-maven-3.5.3 //解压后maven文件夹所在位置
export PATH=$PATH:$M2_HOME/bin

下面的3个有点坑爹，安装Angular cli需要依赖下面2个，所以需要先安装Npm和NodeJS，这两个其实只要安装Node即可，他们就都在里面了，按照要求我们安装Node需要时版本8系列的，我们用brew进行安装，可以先用brew search node搜索看看有哪些版本，可以看到node@8就是版本8，直接的node就是最新的版本，还有node@6之类的，这里面如果你先彻底卸载可能存在的node然后从0开始安装的话，大概率会报错，我是先安装最新版的，然后解绑，再安装指定的版本，然后绑定指定的版本。

brew install node
node --version
brew unlink node
brew install node@8
brew link node@8
node --version

【3】然后再用npm包管理工具安装Angular/cli 1.6.3。

npm install @angular/cli@1.6.3 -g

【4】至此，配置好运行环境了。下面开始进行项目的初始化工作，下面是官网介绍的初始化的第一部分：

git clone https://github.com/jaxio/celerio-angular-quickstart.git
cd celerio-angular-quickstart/quickstart
ng new web
rm web/src/app/app.module.ts web/src/app/app.component.* web/src/styles.css
mvn -Pdb,metadata,gen generate-sources
mvn spring-boot:run

同样的，得分开来执行，打开终端：

1. 先执行第一个命令，就是拉一份最新的代码下来，直接去Github下载也行。
2. 下载下来之后，执行第二个cd命令进入目标文件夹里，没啥好说的。
3. 在执行第三个命令之前，需要修改一下数据库连接的配置，这里我们使用的是MySQL数据库，它默认使用的H2 数据里，所以我们需要找到下面这个文件夹，把H2的配置注释掉，取消注释MySQL那一段并且修改MySQL数据库的用户名和密码。这里面需要仔细看，示例给我创建的表这些都是在一个叫做angulardb的数据库里面，所以我们需要事先在MySQL里面创建一个名字叫做angulardb的数据库。
   
4. 第三个命令是创建一个web项目，当然是按照它的模板来创建的，这里面需要极大的耐心，而且极容易创建失败，因为它要下载很多依赖和文件，等个个把小时是正常的，淡定。有了第一次之后，以后的ng new web就嗖嗖嗖很快了。
5. 第四个命令就是删除它自己创建一些文件，因为默认它是不会自动覆盖的，所以需要先删除。
6. 这个就是核心命令，自动生成代码的部分。这里面主要是自动生成数据表、各种类和一些源码模板。这一步完成之后，数据库里就有示例的表和数据了。
7. 最后一步就是启动了，在终端看到如下字样，说明正常启动了，此时不要关闭终端，留着不要动。

2018-06-04 15:01:17.733  INFO 7558 --- [           main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat started on port(s): 8080 (http)
2018-06-04 15:01:17.739  INFO 7558 --- [           main] com.mycompany.myapp.Application          : Started Application in 8.313 seconds (JVM running for 13.808)

【5】下面就是第二部分了，官网也是一段命令：

cd celerio-angular-quickstart/quickstart/web
npm i @angular/material @angular/cdk
npm i primeng
npm i font-awesome
ng serve --proxy-config proxy.conf.json

同样的，我们一个个来执行，开一个新的终端窗口，第一行就是进到目标文件夹里面，这个不说了。

1. 第二行就开始坑了，这里面如果我们使用这个语句最后ng server的时候会有问题，总是报错，还是因为版本问题。这里面我们使用以下命令来执行，安装指定的版本。

npm install @angular/material@5
npm install @angular/cdk@5

1. 然后下面的3条命令就是正常执行就行。

【6】最后成功的话，终端应该有如下提示，在浏览器输入http://localhost:4200应该有如下画面。

EricdeMacBook-Pro:web eric$ ng serve --proxy-config proxy.conf.json
** NG Live Development Server is listening on localhost:4200,open your browser on http://localhost:4200/ **
Date: 2018-06-04T07:11:37.216Z                                                          
Hash: 2846fbe99ce391b5ae12
Time: 13513ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 928 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 565 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 657 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 20.5 MB [initial] [rendered]

webpack: Compiled successfully.

初始化如果遇到问题的话，主要是各种安装包版本的问题，部分有可能会出现缺失的情况，如果缺失的话，直接用npm install xxx安装即可。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!