Angular 项目食用指南

1. 配置环境

1.首先确认安装了node.js和npm

显示当前node和npm版本

$ node -v
$ npm -v

// node 版本高于6.9.3 npm版本高于3.0.0

2.全局安装typescript（可选）

$ npm install -g typescript
// 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。

3.安装Angular CLI

$ npm install -g @angular/cli

经过不算漫长的等待，你的Angular CLI就装好了。确认一下：

$ ng v

// 出现下面画面说明安装成功，如果不成功你可能需要uninstall一下，再重新来过

$ ng v
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 8.3.22
Node: 13.1.0
OS: darwin x64
Angular: 
... 
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.22
@angular-devkit/core         8.3.22
@angular-devkit/schematics   8.3.22
@schematics/angular          8.3.22
@schematics/update           0.803.22
rxjs                         6.4.0

4. 安装项目依赖

cd 进入到项目根目录
运行

npm i

经过漫长的等待 会提示你依赖安装完成

npm WARN karma-jasmine-html-reporter@1.5.1 requires a peer of jasmine-core@>=3.5 but none is installed. You must install peer dependencies yourself.

audited 18881 packages in 9.021s

22 packages are looking for funding
  run `npm fund` for details

2. 测试运行

1.在terminal cd 进入到项目根目录

2.配置反向代理

在项目更改目录中有个 proxy.conf.json 文件

内容如下

{
  "/api": {
    "target": "http://101.201.56.158:8080",
    "secure": false,
    "changeOrigin": true
  }
}

将target 后的 http://101.201.56.158:8080 修改为实际后台地址

3.启动服务

npm run start

3. 打包发布

1.在terminal cd 进入到项目根目录

2.打包

npm run product

打包完成后会在项目更目录dis/techcock/
生成产物，部署到服务器即可

4.部署

带路由的应用必须以 index.html 作为后备页面
Angular 应用很适合用简单的静态 HTML 服务器提供服务。 你不需要服务端引擎来动态合成应用页面，因为 Angular 会在客户端完成这件事。

如果该应用使用 Angular 路由器，你就必须配置服务器，让它对不存在的文件返回应用的宿主页(index.html)。

带路由的应用应该支持“深链接”。 所谓深链接就是指一个 URL，它用于指定到应用内某个组件的路径。 比如，http://www.mysite.com/heroes/42就是一个到英雄详情页面的深链接，用于显示 id: 42 的英雄。

当用户从运行中的客户端应用导航到这个 URL 时，这没问题。 Angular 路由器会拦截这个 URL，并且把它路由到正确的页面。

但是，当从邮件中点击链接或在浏览器地址栏中输入它或仅仅在英雄详情页刷新下浏览器时，所有这些操作都是由浏览器本身处理的，在应用的控制范围之外。 浏览器会直接向服务器请求那个 URL，路由器没机会插手。

静态服务器会在收到对 http://www.mysite.com/ 的请求时返回 index.html，但是会拒绝对 http://www.mysite.com/heroes/42 的请求， 并返回一个 404 - Not Found 错误，除非，它被配置成了返回 index.html。

nginx 配置

1. 使用 try_files 指向 index.html，详细描述见Web 应用的前端控制器模式。

   location / {
       try_files $uri $uri/ /index.html;
    }

2. 配置反向代理

http://localhost:8080;
这个为后台服务地址

    location /api {
       proxy_pass http://localhost:8080;
    }

3. 配置示例

server
{
    listen 80;
    server_name zjh.jftio.cn;
    index index.html;
    root /www/wwwroot/f;
    #gzip
    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
    location / {
       try_files $uri $uri/ /index.html;
    }
    location /api {
       proxy_pass http://localhost:8080;
    }
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log off;
        access_log /dev/null;
    }
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log off;
        access_log /dev/null; 
    }
}