Angular cli: ready for production

Question

I wrote my first Angular 2 application, and I would like to put it on a test server.

I recently converted it to an Angular-cli project and built it using the command:

ng build --prod

From what I understand, I should then paste the contents of the “/ dist” folder onto the test server and run it using

ng serve

However, if the “/ dist” folder can work autonomously, why can't I run it on my computer as a stand-alone application (ie I can’t copy the contents of the dist folder to another location on the computer and run it.)

This will be the first application that I will put on a test / production server, so please carry me if I ask stupidly.

Answer 1

You shouldn't, and I think I can't, use ng serveto publish your assembly. Files created with help ng buildcan be uploaded to the web server and sent from there.

• Run ng build -e=prod --prod --no-sourcemap --aot

Despite the fact that the latest version angular-clidoes not contain any source copies by default, it is worth noting here. The -e=prodcheck that he uses the work environment within a certain folder environments. The last thing is --aot. If you don’t have any special things going on inside your project, there is a big chance that you can precompile it using a compiler ahead of time. However, you may run into problems, and you can fix them with ng serve --aotor remove them altogether --aot.

2. dist -. , , index.html, URL-, , .

, index.html, , nginx, :

location / {
  try_files $uri $uri/ /index.html;
}

, www.example.com index.html, dist. - , , www.example.com/subfolder, <base> index.html, .

, lite-server.

npm install -g lite-server

path/to/project/root/dist lite-server. - index.html

nginx .gz, nginx gzip:

gzip on;
gzip_static on;

Answer 2

nb build --prod dist.

ng serve .

dist ( - )

ng serve .

Answer 3

You have two options: you can copy your application and run ng serve --prod(which is a little too much, I think), or you can copy yours ./distto another server and use some server software (that is, nginx, apache, express - there are tons, you can choose the one you are familiar with). All you need to do is transfer all requests that the file does not request to index.html, since the angular application is a SPA. Here is an example .htaccessfor the Apache server:

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html