Connecting complex 3rd party libraries

[YonatanKra]

---

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.17
node: 6.3.1
os: win32 x64

Repro steps.

I've tried to setup a 3rd party library (cesiumjs). There are many errors during the "serve" process.

1. npm install cesium --save
2. In angular-cli.json file:

"styles": [
        "styles.css",
        "../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
      ],
      "scripts": [
        "../node_modules/cesium/Build/Cesium/Cesium.js"
      ],

3. Created a simple component:
   ng g component cesium-component
4. Inside the component used the Cesium global that's supposed to be available:

constructor(public element: ElementRef) {
    Cesium.BingMapsApi.defaultKey = 'AroazdWsTmTcIx4ZE3SIicDXX00yEp9vuRZyn6pagjyjgS-VdRBfBNAVkvrucbqr';
    window.CESIUM_BASE_URL = '/assets';
  }

ngOnInit() {
this.viewer = new Cesium.Viewer(this.element.nativeElement);
}

5) There are errors during the `ng serve` process (see the errors section).
6) The app does load, and Ceisum gives an error it cannot find files.
7) I copy Cesium into the app's assets dir, and set: `window.CESIUM_BASE_URL = '/assets/Cesium';` (as in the code example above)
8) I get errors during the `serve` process (see below).

### The log given by the failure.
> '''
ERROR in [default] D:\development\edu\ngCli\my_first_cli_project\src\app\cesium-component\cesium-component.component.ts:11:4 
Cannot find name 'Cesium'.

ERROR in [default] D:\development\edu\ngCli\my_first_cli_project\src\app\cesium-component\cesium-component.component.ts:12:11 
Property 'CESIUM_BASE_URL' does not exist on type 'Window'.

ERROR in [default] D:\development\edu\ngCli\my_first_cli_project\src\app\cesium-component\cesium-component.component.ts:16:9 
Property 'viewer' does not exist on type 'CesiumComponentComponent'.

ERROR in [default] D:\development\edu\ngCli\my_first_cli_project\src\app\cesium-component\cesium-component.component.ts:16:22 
Cannot find name 'Cesium'.
'''


### Mention any other details that might be useful.
My main question is:
Is there a way to connect the Cesium assets without copying them to the app itself? (make the app get them from node modules?) What would be best practice here?

Another small thing - why do the errors appear during the `serve` phase, while the app itself seems to be working correctly (I can see Cesium and it's running properly in my component).

> ---------------------------------------------------------------
Thanks

[filipesilva]

The errors you are getting are Typescript compilation errors. Typescript doesn't know about anything declared in the scripts array, because that array is intentionally kept out of typescript scope and resolution to ensure compatibility.

Your app still works, that is true. It works because, at runtime, your code works - but at compile time it does not. It doesn't now about Cesium, nor that window.CESIUM_BASE_URL exists.

The solution to this is to add typings in src/typings.d.ts, such as declare var Cesium. This tells typescript that these things 'just' exist in the global scope, and that TS shouldn't try to resolve those names.

You can read about it more in https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

[yairtawil]

Hi!

I am trying to put var 'CESIUM_BASE_URL' value to be '../node_modules/cesium/Build/Cesium'

window['CESIUM_BASE_URL'] = '../node_modules/cesium/Build/Cesium';

and I am getting 404 error from the server:

if I copy Cesium folder from node_modules to src/assets
and changed 'CESIUM_BASE_URL' value to 'assets/Cesium' like this:

window['CESIUM_BASE_URL'] = 'assets/Cesium';

it's working fine!

how can I reach '/node_modules/cesium/Build/Cesium' folder without getting 404 error??

thanks,
Yair.

[filipesilva]

@yairtawil the node_modules folder isn't copied over because we bundle everything. Unfortunately, for libraries like that, I don't see any other option than to copy it in assets.

[yairtawil]

Thanks!!

[YonatanKra]

You can view this repo: https://github.com/YonatanKra/sample_cli_project as to how to install Cesium with angular-cli

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