Global scripts lazy loading story issue

[kuncevic]

Versions.

Node 7.8.0
NPM 4.4.4
CLI: 1.0.0
OS: win7 x64

Repro steps.

Just followed the docs https://github.com/angular/angular-cli/wiki/stories-global-scripts
I am using powerbi-client in my lazy loaded component.

That is how I am using the library:

import * as pbi from 'powerbi-client'; 
...
export class PowerbiComponent implements OnInit {
     powerbi: any;
     ...
}

import * as pbi from 'powerbi-client'; is not required for component to work when powerbi.bundle.js is loaded in case "lazy": true. But just thought if it might trigger the powerbi.bundle.js to lazy load.

That is my component module:

@NgModule({
  imports: [
    CommonModule,
    PowerbiRoutingModule,
    MaterialModule,
    FormsModule,
    NgxDatatableModule,
    ReactiveFormsModule,
    FormsModule,
    HttpModule,
    SharedHttpModule.forRoot()
  ],
  declarations: [
    PowerbiComponent,
  ]
})
export class PowerbiModule {
    static forRoot(): ModuleWithProviders {
    return {
      ngModule: PowerbiModule,
      providers: []
    };
  }
}

.angular-cli.json:

 "scripts": [
    { "input": "../node_modules/powerbi-client/dist/powerbi", "output": "powerbi", "lazy": true}
],

So I got my component chunk and powerbi.bundle.js generated.
Then when I am activating the route the chunk gets loaded but powerbi.bundle.js is not, it is just never gets loaded.

Desired functionality.

Lazy loaded script bundle gets loaded before chunk is gets loaded.

[clydin]

The lazy option doesn't actually lazy load anything. It just prevents it from being executed on application startup.
Also, mixing scripts with imports will in most causes prevent the import from working. It's recommended to use one or the other.

[kuncevic]

@clydin i c, so say if you do lazy": true what is the next steps to make the script bundle to load? Sounds like I have to load that manually then.
So say I have a lazy loaded route that rely on script bundle so how would I manually lazy load the the script bundle when lazy loaded route gets activated?

Form the docs:

You can also rename the output and lazy load it by using the object format

How would you lazy load it?

[clydin]

In this case, I would import it in the files where it is used and let the bundling system take care of it.
if you did use the lazy option, two possible ways would be to inject a script element in the dom or bring in systemjs; neither of which is ideal here.

[kuncevic]

Currently exploring the script element option by looking in to here http://stackoverflow.com/questions/34489916/load-external-js-script-dynamically-in-angular-2
So say my external script name is powerbi.bundle.js I can reference this one in script element but when I do ng buld --prod I got the name like that powerbi.e80ce63561fa6a501bde.bundle.js, how would you handle that? Basically every time the name is gonna be different...

[clydin]

There really isn't an easy way to deal with that. Making it not hash is actually on my todo list. But I have yet to find a need for the lazy option so it's not something I'll be able to get to anytime soon.

From looking at the package you're trying to use, there's no need to add it as a script. The import should be sufficient (and handles all the bundling/loading details).

[kuncevic]

If I got it imported like that: import * as pbi from 'powerbi-client'; it is just missed in the bundle.
So I was using the scriptssection but then it is eventually ended up in its own budnle, so then I thought that "lazy": true might help but it didn't.

So the real question is how would you manage 'powerbi-client' ended up in a lazy loaded chunk?

That is the library https://github.com/Microsoft/PowerBI-JavaScript I am using, that is how its typedefs is look like https://github.com/Microsoft/PowerBI-JavaScript/blob/master/dist/powerbi.d.ts I am importing from.

[filipesilva]

We usually reserve the scripts array for legacy stuff that needs to be loaded as is. In your case, you seem to want to lazy load a TS lib you want to use as an import.

The easiest way imho is to put that component in a lazy loaded route (https://angular.io/docs/ts/latest/guide/router.html#!#lazy-loading-route-config). One thing to note is that you need to use relative paths in loadChildren in the CLI instead of absolute paths.

[kuncevic]

@filipesilva powerbi-client is never ended up in the bundle without having it in a script section by import * as pbi from 'powerbi-client' webpack is just not picking it up. Even before I setup lazy loaded components I have powerbi-client in a script section.

Now I have multiple lazy loaded components in my app and have no issues with any other libraries except this one. Without having it in script section it is just not works.

[filipesilva]

I can't help you much with that library, I haven't ever used it nor do I know how it's setup to be used. You can try asking in their issue tracker or Stack Overflow, those are places where you're more likely to get a good answer.

[AlexAlexGoTO]

@filipesilva Hello
First of all sorry for my english. I can't find solution for my issue, maybe you will be able to help me.

We want suppor LTR and RTL direction in our app. So we have 2 scss files:
application.scss
aplication.rtl.scss

In angular CLI we add it like
{ "input": "./app/scss/application.scss", "output": "ltr-style", "lazy": true },
{ "input": "./app/scss/application.rtl.scss", "output": "rtl-style", "lazy": true }
When user enter to our site we check if user language is Hebrew for example therefore we should use
rtl-style.
It's work fine if we build our app with ng serve --prod --output-hashing=media
but if we build our app just in --prod.
We can't change css because our CSS files have a hash now - for example
ltr-style.00aa4220a8035e09ee0c.bundle
rtl-style.d27a0fff2ebc7504d900.bundle

So how can we get names of our css files ?
Previously it was something like
document.getElementById('stylesheet-switcher').href = 'ltr-style.bundle.css';
but now it's not possible because we have hash in file name...

Thanks in advance.

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