How to add external JS package to work within Angular? #3081

5 Answer(s)

• 

  0

  hikalkan created 7 years ago

  Support Team

  Hi,

  We use Angular-cli, so it's pretty standard to add a 3rd-party js/css library to the project. You can find tutorials on the web, for example: <a class="postlink" href="https://coryrylan.com/blog/angular-cli-adding-third-party-libraries">https://coryrylan.com/blog/angular-cli- ... -libraries</a> In short, you can download packages via npm/yarn and add to .angular-cli.json file, to the styles or scripts list (<a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/.angular-cli.json#L62">https://github.com/aspnetzero/aspnet-ze ... i.json#L62</a>)

  Save Cancel
• 

  0

  btg created 7 years ago

  Great, thanks. I'll give it a try. I had gotten about halfway through this, but didn't connect the dots. Thanks for your time.

  Save Cancel
• 

  0

  btg created 7 years ago

  <cite>hikalkan: </cite> Hi,

  We use Angular-cli, so it's pretty standard to add a 3rd-party js/css library to the project. You can find tutorials on the web, for example: <a class="postlink" href="https://coryrylan.com/blog/angular-cli-adding-third-party-libraries">https://coryrylan.com/blog/angular-cli- ... -libraries</a> In short, you can download packages via npm/yarn and add to .angular-cli.json file, to the styles or scripts list (<a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/.angular-cli.json#L62">https://github.com/aspnetzero/aspnet-ze ... i.json#L62</a>)

  Hi Hikalkan,

  So, perhaps my question wasn't specific enough. I tried your suggestions, but I had already pretty much done what you suggested. What am I doing wrong?

  My steps for adding OpenLayers to the project: 1)

  npm install openlayers
  

  npm install @types/openlayers
  

  3. Add to dashboard.component.ts

  import * as openlayers from 'openlayers';
  

  4. Add basic JS for OpenLayers under ngAfterViewInit()

  ngAfterViewInit(): void {  
   var map = new ol.Map({
              target: 'map',
              layers: [
                  new ol.layer.Tile({
                      source: new ol.source.OSM()
                  })
              ],
              view: new ol.View({
                  center: ol.proj.fromLonLat([37.41, 8.82]),
                  zoom: 4
              })
          }); }
  

  5. On viewing the dashboard in the app, I get:

  ERROR Error: Uncaught (in promise): ReferenceError: ol is not defined
  ReferenceError: ol is not defined
      at DashboardComponent.webpackJsonp.1221.DashboardComponent.ngAfterViewInit (http://localhost:4200/2.chunk.js:286:23)
      at callProviderLifecycles (http://localhost:4200/vendor.bundle.js:11452:18)
      at callElementProvidersLifecycles (http://localhost:4200/vendor.bundle.js:11427:13)
      at callLifecycleHooksChildrenFirst (http://localhost:4200/vendor.bundle.js:11411:17)
      at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12433:5)
      at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13413:42)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:12953:12)
      at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:10522:63)
      at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:48508:42)
      at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:47689:16)
      at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:47670:26)
      at http://localhost:4200/vendor.bundle.js:47606:58
      at Array.forEach (native)
      at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:47606:29)
      at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:47653:22)
      at DashboardComponent.webpackJsonp.1221.DashboardComponent.ngAfterViewInit (http://localhost:4200/2.chunk.js:286:23)
      at callProviderLifecycles (http://localhost:4200/vendor.bundle.js:11452:18)
      at callElementProvidersLifecycles (http://localhost:4200/vendor.bundle.js:11427:13)
      at callLifecycleHooksChildrenFirst (http://localhost:4200/vendor.bundle.js:11411:17)
      at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12433:5)
      at callWithDebugContext (http://localhost:4200/vendor.bundle.js:13413:42)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:4200/vendor.bundle.js:12953:12)
      at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:10522:63)
      at RouterOutlet.activateWith (http://localhost:4200/vendor.bundle.js:48508:42)
      at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:47689:16)
      at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:47670:26)
      at http://localhost:4200/vendor.bundle.js:47606:58
      at Array.forEach (native)
      at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:47606:29)
      at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:47653:22)
      at resolvePromise (http://localhost:4200/polyfills.bundle.js:6262:31) [angular]
      at resolvePromise (http://localhost:4200/polyfills.bundle.js:6233:17) [angular]
      at http://localhost:4200/polyfills.bundle.js:6310:17 [angular]
      at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:4523:37) [angular]
      at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:6143:35) [<root>]
      at HTMLAnchorElement.ZoneTask.invoke (http://localhost:4200/polyfills.bundle.js:6016:25) [<root>]
  

  Save Cancel
• 

  0

  ismcagdas created 7 years ago

  Support Team

  Hi,

  Have you added your script path to .angular-cli.json ?

  Save Cancel
• 

  0

  btg created 7 years ago

  Yes, I did add it to the .angular-cli-json. It was missing a letter in the line entry ... so it was a dumb typo.

  Thanks for all your guys' help. Feeling dumb right now :(

  Save Cancel