Skip to content

Lazy loaded modules with AOT are using incorrect base path #4734

Closed
@chinchiheather

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions