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

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>)

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.

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

Add to dashboard.component.ts

import * as openlayers from 'openlayers';

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
            })
        }); }

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>]

0

ismcagdas created 7 years ago

Support Team

Hi,

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

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 :(

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

5 Answer(s)