Of Stack

Analysis on Configuration Items of Angular CLI Publishing Path

  • 2021-11-01 23:11:16
  • OfStack

Preface

Project release always needs to be packaged according to specific conditions. Angular CLI provides a convenient packaging tool "ng build". There are several configurations about the publishing path, which are summarized here.

base-href

It specifies the directory structure of the project build, for example, set to "deploy-test", and the final packaging result is in the dist/deploy-test directory.

When a new project is created, the default value under index. html is < base href="/" rel="external nofollow" > Which specifies that the application runs relative to the root directory. In this case, the relative path of the page will be based on this configuration, for example! The actual access path for [] (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 often run under a subdirectory, such as creating a new "deploy-test" project directory under webapps of tomcat. Accordingly, base-href should also be set to "/deploy-test/".

Note that the slash (/) here is necessary, assuming the server subdirectory is called "test", and the package deployment is as follows:

test: If neither is added, baseHref takes effect and resources are available. However, the browser path generated by the application is wrong, which is host: port/test/test #/index, and index. html will not be found when refreshing the page. /test: Add only the beginning, baseHref is invalid, resources are loaded relative to host: port root directory, report 404. test/: End only, resource request path is host: port/test/test/XXX. js, report 404. /test/: The application generation path is host: port/test/#/index, and the resource is loaded correctly.

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

Configured in index. html < base href="XXX" rel="external nofollow" > Configured with CLI command line parameters: 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

baseHref is fine if you put resources and applications in the same server directory, but what if resources and applications are in different locations?
For example, the application is deployed in the "/app" directory and the resource file is placed in "/app/resource"; Or you want to host resources for accelerating your application through cdn (such as cdn. example. com) while deploying the application itself on your own server.

Configuring deploy-url modifies the resource request path at packaging time, for example--deploy-url=/app/resource/, then the last packaged index. html is: 


<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>

Another example is a picture! [] (test. png), and the path becomes "/app/resource/test. png" after final packaging.

Accordingly, 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 to ✨: deploy-url can only modify packaged resource files.

Style resource introduction

With base-href set, the behavior of the resource path introduced in the style file varies from version to version of CLI:

base paths are automatically added under versions 2 ~ 7. For example, url ("/assets/path/to/my/asset. png") automatically superimposes base-href. Version 8 temporarily added-rebase-root-relative-css-urls=true command line parameter, which can keep the same behavior as the previous version for easy transition, but it will be discarded in the next version. Relative paths are required to be used to introduce resource paths, so the style file introduction in the component can be written as url ("~ src/assets/path/to/my/asset. png").

Because baseHref is a runtime value, it is used to control the relative path of Angular application. It should not be used to deal with packaging behavior at compile time. Dependency management for packaging should be identified by webpack through relative paths, which is also convenient for additional processing of resources (such as adding hash value to 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 put into the root directory of dist (there is also an original version in the folder of assets). Therefore, files introduced in styles or components should be placed outside the assets directory, because when CLI creates projects, the default configuration of angular. json is: 


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

As you can see, in the default configuration, the files in the assets folder will be copied directly to the dist folder without packaging (personally, I think the directory name of Nuxt is more appropriate, which is called statics static folder). If you need to import import in the component or files with relative paths in the style file, put another folder, which does not need to be configured in angular. jsn, so as to avoid duplicate files after packaging.

Summarize

We can try to use them together to sum up 1:

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 kanpm/resource directory, while index. html and other directly copied static files are placed in the server kanpm/directory. Request host: port/kanpm and you'll find the project running successfully!

It can be seen from this that base-href determines the deployment location of the application, that is, the path through which users can access this website. deploy-url determines where the packaged resource files (pictures, fonts, js, etc.) are deployed, either in a subdirectory of the application as in the above example or in an cdn server.

Related articles: