Use the angular xampp project runs in a web server

demand

In the development of angular project, because of the need to do self-adaptation to fit different screen, but my computer only 1366. So now I need to angular local projects run on xampp, then use the phone open hotspots, and another to the machine at National Taiwan University, together with a computer or mobile phone screen wifi, then use a large-screen computer or mobile phone to open the local computer running the appropriate website with the situation.

 

Install xampp

Download: https://sourceforge.net/projects/xampp/

After the download is good, check all the way down ok, Baidu solve your own problems.

 

Open xampp

If you are after good conduct open installation, then find xampp directly in the bottom task bar, click to see the following page:

 

Because we do not need to use MySQL and other things, so we only need to open the Apache, above. 

Or if you are originally installed, and now want to open, then find the "xampp-control.exe" in your xampp install directory, double-click Start, and then as above can be opened. Open the file in the installation directory as follows:

 

 

Configuration Angular project

The base href index.html was changed to the following

<-! <Base the href = "/"> -> 

<-! Ng build use the following -> 
<Base the href = "./">

 

Add the following to the file app.moudle.ts

HashLocationStrategy import {,} LocationStrategy from '@ angular / common' ; 

... 
Providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

 

Ng build package for generating under item (using git bash here)

build

Upon completion you can see more out of a project under the dist file, as follows:

 

 

Start a web service in xampp

The project file dist copy / cut to the installation directory xampp htdocs folder, as follows:

 

 

At this point, even opened the project web server, we can go to the browser to verify

http://127.0.0.1:80/dist/

In the above url, you can see the following elements:

 

 

 Click ng-china, this is my project, click on the go, you can see to write their own website, the picture is as follows:

 

 

Enter the site from someone else's computer

Two computers using a cell phone to open hotspots together, or linked with a wifi, so two computers in the same local area network following the.

Check operation of the site computer ip, pay attention, because even a wifi, this time to see the WLAN must be the ipv4 address, use the ipconfig to view the pictures as follows:

 

 

In this case, the input port + ip + route on someone else's computer to view the site.

http://172.56.192.157:80/dist/ng-china

 

Similarly, you can also phone and computer along with a wifi, adapting the page to view the phone side.

 

Guess you like

Origin www.cnblogs.com/yifchan/p/html-1-15.html