用于Cesium.js的角注入令牌

Question

我试图以角度的方式使用cesium.js库，这样我仍然可以在类型记录中进行编码，我已经看到了一些第三方库教程，并且我试图用一个依赖令牌注入依赖项。现在，我的代码没有编译，我得到了错误：

ERROR in ....../node_modules/cesium/Build/Cesium/Cesium.js (557,23102): Unreachable code detected.
ERROR in ....../node_modules/cesium/Build/Cesium/Cesium.js (557,24518): Unreachable code detected.
ERROR in ....../node_modules/cesium/Build/Cesium/Cesium.js (559,26990): Unreachable code detected.

我有一个包含所有必要代码的堆栈闪存，但是堆栈闪存不能处理所有要运行的依赖项并得到上面的错误，所以可以随意地将代码复制到您自己的环境中。

我的堆栈闪电战“演示”和以下是我所遵循的教程

这里还有一些原始文件供参考。

这个项目是用角-cli构建的。

我从运行npm install --save cesium开始

cesium.lib.ts

import { InjectionToken } from '@angular/core';
import * as cesiumLib from '../../../node_modules/cesium/Build/Cesium/Cesium.js';

export const cesiumToken = new InjectionToken('cesium');
export const cesium = cesiumLib;
export type Cesium = typeof cesiumLib;
export * from 'cesium';

gobe.module.ts

import { GlobeComponent } from './globe.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import * as cesiumLib from './cesium.lib';

@NgModule({
  declarations: [
    GlobeComponent
  ],
  imports: [
  ],
  providers: [
    { provide: cesiumLib.cesiumToken, useValue: cesiumLib.cesium}
  ]
})

export class GlobeModule {}

globe.component.ts

import { cesium, cesiumToken } from './cesium.lib';
import { Component, Inject, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'app-globe',
    templateUrl: './globe.component.html',
    styleUrls: ['./globe.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class GlobeComponent implements OnInit, AfterViewInit {

    constructor( @Inject(cesiumToken) private cesium: any) {
    }

    ngAfterViewInit() {
        this.viewer = new Cesium.viewer('cesiumContainer')
    }

}

globe.component.html

<div id="cesiumContainer"></div>

globe.component.css

@import url(../Build/Cesium/Widgets/widgets.css);

#cesiumContainer {
    width: 100%;
    height: 720px;
    margin: 0; padding: 0;
    overflow: hidden;
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",

    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

.角-cli.json片段

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css",
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
      ],
      "scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js",
          "../node_modules/cesium/Build/Cesium/Cesium.js"

___UPDATE______

在更改了@Justin Shwartzenberger之后

编译器是成功的，但是页面持续加载，直到失败.想法？一旦我将脚本和css添加到.角-cli.json文件中，就会发生这种情况。

Answer 1

在.angular-cli.json文件中的apps数组第一对象下添加：

(输入所需的第三方css和js文件)

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

在您的cesium.lib.ts文件中只有：

(仅创建InjectionToken，其他一切都是全局的，因为似乎无法导入Cesium库)

import { InjectionToken } from '@angular/core';
export const cesiumToken = new InjectionToken('cesium');

在您的typings.d.ts中添加：

(所以TypeScript知道铯的事)

declare var Cesium: any;

在您的app.module.ts设置中：

(只需要引入令牌，然后将其值设置为第三方库创建的铯全局值)

import {cesiumToken} from './cesium.lib';

. . .

providers: [
  { provide: cesiumToken, useValue: Cesium }
],

. . .

最后，在你的app.component.ts

(只需要将这个令牌值注入到类字段中，然后从那里使用它的API )

. . .

constructor( @Inject(cesiumToken) private cesium: any) {}

. . .

ngAfterViewInit() {
  this.viewer = new this.cesium.Viewer('cesiumContainer');
}

. . .

您可以进一步为铯库创建类型，并从这里封装更多类型，但这应该可以帮助您正常工作。