Angular本地开发模拟后台接口

在environments文件夹下创建environment.dev.ts

const baseURL = 'http://localhost:5002/';
export const environment = {
  production: true,
  envName: 'dev',
  apiURL: {
    login: baseURL + 'login/user'
  }
};

在angular.json文件中修改如下

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "***": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less" }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": { "outputPath": "dist/ls365", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets", "src/api" ], "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "src/styles.less" ], "scripts": [] },
          "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true }, "dev": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": true, "buildOptimizer": true } } },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": { "browserTarget": "***:build" },
          "configurations": { "production": { "browserTarget": "***:build:dev" } } },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": { "browserTarget": "***:build" } },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", "src/styles.less" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets" ] } },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } }
      }
    },
    "***-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "***:serve" },
          "configurations": { "production": { "devServerTarget": "***:serve:production" } } },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "**/node_modules/**" ] } }
      }
    }
  },
  "defaultProject": "***"

列表内容

ngOnInit() {
    this.http.get('/api/mock/test.json').subscribe(
      data => {
        console.log(data);
      }
    );
  }

5.返回结果