Angular-cli: 3rd party library not being load when route changes

[AndreAlves10]

OS

Windows 8.1

Versions
@angular/cli: 1.0.0-beta.30
node: 6.9.4
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.7

Error
I'm loading external libraries in apps[0].scripts.

When I navigate from Component X to Component Y, the external libraries seem to no longer be loaded. However, if I refresh the page while in Component Y, the libraries are indeed loaded.

Any ideas why this happening? Router changing seem to not be loading external libraries.

Thank you

[RicardoVaranda]

How exactly are you loading these external libraries when navigating from Component X to Component y? This will allow us to make a better judgement on where the issue is.

[AndreAlves10]

Thank you for the answer Ricardo,

By loading external libraries through apps[0].scripts shouldn't they be available in all components?

My most recent approach to load these scripts in Component Y would be to add them dynamically, such as:

private addScriptTagToElementDOM(pathToScript: string): void {
    let script: HTMLScriptElement = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", pathToScript);
    this.elementRef.nativeElement.appendChild(script);
  }

Do you think this is the best approach? I'm a newbie in Angular-cli so I might be misinterpreting some concepts.

[AndreAlves10]

I was able to solve this problem by importing the external libraries on ngAfterViewInit(), as follows:

ngAfterViewInit() {
    require("../../../node_modules/js/q.js");
    require("../../../node_modules/js/w.min.js");
    require("../../../node_modules/js/e.min.js");
    require("../../../node_modules/js/r.js");
    require("../../../node_modules/js/t.js");
    require("../../../node_modules/js/y.js");
  }

[filipesilva]

The libraries should be loaded in the global scope via script tags, regardless of the component you're in. If you can give me an example of how it's not working for you I can investigate.

[AndreAlves10]

This is my apps[0].scripts:

"scripts": [
        "../node_modules/js/q.js",
        "../node_modules/js/w.js",
        "../external_libraries/js/e.js",
        "../external_libraries/js/r.js",
        "../external_libraries/js/t.js",
        "../external_libraries/js/yjs"
      ]

My project has two separate components:

Component X
Has a list of elements. When you click an element you are redirected to Component Y. These two components _are not_ sub-components of another component. They are totally separate from each other.

Component X is the "root", when the web app starts you are automatically redirected to Component X. At this stage the external libraries are correctly loaded. However, when I click on an element of Component X and navigate to Component Y, these external libraries are "lost". I tried to import the libraries in index.html but from what I'read, they should be loaded in apps[0].scripts.

Thank you for your help, Filipe.

[filipesilva]

@AndreAlves10 I know you're explaining the best you can, but this is the sort of behaviour for which I really need a repo that reproduces the problem. There are a lot of things that can be going wrong and I don't think we can get to the bottom of it without a concrete example.

[filipesilva]

Closing as inactive.

[jabyte]

This issue might be old but I believe that the problem is still in existence. I am struggling with same issue and even after several google searches I couldn't find something that work.

[angular-automatic-lock-bot[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._}