Как загрузить js на уровне компонента в angular 4. Я не хочу загружать все js файлы при запуске приложения

У меня есть много js файлов в моем проекте. Я хочу загрузить их при загрузке определенного модуля или компонента, когда приложение запускается.

Кто-нибудь знает, как это сделать?

В настоящее время я загружаю index.html. или другим способом добавить в angular -cli.json файл в script. Но оба способа загружают js при запуске.

Мне нужно загрузить, когда будет работать конкретная страница или модуль.

Ответ 1

Я уже дал ответ на этот вопрос, но некоторые из них не могут быть отмечены как дубликаты.

Пожалуйста, проверьте эту ссылку: fooobar.com/questions/387431/...

где вы можете найти, как загрузить внешний javascript во время выполнения на уровне компонента.

Вам нужно создать script element на лету, а затем добавить его в DOM.

В этой функции loadScript у меня есть только check existence одного js, если у вас несколько js, тогда вам нужно внести некоторые изменения в логику.

Если у вас есть какие-либо вопросы, дайте мне знать, я помогу вам

Ответ 2

Просто напишите обычный загрузчик script:

   public loadScript() {
            let body = <HTMLDivElement> document.body;
            let script = document.createElement('script');
            script.innerHTML = '';
            script.src = 'url';
            script.async = true;
            script.defer = true;
            body.appendChild(script);
    }

а затем вызовите его там, где хотите:

export class MyComponent{

    ngOnInit(){
        this.loadScript();

    }

}

Но если эти файлы являются Typescript файлами, вы можете лениво загрузить их также различными способами:

1- Использование уровня модуля по умолчанию ленивая загрузка

2- Использование webpack require

3- Использование загрузчика модуля SystemJs

Ответ 3

Вы можете добиться этого с помощью ленивой функции загрузки RouterModule.

Настройте свой app.module.ts следующим образом. loadChildren -property должен указывать на пункт назначения модуля и после того, как хэш должен быть именем модуля.

const routes: Routes = [
    {
        path: 'landing-page',
        loadChildren: './landing-page/landing-page.module#LandingPageModule'
    },
    {
        path: 'another-page',
        loadChildren: './another-page/another-page.module#AnotherPageModule'
    }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot(routes),
    ...
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Поместите роутер-выход внутри вашего html, если он еще не сделан:

<router-outlet></router-outlet>

Затем настройте свои страничные модули следующим образом:

const routes: Routes = [
  { path: '', component: LandingPageComponent },
  ...
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    ...
  ],
  declarations: [ ... ],
  providers: [ ... ]
})
export class LandingPageModule { }

Это создает кусок для каждого модуля. В моем проекте это выглядит так:

И когда я открою свой сайт, я загружу только требуемые фрагменты для текущей страницы:

Ответ 4

Найдите файл .angular-cli.json и найдите массив скриптов, затем добавьте скрипты js; Вот так:

<root-directory> > .angular-cli.json > 
"scripts": [
  "../node_modules/tinymce/tinymce.js",
  "../node_modules/tinymce/themes/modern/theme.js",
]

ИЛИ вы можете использовать Lazy Loading...