Lazy loaded modules with AOT are using incorrect base path

[chinchiheather]

OS?

Windows 7

Versions.

@angular/cli: 1.0.0-beta.31

Repro steps.

I am loading my angular app from a website with a different base path, and when I try to use both lazy loading modules with the aot compiler I am getting an error. From what I can see, it is using the website's base path rather than the angular application's, and so fails to find the chunk files.

The log given by the failure.

Refused to execute script from 'http://gold.local/compare/credit-cards/search/1.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
vendor.bundle.js:46029 EXCEPTION: Uncaught (in promise): Error: Loading chunk 1 failed.
Error: Loading chunk 1 failed.
at HTMLScriptElement.onScriptComplete (http://widgets.local:4200/inline.bundle.js:92:33) [angular]
at HTMLScriptElement.wrapFn (http://widgets.local:4200/polyfills.bundle.js:7515:29) [angular]
at Object.onInvokeTask (http://widgets.local:4200/vendor.bundle.js:33873:37) [angular]
at ZoneDelegate.invokeTask (http://widgets.local:4200/polyfills.bundle.js:6687:36) [angular]
at Zone.runTask (http://widgets.local:4200/polyfills.bundle.js:6491:47) [ => angular]
at HTMLScriptElement.ZoneTask.invoke (http://widgets.local:4200/polyfills.bundle.js:6741:38) []

Mention any other details that might be useful.

So the 1.chunk.js file should be loaded from http://widgets.local:4200 rather than the http://gold.local/... url it is trying to use - gold.local is the website which has embedded the various scripts (main.bundle.js, etc.)

My app.routing.js file looks like

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

const routes: Routes = [
  { path: 'search', loadChildren: 'app/selector/selector.module#SelectorModule' },
  { path: 'results', loadChildren: 'app/table/table.module#TableModule' },
  { path: 'compare', loadChildren: 'app/compare/compare.module#CompareModule' },
  { path: '**', redirectTo: 'search' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

I am running my app locally with

ng serve --host 0.0.0.0 --live-reload-port 9005 --aot true

[Meligy]

I think when you have a base path you need to explicitly pass it to build / serve as --base-href, and it's not enough to have it in the HTML. Have you tried that?

It seems that the output is meant to be used only with the base href it was built with. You cannot just take it and use it with other path. I have seen someone in another issue before set base href to some token that their server replaces later as pure string replacement.

[chinchiheather]

I did try setting the --base-href property and it still doesn't seem to work for me

[filipesilva]

base-href works at the site level, so I don't think you'll be able to load files from another domain like that.

You can try using using --deploy-url once #5372 goes in.

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