angular开发环境搭建【win7】

分手后的思念是犯贱 2023-10-05 10:52 117阅读 0赞

### 在windows7安装angular7 ###

【1】安装node.js  
创建一个angular文件夹，用于下载angular相关软件  
进入node.js官网 [http://nodejs.cn/download/][http_nodejs.cn_download] 下载相应版本的node.js  
我选择的是Windows 安装包 (.msi) 【注意版本，最新的版本不支持win7】  
[点击下载][Link 1]  
【历史版本选择】 [https://nodejs.org/dist/][https_nodejs.org_dist]  
双击下载的文件，就可以进入安装界面，自定义安装目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center]  
查看node版本 node -v  
![在这里插入图片描述][20201002105447646.png_pic_center]  
【2】安装cnpm  
npm/nrm/cnpm的区别可以参考：[文章][Link 2]  
安装命令： npm install cnpm -g --registry=https://registry.npm.taobao.org

Administrator@PC-20200311ZKYM MINGW64 /d/软件管理安装地址/cnpm
    $ npm install cnpm -g --registry=https://registry.npm.taobao.org
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
    + cnpm@6.1.1
    added 685 packages from 971 contributors in 25.901s
    
    Administrator@PC-20200311ZKYM MINGW64 /d/软件管理安装地址/cnpm
    $ cnpm -v
    cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
    npm@6.14.8 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
    node@10.9.0 (D:\杞欢绠＄悊瀹夎鍦板潃\angular\node.exe)
    npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
    prefix=C:\Users\Administrator\AppData\Roaming\npm
    win32 x64 6.1.7601
    registry=https://r.npm.taobao.org

【3】安装angular  
安装命令： npm install -g @angular/cli  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 1]

查看angular版本： ng version  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 2]  
如果遇到安装失败的情况：  
升级npm : npm install -g npm  
清理缓存: npm cache verify  
重新安装： npm install -g @angular/cli  
查看版本： ng version  
【4】创建工程  
(在git bash上操作）

Administrator@PC-20200311ZKYM MINGW64 ~/Desktop
    $ cd D:/
    
    Administrator@PC-20200311ZKYM MINGW64 /d
    $ mkdir angularProject
    
    Administrator@PC-20200311ZKYM MINGW64 /d
    $ cd angularProject/
    
    Administrator@PC-20200311ZKYM MINGW64 /d/angularProject
    $ ng new deno1
    CREATE deno1/angular.json (3558 bytes)
    CREATE deno1/package.json (1248 bytes)
    CREATE deno1/README.md (1023 bytes)
    CREATE deno1/tsconfig.json (458 bytes)
    CREATE deno1/tslint.json (3185 bytes)
    CREATE deno1/.editorconfig (274 bytes)
    CREATE deno1/.gitignore (631 bytes)
    CREATE deno1/.browserslistrc (853 bytes)
    CREATE deno1/karma.conf.js (1017 bytes)
    CREATE deno1/tsconfig.app.json (287 bytes)
    CREATE deno1/tsconfig.spec.json (333 bytes)
    CREATE deno1/src/favicon.ico (948 bytes)
    CREATE deno1/src/index.html (291 bytes)
    CREATE deno1/src/main.ts (372 bytes)
    CREATE deno1/src/polyfills.ts (2835 bytes)
    CREATE deno1/src/styles.css (80 bytes)
    CREATE deno1/src/test.ts (753 bytes)
    CREATE deno1/src/assets/.gitkeep (0 bytes)
    CREATE deno1/src/environments/environment.prod.ts (51 bytes)
    CREATE deno1/src/environments/environment.ts (662 bytes)
    CREATE deno1/src/app/app.module.ts (314 bytes)
    CREATE deno1/src/app/app.component.html (25725 bytes)
    CREATE deno1/src/app/app.component.spec.ts (937 bytes)
    CREATE deno1/src/app/app.component.ts (209 bytes)
    CREATE deno1/src/app/app.component.css (0 bytes)
    CREATE deno1/e2e/protractor.conf.js (869 bytes)
    CREATE deno1/e2e/tsconfig.json (294 bytes)
    CREATE deno1/e2e/src/app.e2e-spec.ts (638 bytes)
    CREATE deno1/e2e/src/app.po.ts (301 bytes)
    - Installing packages...
    鈭?Packages installed successfully.
    warning: LF will be replaced by CRLF in .browserslistrc.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in .editorconfig.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in .gitignore.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in README.md.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in angular.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in e2e/tsconfig.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in karma.conf.js.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in package-lock.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in package.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.component.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/app/app.module.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/environments/environment.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/index.html.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/main.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/polyfills.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/styles.css.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in src/test.ts.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.app.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tsconfig.spec.json.
    The file will have its original line endings in your working directory
    warning: LF will be replaced by CRLF in tslint.json.
    The file will have its original line endings in your working directory
    
    *** Please tell me who you are.
    
    Run
    
      git config --global user.email "you@example.com"
      git config --global user.name "Your Name"
    
    to set your account's default identity.
    Omit --global to set the identity only in this repository.
    
    fatal: unable to auto-detect email address (got 'Administrator@PC-20200311ZKYM.(none)')
    
    Administrator@PC-20200311ZKYM MINGW64 /d/angularProject
    $ ls
    deno1/
    
    Administrator@PC-20200311ZKYM MINGW64 /d/angularProject
    $ cd deno1/
    
    Administrator@PC-20200311ZKYM MINGW64 /d/angularProject/deno1 (master)
    $ ng serve --host localhost --port 4201
    
    chunk {
        main} main.js, main.js.map (main) 56.9 kB [initial] [rendered]
    chunk {
        polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
    chunk {
        runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
    chunk {
        styles} styles.js, styles.js.map (styles) 12.5 kB [initial] [rendered]
    chunk {
        vendor} vendor.js, vendor.js.map (vendor) 2.38 MB [initial] [rendered]
    Date: 2020-10-02T04:49:16.917Z - Hash: cab861c3cd77048686b6 - Time: 11630ms
    ** Angular Live Development Server is listening on localhost:4201, open your browser on http://localhost:4201/ **
    : Compiled successfully.

浏览器输入：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 3]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[Link 1]: https://nodejs.org/dist/v12.1.0/node-v12.1.0-x64.msi
[https_nodejs.org_dist]: https://nodejs.org/dist/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200929223538210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw==,size_16,color_FFFFFF,t_70#pic_center
[20201002105447646.png_pic_center]: https://img-blog.csdnimg.cn/20201002105447646.png#pic_center
[Link 2]: https://www.cnblogs.com/lubolin/p/10910040.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020100212250539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201002122302987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/2020100212563487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc3NDYxNw==,size_16,color_FFFFFF,t_70#pic_center