angular 6 学习一： 搭建angular环境

1.安装node.js

 下载node.js从在网址：https://nodejs.org， 我用的版本是v10.16.3.

进入： https://nodejs.org/dist/ 可以找到所有的版本。

2. npm作为默认随node.js安装

3.安装指定版本的Angular cli

>npm i -g @angular/cli@6.2.9 或

>npm install -g @angular/cli@6.2.9

a. 卸载当前的angula cli, 并清除缓存

    >npm install -g @angular/cli

   >npm cache clean

4.可以创建angular项目了：

a.>ng new blueprj

a.1>cd blueprj

b.>ng g component admtech

c.>ng g service CartService

d>ng serve --open 

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

5.安装bootstrap的几个命令

在工程目录下执行， bootstrap的包被安装的blueprj\node_modules下

\blueprj>npm i bootstrap@3.4.1 -s

>npm i bootstrap --save
>npm i @types/bootstrap --save-dev

Angular6的命令行工具配置文件从angular-cli.json更名为angular.json，且路径变更

在.angular-cli.json文件中的apps下的styles和scripts里分别写入：

 "../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css",                    
 "../node_modules/_jquery@3.2.1@jquery/dist/jquery.js",
 "../node_modules/_bootstrap@3.3.7@bootstrap/dist/js/bootstrap.min.js"
 
 
 
 // 调整前
"styles":[
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
]

 

// 调整后
"styles":[
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
    "node_modules/jquery/dist/jquery.js",
    "node_modules/bootstrap/dist/js/bootstrap.js"
]

6. 引入指定版本的jquery

>npm i jquery@3.4.1 -- save>

>npm i @types/jquery --save-dev

7. 当下载的anguar工程只包含src时， 可以用在工程根目录下用以下命令安装所有需要的包：

angular6login>npm install

安装后， 需要的包被放在 node_modules目录下：