In our angular project based on webpack we use next deploy pipline:
1. Generate all static resources to static folder
2. Generate index html
3. Deploy static resources to "Static server" (S3 bucket)
4. Deploy index.html to "Main server"
Dist folder looks like:
dist
--static
----anivers-bold.eot
----logo.svg
----styles.bundle.css
----code.bundle.js
--index.html
And links to resources in index.html looks like:
<script src="http://127.0.0.1:4200/code.bundle.js"></script>
So, now I generated similar structure and index.html
, but links in styles.bundle.css
to fonts and images setup incorrect.
Current: src: url('anivers-bold.eot');
Expect: src: url('http://127.0.0.1:4200/anivers-bold.eot');
Anyone know how I can change paths to resources in generating by angular-cli css bundle?
You can find test app in test repository. Use ng build
for test build
I dive in in angular-cli, and found postcss plugin, that process resources: node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\postcss-cli-resources.js
I try use resourcesOutputPath
parameter, but it only generating directories.
Also I try chane href in base
tag, but in this case angular router break.
I found next solution:
In .css file, that was getting from remote server, resources requesting from that server
So, we need extract styles with resources (background-url, font) in global styles and all will waork