No publicPath option in configuration file

I´ve searched in the source but there´s no way of setting the "publicPath" of my application

It should be inside the webpack output configurations but looking at angualr-cli source it´s not available.

For me it is crucial because I prepend /static/dist/ to load javascript and assets on my app.

I´m using NG version 1.0.0-beta.15

I´m using Django as Server and only doing watch on ng build and Django puts it´s static files in /static/ folder and maps the base URL to a template index.html file so the hrefs in the index files are not relative to the static folder and gets a 404 error.

All of this gets solved if I could add the publicPath configuration in angular-cli.json or environment files

This would be great! My build isn't located on the server's base folder, but in the public folder. So after every build, i have to change the strings in my index.html manually again...

Also, with this integration we can use the standard way of Lazy Loading modules with the router.

Definitely +1 for this config option; our test and production servers use a subdirectory so having publicPath support is necessary for us but we'd only want it to be used when using the --prod flag during build or serve.

You can use the --base-href flag for this: https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml

@filipesilva

@filipesilva : This does not solve de problem, the --base-href is only to provide root point for the Angular Route Path, not for the root of static files.

@filipesilva

@filipesilva I agree with @manuelcua as this is a separate config option for Webpack.

The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed <script> or tags or reference assets like images, publicPath is used as the href or url() to the file when it's different than their location on disk (as specified by path). This can be helpful when you want to host some or all output files on a different domain or on a CDN. The Webpack Dev Server also uses this to determine the path where the output files are expected to be served from. As with path you can use the [hash] substitution for a better caching profile.

Ok, seems I misunderstood it's use. I'd be happy to review a PR for this, but bear in mind it should have a test.

found out that js File loading is depending on browser IE Edge output

As you can see from the screenshot IE trys to load from two places, despite only
one is defined in the index.html

<script type="text/javascript" src="ang/inline.js"></script>
<script type="text/javascript" src="ang/styles.bundle.js"></script>
<script type="text/javascript" src="ang/main.bundle.js"></script>

If I add "apollo" to the path than IE seaches in apollo/apollo/ang/.....

While the other browser search at one place. When I write there <script type="text/javascript" src="apollo/ang/main.bundle.js"></script> it take the file from there. While IE would make "apollo/apollo/ang/main.bundle.js"
The workaround is to make the index conditional.

The solution could be a templating where the index template is written by the developper and the %bundle% is replaced by angular-cli.

Is there any update on this?

Nothing change until now :(
I am using the latest Angular CLI :'(

The --deploy-url flag (that does what --public-path does for webpack) has been around for a while: https://github.com/angular/angular-cli/wiki/build

Again, deploy-url doesn’t change static assets paths, which publicPath does.

I just tested --deploy-url to add public/static as a prefix for the src path and it worked as expected.

command:
ng build --deploy-url public/static

output:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Angular2testapp</title>
        <base href="/">
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <app-root></app-root>
        <script type="text/javascript" src="public/static/inline.bundle.js"></script>
        <script type="text/javascript" src="public/static/polyfills.bundle.js"></script>
        <script type="text/javascript" src="public/static/styles.bundle.js"></script>
        <script type="text/javascript" src="public/static/vendor.bundle.js"></script>
        <script type="text/javascript" src="public/static/main.bundle.js"></script>
    </body>
</html>

These paths are the main app files, not assets like images referenced in other HTML components.
#4517 (comment)

We only process images in CSS actually. Images in HTML are not processed. The tracking issue for HTML resource support is #3415.

@filipesilva

@filipesilva I'm using cli 1.6.0-rc.0, have set deploy-url to 'assets' in both command line and angular-cli.json. The bundles are prefixed with 'assets' in index.html, but bundle files not copied to the deploy-url folder - assets.

Yeah, this fixed my problem. We set output path to 'bundles', and deploy-url to 'bundles' as well. The entry point is MVC action from URL /app/ which loaded view from bundles/index.html, so the actual URL (and base href) should be /app/, while the assets are loaded from /bundles/*.

@filipesilva

@filipesilva why do I get following error when I'm setting absolute url (http://...) to deploy-url parameter?

--deploy-url and/or --base-href contain unsupported values for ng serve. default serve path of '/' used. use --serve-path to override.

I need to set absolute path to that parameter to support MVC integration.

@feng-xiao

@feng-xiao that sounds like a bug. Can you open a new issue for is to look at?

@filipesilva

@filipesilva Hi filipesiva, I entered the issues in #8847

@hpjc

@hpjc
Looks like that fix works for me, good call!

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

feat(build): add publicPath support via command and angular-cli.json (a…

Navigation Menu

Repository navigation

No publicPath option in configuration file #2276

17 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

No publicPath option in configuration file #2276

Description

Activity

markus-heer commented on Sep 25, 2016

manuelcua commented on Sep 28, 2016

theDustRoom commented on Sep 29, 2016

filipesilva commented on Oct 5, 2016

manuelcua commented on Oct 5, 2016

theDustRoom commented on Oct 7, 2016

filipesilva commented on Oct 10, 2016

erhard commented on Oct 11, 2016

naveedahmed1 commented on Oct 15, 2016

17 remaining items

kuangthien commented on Nov 1, 2017

filipesilva commented on Nov 1, 2017

merwok commented on Nov 1, 2017

hpjc commented on Nov 2, 2017

merwok commented on Nov 2, 2017

filipesilva commented on Nov 2, 2017

feng-xiao commented on Nov 28, 2017

ltvan commented on Nov 29, 2017

feng-xiao commented on Dec 4, 2017

filipesilva commented on Dec 7, 2017

feng-xiao commented on Dec 12, 2017

thescientist13 commented on Jun 24, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions