Angular 快速入门｜项目配置 ( angular.json / environment / proxy / tailwind )

由于最近工作的转变技术栈也由 React 向 Angular 进行了切换

用了两/三个月的 Angular 打算写一些文章也好有个积累

具体的用法官方文档那边都很详细了

angular.io/

angular.cn/

我这边主要是从业务出发写一些能快速上手/结合业务的用法

后续在业务中遇到的问题我都会抽象出来记录在这里

ps 我会一直维护这个教学项目 github.com/rick-chou/a…

时光机 👾

下面进入正题这节主要介绍 Angular 的项目配置

初始化 Angular 项目

首先安装 Angular CLI

npm install -g @angular/cli

然后运行 ng new xxx 就可以快速创建一个 angular 项目了

引入 eslint

参考 github.com/angular-esl…

执行 ng add @angular-eslint/schematics 就好了

下面我主要介绍两个文件一个是 angular.json 还有一个是 environment 文件

angular.json

这是 angular 项目的配置文件我摘取了一些比较重要的配置

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "configurations": {
      "production": {
        // ...
      },
      "development": {
        // ...
      }
    },
    "defaultConfiguration": "production"
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "production": {
        "browserTarget": "ng-tutorial:build:production"
      },
      "development": {
        "browserTarget": "ng-tutorial:build:development"
      }
    },
    "defaultConfiguration": "development"
  },
  "test": {
    "builder": "@angular-devkit/build-angular:karma",
  }
}

这是 package.json 中的配置可以对照着来看

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
},

可以看到 start / build / test 这三个命令和 angular.json 中 architect 下的三个字段是对应上的

这就是这三个字段就是启动命令的一些配置信息

一般的我们的项目通常有 development / production 两个环境

当我们启动项目的时候通常会走命令配置告诉项目用哪个配置

我们可以在命令行中输入 ng serve --help

然后你会看到这个命令中有一个 option 是 -c, --configuration

 -c, --configuration       One or more named builder configurations as a comma-separated list as specified in the
                            "configurations" section in angular.json.
                            The builder uses the named configurations to run the given target.
                            For more information, see
                            https://angular.io/guide/workspace-config#alternate-build-configurations.

所以我们启动项目的时候其实应该是 ng server -c development 启动 dev mode 或者是 ng server -c production 启动 prod mode

但是我们看到 script 中的命令并没有带上任何 option 来指定环境

这时候再看会 angular.json 可以看到在每一个指令的 Object 下都有一个 defaultConfiguration 来指定默认的 option

所以开发环境的 ng server 默认启用的是 development 模式而构建项目的 ng build 则默认是 production 模式

注意 -c 后面的字段要和 angular.json 中的字段对齐不能想当然的简写成 dev

environment

同样的也是 angular.json 中的配置我们看到有一条是

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
},

即在 production 模式下把 environment.ts 替换成 environment.prod.t

所以平时在使用的时候我们只需要引入environment.t这个文件就好了然后更具启动项配置去做到引入不同的 environment 文件

proxy

新建 proxy.conf.json 然后修改 angular.json

修改 angular.json 或者 proxy.conf.json 这些 config 文件需要 reload 项目才能生效

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "proxyConfig": "proxy.conf.json"
    },
  },

文件内容如下你可以将它当成一份模版运用于自己的项目中

注意这仅会在 dev 本地开发时生效

{
  "/api": {
    "target": "http://124.223.71.181",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "headers": {
      "Origin": "http://124.223.71.181"
    },
    "pathRewrite": {
      "^/api": ""
    }
  }
}

引入 tailwind css

reference tailwindcss.com/docs/guides…

引入依赖

npm install -D tailwindcss postcss autoprefixer

生成 tailwind 配置文件并修改

npx tailwindcss init

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 styles.css 全局 css 入口处加入

@tailwind base;
@tailwind components;
@tailwind utilities;

🎉

angular-tutorial demo 已经上线了可以在线查看啦（功能就一丢丢还在补充中 👨‍💻 ）

rick-chou.github.io/angular-tut…

Screen Shot 2022-08-12 at 11.27.03.png

Get Start 可以查看一些 library 在 angular 中 demo

例如 monaco-editor

Screen Shot 2022-10-21 at 18.12.15.png

Basic Syntax 可以看到一些基础语法的用法

Screen Shot 2022-08-12 at 11.23.04.png

Angular 快速入门 ｜ 项目配置 ( angular.json / environment / proxy / tailwind )