Import an external bundle JS file is not woking on Angular Lazy loading

Question

I'm working on an Angular project. I got a HTML template with bundle css and js files.

Firstly, I put them inside angular.json and did a normal routing (route every components directly from the app.routing.ts). This method worked perfectly. The outside js and css are loaded.

My build options inside the angular.js,

"options": {
  "outputPath": "dist/myNewApp",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "aot": true,
  "assets": [
    "src/favicon.ico",
    "src/assets",
  ],
  "styles": [
    "src/style.185e1449062630dae048.css"
  ],
  "scripts": [
    "src/main.dd20b1e2d0fc8a3dfde3.js"
  ]
},

my app.routing.ts,

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'index',
    pathMatch: 'full',
  },
  {
    path: 'index',
    component: IndexComponent,
    data: {
      title: 'Page Index'
    }
  },
...

But after I changed the project structure to the lazy loading. The bundle css file is loaded normally. But the JS file is not loaded. It seems like every function inside the bundle js file is not fired (but the browser's console still shows it is loaded inside webpack).

Below is my real used app.routing.ts

export const routes: Routes = [

  {
    path: '',
    loadChildren: () => import('./layout/layout.module').then(t => t.LayoutModule)
  },

]

Below is my layout-routing.module.ts,

const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', loadChildren: () => import('../pages/index/index.module').then(t => t.IndexModule) },
      { path: 'faq', loadChildren: () => import('../pages/faq/faq.module').then(t => t.FaqModule) },
      { path: 'contact', loadChildren: () => import('../pages/contact/contact.module').then(t => t.ContactModule) },
    ]
  },
];

The webpack shows it is loaded,

Do I miss anything? I already tried to put that js file inside assets and called it from index.html. This way still did not work. Please help.

I faced this similar problem in AngularJs+ lazyload+ webpack. For me the trick was manually compiling the outside js file.like this one- `window.providers.compileProvider.directive('recentItem', RecentItem);` — Anita, Feb 18 '21 at 17:50

score 0 · Answer 1 · answered Aug 23 '22 at 00:44

A few days ago i have this problem too, after trial and error i have solution. I import manually my js external files (from angular.json) to layout.component.ts

import { Component, OnInit } from '@angular/core';

// this files from angular.json js files external files (depend on your bootstrap js files)
import "../../assets/components/kit/core/index.js";
import "../../assets/components/airui/layout/menu-left/index.js";

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css'],
})

export class LayoutComponent implements OnInit {

constructor() {
}
ngOnInit(): void { 
}
}

now is working properly

Import an external bundle JS file is not woking on Angular Lazy loading

1 Answers1