be able to inject API_URL

Author: akirasosa

config/webpack.aot.js

@@ -6,6 +6,7 @@ const commonConfig = require('./webpack.common.js');
 const ManifestPlugin = require('webpack-manifest-plugin');
 
 const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const API_URL = process.env.API_URL || '';
 
 module.exports = webpackMerge(commonConfig, {
   entry: {
@@ -22,10 +23,7 @@ module.exports = webpackMerge(commonConfig, {
     new ManifestPlugin(),
     new webpack.DefinePlugin({
       'ENV': JSON.stringify(ENV),
-      'process.env': {
-        'ENV': JSON.stringify(ENV),
-        'NODE_ENV': JSON.stringify(ENV)
-      }
+      'API_URL': JSON.stringify(API_URL)
     }),
     new webpack.LoaderOptionsPlugin({
       minimize: true,

config/webpack.dev.js

@@ -4,22 +4,21 @@ const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.common.js');
 
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const API_URL = process.env.API_URL || '';
 
 module.exports = webpackMerge(commonConfig, {
   devtool: 'cheap-module-source-map',
   output: {
     path: helpers.root('dist'),
     filename: '[name].js',
     sourceMapFilename: '[name].map',
-    chunkFilename: '[id].chunk.js'
+    chunkFilename: '[id].chunk.js',
+    publicPath: '/'
   },
   plugins: [
     new webpack.DefinePlugin({
       'ENV': JSON.stringify(ENV),
-      'process.env': {
-        'ENV': JSON.stringify(ENV),
-        'NODE_ENV': JSON.stringify(ENV)
-      }
+      'API_URL': JSON.stringify(API_URL)
     }),
     new webpack.LoaderOptionsPlugin({
       options: {

server.js

@@ -19,3 +19,4 @@ app.get('*', (req, res) => {
 });
 
 app.listen(4200);
+console.log("server is running on http://localhost:4200");

src/app/core/core.module.ts

@@ -13,7 +13,7 @@ import {ProfileDataResolver} from "./services/profile-data.resolver";
 
 export function createMyHttp(xhrBackend: XHRBackend, requestOptions: RequestOptions) {
   const ngHttp = new Http(xhrBackend, requestOptions);
-  return new MyHttp(ngHttp);
+  return new MyHttp(ngHttp, API_URL);
 }
 
 @NgModule({

src/app/core/http/http.ts

@@ -8,7 +8,7 @@ import {
   Headers
 } from "@angular/http";
 
-const mergeAuthToken = (options:RequestOptionsArgs) => {
+const mergeAuthToken = (options: RequestOptionsArgs) => {
   let newOptions = new RequestOptions({}).merge(options);
   let newHeaders = new Headers(newOptions.headers);
   newHeaders.set('x-auth-token', localStorage.getItem('jwt'));
@@ -19,31 +19,31 @@ const mergeAuthToken = (options:RequestOptionsArgs) => {
 @Injectable()
 export class MyHttp {
 
-  constructor(public http:Http) {
+  constructor(private http: Http, private baseUrl: string = '') {
   }
 
-  get(url:string, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.get(url, mergeAuthToken(options));
+  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.get(this.baseUrl + url, mergeAuthToken(options));
   }
 
-  post(url:string, body:any, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.post(url, body, mergeAuthToken(options));
+  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.post(this.baseUrl + url, body, mergeAuthToken(options));
   }
 
-  put(url:string, body:any, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.put(url, body, mergeAuthToken(options));
+  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.put(this.baseUrl + url, body, mergeAuthToken(options));
   }
 
-  delete(url:string, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.delete(url, mergeAuthToken(options));
+  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.delete(this.baseUrl + url, mergeAuthToken(options));
   }
 
-  patch(url:string, body:any, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.patch(url, body, mergeAuthToken(options));
+  patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.patch(this.baseUrl + url, body, mergeAuthToken(options));
   }
 
-  head(url:string, options?:RequestOptionsArgs):Observable<Response> {
-    return this.http.head(url, mergeAuthToken(options));
+  head(url: string, options?: RequestOptionsArgs): Observable<Response> {
+    return this.http.head(this.baseUrl + url, mergeAuthToken(options));
   }
 
 }

src/app/environment.ts

@@ -13,7 +13,7 @@ let _decorateModuleRef = function identity<T>(value: T): T {
   return value;
 };
 
-if ('production' === process.env.ENV) {
+if ('production' === ENV) {
   // Production
   disableDebugTools();
   enableProdMode();

src/app/pages/home/feed/feed.service.ts

@@ -1,6 +1,6 @@
 import {Observable} from "rxjs/Observable";
 import {Injectable} from "@angular/core";
-import {MyHttp} from "../../../core/http/http";
+import {MyHttp} from "../../../core/http";
 import {Micropost} from "../../../core/domains";
 
 const url = '/api/feed';

src/custom-typings.d.ts

@@ -6,7 +6,7 @@ declare module '*';
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
-declare var HMR: boolean;
+declare var API_URL: string;
 declare var System: SystemJS;
 
 interface SystemJS {
@@ -15,7 +15,7 @@ interface SystemJS {
 
 interface GlobalEnvironment {
   ENV: string;
-  HMR: boolean;
+  API_URL: boolean;
   SystemJS: SystemJS;
   System: SystemJS;
 }

src/polyfills.ts

@@ -19,7 +19,7 @@ import "core-js/es7/reflect";
 import "zone.js/dist/zone";
 import "ts-helpers";
 
-if ('production' === process.env.ENV) {
+if ('production' === ENV) {
 } else {
   Error['stackTraceLimit'] = Infinity;
   require('zone.js/dist/long-stack-trace-zone');

src/vendor.ts

@@ -11,7 +11,7 @@ require("!style!css!./vendor.css");
 
 toastr.options.preventDuplicates = true;
 
-if ('production' === process.env.ENV) {
+if ('production' === ENV) {
 } else {
 }