A brief analysis of the configuration items of the Angular CLI release path

Preface

Project release always requires packaging according to specific circumstances. Angular CLI provides a convenient packaging tool "ng build". There are several configurations for the release path, which are summarized here.

base-href

It specifies the directory structure of the project build. For example, if it is set to "deploy-test", the final packaging result will be in the dist/deploy-test directory.

When a project is created, the default setting in index.html is <base href="/" rel="external nofollow" >, which means that the application is run relative to the root directory. At this time, the relative path of the page will be based on this configuration, for example, the actual access path of ![](image/test.png) is /image/test.png.

It does not change the resource request path:

<body>
 <app-root></app-root>
 <script src="runtime.js"></script>
 <script src="polyfill.js"></script>
 <script src="styles.js"></script>
 <script src="main.js"></script>
</body>

However, our projects are often run in a subdirectory, for example, create a new "deploy-test" project directory under tomcat's webapps. So accordingly, base-href should also be set to "/deploy-test/".

It should be noted that the slash (/) is essential here. Assuming the server subdirectory is called "test", the packaging and deployment are as follows:

test: If neither end is added, baseHref takes effect and the resource can be obtained. However, the browser path generated by the application is wrong, which is host:port/test/test#/index. When refreshing the page, index.html cannot be found.
/test: only add the beginning, baseHref is invalid, resources are loaded relative to the host:port root directory, and 404 is reported.
test/: Just add the end, the resource request path is host:port/test/test/XXX.js, and 404 is reported.
/test/: The application generation path is host:port/test/#/index, and the resources are loaded correctly.

There are three main ways to modify base-href when packaging:

Configure <base href="XXX" rel="external nofollow" > in index.html
Use CLI command line parameters to configure: ng build --baseHref=/XXX/
Configure in angular.json:

 "architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
  "baseHref": "/kanpm/",
  }
 }
 }

That is, baseHref is used to configure the deployment path of the application.

deploy-url

If the resources and applications are placed in the same server directory, baseHref is sufficient, but what if the resources and applications are in different locations?
For example, the application is deployed in the "/app" directory, and the resource files are placed in "/app/resource"; or you want to host various resources of the accelerated application through a CDN (such as cdn.example.com) and deploy the application itself on your own server.

Configuring deploy-url will modify the resource request path when packaging. For example, if --deploy-url=/app/resource/, the final packaged index.html will be:

<body>
 <app-root></app-root>
 <script src="/app/resource/runtime.js"></script>
 <script src="/app/resource/polyfill.js"></script>
 <script src="/app/resource/styles.js"></script>
 <script src="/app/resource/main.js"></script>
</body>

For example, if there is a picture ![](test.png), the path will become "/app/resource/test.png" after packaging.

Correspondingly, it can also be configured in angular.json or on the command line

"architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
  "deployUrl": "/test/",
 }
 }
}

Or ng build --deploy-url="/test/"

✨Note: deploy-url can only modify packaged resource files.

Importing style resources

After setting base-href, the behavior of resource paths imported into the stylesheet will be different in different CLI versions:

The base path will be automatically added in versions 2~7. For example, url("/assets/path/to/my/asset.png") will automatically have base-href added to the front.
Version 8 temporarily adds the --rebase-root-relative-css-urls=true command line parameter to keep the behavior consistent with previous versions and facilitate transition, but it will be abandoned in the next version.
Versions 9 and later require the use of relative paths to import resource paths, so the style file import in the component can be written like this (url("~src/assets/path/to/my/asset.png")).

Because baseHref is a runtime value that controls the relative path of the Angular application. It should not be used to handle the packaging behavior at compile time. For the dependency management of packaging, webpack should identify it through relative paths, which is also convenient for additional processing of resources (such as adding a hash value to the resource file name to ensure that it will not be cached).

✨Note: When packaging, the resources that need to be packaged will be copied by webpack and placed in the dist root directory (there is also an original copy in the assets folder). Therefore, the files introduced in the style or component should be placed outside the assets directory, because when the CLI creates a project, the default configuration of angular.json is:

"architect": {
 "build": {
 ...
 "options": {
  "assets": [
  "src/favicon.ico",
  "src/assets",
  ],
 }
}

As you can see, in the default configuration, all files in the assets folder are copied directly to the dist folder without being packaged (I personally think that the directory name of Nuxt is more appropriate to call it statics folder). Files that need to be imported into components or introduced with relative paths in style files can be placed in another folder. There is no need to configure them in angular.jsn to avoid duplicate files after packaging.

Summarize

We can try to summarize them together:

ng build --prod --base-href="/kanpm/" rel="external nofollow" --deploy-url="/kanpm/resource/"

After getting the compiled and packaged dist/kanpm folder, we put all the packaged and compiled files into the server's kanpm/resource directory, and put index.html and other directly copied static files into the server's kanpm/directory. Request host:port/kanpm and you will find that the project is running successfully!

From this we can see that base-href determines the deployment location of the application, that is, the path through which users can access the website. The deploy-url determines where the packaged resource files (images, fonts, js, etc.) are deployed. It can be in a subdirectory of the application as in the example above, or in a CDN server.

This is the end of this article about Angular CLI release path configuration items. For more information about Angular CLI release path, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: How to install git on linux

>>: Centos6.9 installation Mysql5.7.18 step record