prod build using absolute paths to files and sub-directories for JS and CSS possible?

[gitdisrupt]

Apologies if this has already been addressed, but i could not find a clear answer anywhere.

Really this is a desired feature and not a bug, but my hope is that this issue can become a good reference for finding the best approach to achieve this.

I am asking specific to a real world use case as it relates to a production environment.
See below for more.

Versions

Angular CLI: 1.7.3
Node: 8.9.4
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

Repro steps

In an attempt to organize where the angular-cli outputs JS and CSS files within the /dist directory during a build --prod, before deploying files to a remote server, i tried the following albeit knowing this would likely fail:

I created 2 new directories in my apps working root directory, ./js amd ./css
Then, i moved main.ts and polyfills.ts into the JS directory and styles.scss into the CSS dir.
Then i modified the locations of those files main.ts, polyfills.ts and styles.scss in .angular-cli.json as follows:

"main": "js/main.ts",
"polyfills": "js/polyfills.ts",
"styles": ["css/styles.scss"]

and then attempted ng build --prod

Observed behavior

The build obviously fails.

Desired behavior

The hope was that the build would ultimately output main.bundle.js, polyfills.bundle.js along with inline.bundle.js and any chunk.bundle.js files or vendor.bundle.js file into ./dist/js and syles.bundle.css into ./dist/css

Obviously, this does not work.

Is it possible to set Angular to use custom directories, or more importantly, absolute paths to CSS and JS files?

If not, what is the best suggestion from the community?
Using a custom build script to do so?

If the eject option and a custom webpack build script is the only way to achieve this, does anyone have any example webpack files they can reference?

From what i have found in experimentation, without using the eject option and writing a custom webpack build script, attempting to use a custom bash script to first run the standard angular-cli build command and then generate the desired directories and move said files into them after to achieve this works, however, in addition to having to modify the compiled index.html file to load js and css files from the new sub-directories, which is simple enough, what it also required was to actually modify the method in the compiled angular inline.bundle.js file to load chunk.bundle.js files from the js sub-directory like so, changing this:
a.src=o
to this:
a.src="js/"+o

Now i get it, this is a terrible idea and is NOT recommended, but it would be great if what i am trying to achieve is possible.

It would be excellent if somehow it were possible to use the environment files to set paths for local dev in environment.ts and production in the environment.prod.ts to achieve this.

Why? In a production environment, what happens when an admin wants our index.html to live on one server, and all other assets, JS, CSS, images and the like to live elsewhere on a CDN for example?

so, in my case, in addition to updating the paths to JS and CSS in the index.html file, i changed this a.src=o to this a.src="http://mycdn.domain.com/"+o in the compiled inline.bundle.js file.

In my particular case, my server admin is wanting my index.html to be rendered dynamically via PHP on a traditional apache server, and have all of my JS, CSS and image dependancies live elsewhere on a CDN which ultimately requires setting absolute paths to all my JS and CSS dependencies.

Any help at all greatly appreciated.

[clydin]

You'll want to use --base-href="<cdn-url>" (needs to end in a slash) combined with injecting the APP_BASE_HREF token with the app's main module (documentation) which should be set to the user accessible path that the user will use. (e.g., / if the app is at the root of a domain (www.example.com); or /app if at a sub-path (www.example.com/app).

[gitdisrupt]

@clydin this really did not address what i was trying to achieve but i appreciate your answer. It led me to get a little bit closer to what i need...

Seems to me the following gets me close but not entirely there:

ng build --prod --base-url / --deploy-url http://mycdn.mydomain.com

This is excellent in that it builds so that navigation correctly uses the base href and the deploy url outputs the correct CDN path needed for loading JS and CSS from a CDN. Great!

However — in-order to accommodate deploying to a DEV environment which ultimately gets pushed to a PRODUCTION server, what i need to know is simply this....

Is there a way to set my app to DYNAMICALLY retrieve the --deploy-url, my CDN url, DURING RUNTIME?

[clydin]

Don't use deploy-url. There's really no reason to ever use it actually. With base HREF, the browser handles the URL manipulation at runtime eliminating the need to hard code the deploy url throughout the application. The browser will use the base HREF with all relative URLs. This includes initial scripts, lazy routes, relative css resources, and relative HTML resources. The last of which is something deploy url does not support.

An example for the app's main module:

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
class AppModule {}

and then use ng build --prod --base-href http://mycdn.mydomain.com/

APP_BASE_HREF defaults to the page's base HREF but you can set it to anything you want based on the deployment strategy.

you can dynamically adjust the HTML base href at runtime by modifying the <base href='xxx'> element in the HTML via the DOM. The --base-href essentially just sets that value in index.html for you at build time.

[gitdisrupt]

Thank you for this answer.
But will this work if myindex.htmllives one one server, and all JS, CSS live at a different domain? Our admin wants all of our JS and CSS to live elsewhere on a CDN.

[clydin]

Yes. The HTML base HREF can be a full absolute URL.

Since it appears that the index will be generated dynamically via PHP, the HTML base HREF attribute could be set during that process for production. For local development, no configuration of the base href would be needed. Just ensure that the APP_BASE_HREF token is in place.

[FoolEdward]

@clydin I tried your solution.

@NgModule({ providers: [{provide: APP_BASE_HREF, useValue: '/'}] }) class AppModule {}

and then use ng build --prod --base-href http://192.168.8.100:8101/". And I put app in host http://192.168.8.100:8000

But then I faced the error. Failed to execute 'replaceState' on 'History': A history state object with URL 'http://192.168.8.100:8101/home' cannot be created in a document with origin 'http://192.168.8.100:8000' and URL 'http://192.168.8.100:8000/'.

I think it is because history replaceState api is based on base href value. But my app origin is different from assets origin.

Is there a way to solve this problem?Thanks!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}