3

In Angular I added a new admin module which is lazy loaded when the user visits the admin routes. 

{
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule',
}

The module is present in the dist folder but the browser can't resolve the module .js file because it is looking in the wrong place.

The module is build by angular as of the build log:

chunk {admin-admin-module} admin-admin-module.js, admin-admin-module.js.map (admin-admin-module) 293 kB  [rendered]

All build files (main.js, polyfills.js etc.) are stored in a directory named browser so the request URL should be http://localhost:8000/browser/admin-admin-module.js but instead the request URL is http://localhost:8000/admin-admin-module.js. This module file is the only file that is incorrectly loaded.

I can't seem to figure out why it suddenly wants to load this module from the root of the application and not in the location the rest of the *.js files are loaded from.

Mark C.
  • 461
  • 6
  • 16

5 Answers5

2

If you run your app in a local webserver like in your case you have to set the baseHref attribute in your angular.json file to work with a domain sub-path

or

append it to your build command like --base-href=/browser/

JohnnyDevNull
  • 951
  • 1
  • 8
  • 20
  • I added this option to my `ng build` command but still angular looks in the wrong directory for the module files – Mark C. Jul 24 '19 at 11:51
  • Force reload or application, this is pretty shure your problem... EDIT: ...and don't forget to replace your files with the new build from the dist folder. – JohnnyDevNull Jul 24 '19 at 11:54
  • In my index file there was a tag in the head `` I changed this to `` but now the application adds `browser` to every path. This is not what I want. Only the modules need to be loaded with the `/browser/` prefix – Mark C. Jul 24 '19 at 12:07
  • thats not possible... you have to build your application with the `baseHref` attribute and deploy it under that path completly with all modules – JohnnyDevNull Jul 24 '19 at 12:08
  • Okay, then I have to find a different solution for my case. I will accept this answer because it fixes the problem on how to change the path of which the modules are loaded. But is not the ideal situation for my case. Thanks though – Mark C. Jul 29 '19 at 07:59
  • maybe this could be helpful for you @MarkC. :https://stackoverflow.com/a/40293482/3634274 – JohnnyDevNull Jul 30 '19 at 10:50
  • Try to change `base-href` in *index.html* to `` and the one in *angular.json* to `"options": { ..., "baseHref": "/browser"}` – Pedram A. Keyvani May 03 '22 at 19:33
2

For anyone else that lands here in search of a solution to this issue, adding this to the webpack config resolved this issue for me. My setup is an Angular frontend app being served from a django backend with django-webpack-loader employed to load the static files from /static/bundles/. I added the following to my extra-webpack.config.js.

publicPath: "/static/bundles/"

This solution is noted here

King Leon
  • 1,154
  • 12
  • 21
1

Try to this:-

app-routing.module.ts:-

import { Routes, RouterModule } from '@angular/router';
import { UserDashboardLayoutComponent } from './layout/dashboard-layout/user-dashboard-layout.component';
import { AuthGuard } from './core/services/auth-guard.service';


const appRoutes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },

//routes : start
{ path: 'login', loadChildren: './pages/login/login.module#LoginModule' },
{ path: '', loadChildren: './pages/login/login.module#LoginModule', pathMatch: 'full' },
{ path: 'signup', loadChildren: './pages/signup/signup.module#SignupModule' },
//routes : End

{
    path: 'dashboard',
    loadChildren: './pages/dashboard/dashboard.module#DashboardModule',
    canActivate: [AuthGuard],
}

];

export const routing = RouterModule.forRoot(appRoutes, { useHash: false });

app.module.ts:-

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientService } from './core/services/http-client.service';
import { AuthService } from './core/services/auth.service';
import { AuthGuard } from './core/services/auth-guard.service';


@NgModule({
 declarations: [
   AppComponent
 ],
imports: [
  routing,
  RouterModule,
  BrowserModule,
  BrowserAnimationsModule,
  HttpModule,
  HttpClientModule
],
providers: [
  HttpClientService, AuthService, AuthGuard
],
  bootstrap: [AppComponent]
})
export class AppModule { }
FrontEnd-er
  • 661
  • 4
  • 13
1

This seems to be a server issue. You should be able to specify the directory to which the route http://localhost:8000/ or http://localhost:8000/browser/ "points" to and serve those files statically. This route you would use to set the deployUrl inside the angular.json file in the "configurations" > "production" (or whatever) section. Also you can set the baseUrl (depending on your settings but "/" or "./" should work.).

Felix Lemke
  • 6,189
  • 3
  • 40
  • 67
0

Add deployUrl in angulor.json.

angular.json -> projects -> [Name of Project] -> architect -> build -> options -> "deployUrl": "[Production Path]"

Code Example

"options": {
 "deployUrl": "/hello-project/browser/",
 "outputPath": "dist/hello-project/browser",
 "index": "src/index.html",
}

In my case, my Angular project production files serve from Spring backend. Spring serve files from folder called Frontend/dist/[Name of Project]/browser/*. No problem in Angular one module development. But Angular's lazy loading with multi-modules found this issue. Browser find main.js, other files such as runtime.js, common.js from browser folder. But can’t find lazy loading module files. Because browser find lazy modules from root level not from browser folder path in runtime. So, need to add deployUrl in Angular's lazy loading module development like this case.

user13851156
  • 1