Question

我目前正在使用now.sh部署我的应用。最近，我决定将baseUrl请求移至proxy.config.json文件。

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

要使用now.sh进行部署，我将scripts中的package.json更改为：

"start": "serve dist/ --single",
"build": "ng build --prod",

所以，首先，我做了ng build。

问题是，我target需要不同的proxy.config.json，因为我部署了一个API，我想在生产应用中使用它

我在考虑有两个文件proxy.config.dev.json和proxy.config.prod.json，但我不知道我是否可以使用cli定位不同的代理。问题是我使用serve进行制作而不是ng serve，因此proxy-config不可用。

你有什么建议？我怎样才能开始工作呢？

Answer 1

我意识到这是一个更好的解决方案，可以使用＆＃34;环境＆＃34;默认情况下使用import turtle print(turtle.pos) turtle.pos == (0.00,50.00) # is always False turtle.pos() == (0.00, 0.00) # might be what you want。

因此，我在两个环境angular-cli中设置了baseUrl。然后构建不会改变。然后你必须修改你的服务以使用这个env变量。

Answer 2

ng serve使用angular cli接受代理文件配置的参数（详情请参阅：https://github.com/angular/angular-cli/wiki/serve）。您在生产中使用的'serve'命令是另一个包（我假设这个https://www.npmjs.com/package/serve），它不支持相同的功能集。您需要一个支持代理的Web服务器（例如，nginx在此处详细说明http://nginx.org/en/docs/beginners_guide.html#proxy）或者是代理功能的独立解决方案，它补充了流行的http服务器包，如'serve'，'http-server'，' lite-server'例如一些网络设备也可以提供帮助。如果您/其他人找到了托管角度应用程序的其他好选项，请与代理分享，因为我还想评估更多选项。

Answer 3

使用Angular Interceptor和Angular cli方法设置baseUrl，如上所述，并投票给出提示。如果有人在寻找更多信息，那么关注有助于继续前进

`<pre>
import { environment } from './../../environments/environment';
import { Injectable } from '@angular/core';
import {
   HttpInterceptor,
   HttpRequest,
   HttpHeaders,
   HttpHandler,
   HttpEvent,
   HttpEventType
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class WebApiBaseURLInterceptor implements HttpInterceptor {

   className = "WebApiBaseURLInterceptor";

   constructor() {
       // add more http options here like OAuth2 access token
       const httpOptions = {
           headers: new HttpHeaders({ 'Content-Type': 'application/json' })
       };
   }

   /**
    *
    * @param {HttpRequest<any>} req
    * @param {HttpHandler} next
    * @returns {Observable<HttpEvent<any>>}
    */
   intercept(req: HttpRequest<any>, next: HttpHandler):   
Observable<HttpEvent<any>> {

//the baseURL set in environment folder which has both Dev and Prod
       const url = environment.baseUrl;
       req = req.clone({
           url: url + req.url
       });
       // return next.handle(req);

       // lets add elapse time difference 
       const started = Date.now();
       return next.handle(req).do(event => {
           if (event.type == HttpEventType.Response) {
               const elapsed = Date.now() - started;
               console.log(`${this.className}: Request for ${req.urlWithParams} took ${elapsed} ms.`);
           }
       });
   }
}
</pre>`

以下是Dev环境文件夹和文件，所以编辑如下，

//当前环境的文件内容将在构建期间覆盖这些内容。

//构建系统默认使用environment.ts的开发环境，但如果你这样做

// ng build --env=prod然后将使用environment.prod.ts。

//可以在.angular-cli.json中找到哪个env映射到哪个文件的列表。

`<pre>
export const environment = {
  production: false,
  baseUrl: 'http://localhost:8080/'
};
</pre>`

Angular CLI - 设置生产代理，现在部署

3 个答案: