Angular-cli: index.html in another folder

Created on 29 Oct 2016 · 6Comments · Source: angular/angular-cli

OS?

Windows 8

Versions.

angular-cli: 1.0.0-beta.19-3
node: 6.8.0
os: win32 x64

Repro steps.

i have standard config with changes only in src/dist folders and updated tsconfig.json references for it(not interested, it works fine).

{
  "apps": [
    {
      "root": "frontend/sources/main",
      "outDir": "frontend/processed/main.bundled",
    }
  ]
}

but i place index.html in ${www}/ folder instead of ${www}/frontend/processed/main.bundled/

The log given by the failure.

browser cannot download scripts/fonts/icon because they are in /frontend/processed/main.bundled/ subfolder.

<base href="/">
<link rel="icon" type="image/x-icon" href="public/assets/favicon.ico">
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

is it posible to talk angular-cli to use frontend/processed/main.bundled/ prefix for processed references?
i do not dound it in schema.d.ts

Mention any other details that might be useful.

i do not want to place files in ${www}/ folder.
i know about proxy ability. it is not suitable

Source

ggrnd0

All 6 comments

Did you change the index property in angular-cli.json?

Meligy on 31 Oct 2016

One thing you can do is use the --bh (base-href) argument with ng build and ng serve.

Like ng build --bh "./frontend/processed/main.bundled/".

Meligy on 31 Oct 2016

We don't support the scenario you're trying to do. The build system expects index.html to be inside the folder defined in root.

filipesilva on 3 Nov 2016

👎3

I was trying to achieve something similar, where it was being integrated into a legacy Symfony1 app where resources are stored in /resources/foo-app and the built js is in /js/foo-app/* and the index.html is a template that's routed by Symfony at domain.com/foo-app/. I managed to get it working using Gulp to make necessary adjustments. Here is an example of the task:

gulp.task('foo-app-build', function(e){
            gulp.src(['web/js/foo-app/index.html'])
                .pipe(dom(function(){
                    var scripts = this.querySelectorAll('script[src]'),
                        i       = scripts.length;

                    while(i--) {
                        var src = scripts[i].getAttribute('src');
                        scripts[i].setAttribute('src', '/js/foo-app/' + src);
                    }

                    return this;
                }))
                .pipe(insert.prepend('<?php decorate_with(false); ?>'))
                .pipe(rename('indexSuccess.php'))
                .pipe(gulp.dest('apps/admin/modules/foo-app/templates/'));

// For css resources such as icon fonts and svg's etc           
gulp.src(['web/js/foo-app/styles.*.js'])
                .pipe(replace(/\M\.exports=N\.p\+"/g, 'M.exports=N.p+"/js/foo-app/'))
                .pipe(gulp.dest('web/js/foo-app/'))
                .pipe(gzip())
                .pipe(gulp.dest('web/js/foo-app/'))
        });
});

Bit hacky but works