Angular-cli: Lazy load 3rd party script, not in global scope : WebPack

[a5hik]

angular-cli: local (v1.0.0-beta.11-webpack.2, branch: master)
node: 6.2.1
os: darwin x64

I need to add a 3rd party script which doesn't have typings..

The Doc says to include it in angular-cli.json in "scripts" section. But I assume that it will add the external lib in global scope. But I want to load this lib only on demand, i.e only add when a particular component is lazy loaded. Any suggestions?

[MasterRyd3l]

I don't think it's even adding the scripts to global scope. I tried including material lite js and css through the scripts section and styles section. Nothing was added to the final bundle.

[StevePavlin]

I tried to add bootstrap using the docs and its not working either.

[a5hik]

I can confirm the "styles" and "scripts" are getting loaded with the cli master version. you just need to restart ng serve

[a5hik]

The Problem is when the 3rd party script having runtime dependencies.. it is not resolved at runtime.

I just need to do like something below with the CLI..where I can do this with WebPack Config.

module: {
    loaders: [
      {
        test: require.resolve('tinymce/tinymce'),
        loaders: [
          'imports?this=>window',
          'exports?window.tinymce'
        ]
      },
      {
        test: /tinymce\/(themes|plugins)\//,
        loaders: [
          'imports?this=>window'
        ]
      }    
    ]
  }

PS:

I tried .. adding the main script in angular-cli.json

"scripts": [ "../node_modules/tinymce/tinymce.min.js" ],

It loaded the tinymce script ..successfully at global scope.
But I end up getting the dependent script failed to load error at runtime..Don't know how to load the dependent scripts along with the main script. (themes/plugins) scripts.

Failed to load resource: the server responded with a status of 404 (Not Found) VM16610:4 Failed to load: http://localhost:8000/themes/modern/theme.js http://localhost:8000/plugins/code/plugin.js Failed to load resource: the server responded with a status of 404 (Not Found) VM16610:4 Failed to load: http://localhost:8000/plugins/code/plugin.js

[shaddyhm]

@StevePavlin +1

[filipesilva]

@MasterRyd3l @StevePavlin the current readme refers to functionality added recently (global styles and scripts) that currently isn't yet released. We're a bit late for a release but will do it soon.

@a5hik on the latest master the global scripts must all be imported exactly as if they were script tags. I'm not familiar with how tinymce works, but if you get me a repo that I can debug on I will try to figure out what the issue is.

[aralroca]

@filipesilva If I want to add bootstrap, I need to wait to the next release? Or there are another way at this moment to add it?

[a5hik]

@filipesilva after doing the import of dependent plugins in the component the error is resolved.

import 'tinymce/themes/modern/theme'; import 'tinymce/plugins/code/plugin';

[filipesilva]

@a5hik happy to hear you got working!

@aralroca on the latest release you can use bootstrap using the global scripts.

[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._}