Question

我正在尝试以角度方式使用cesium.js库，这样我仍然可以使用typescript编写代码，我已经看过一些第三方的lib教程，并且我正在尝试使用依赖项令牌注入依赖项。现在，我的代码没有编译，我收到错误：

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.

我有一个包含所有必要代码的堆栈闪电战，但堆栈闪电战无法处理所有运行的依赖项并获得上述错误，因此请随意将代码复制到您自己的环境中。

my stack blitz 'demo'和here is the tutorial I followed

这里也是原始文件供参考。

此项目使用 angular-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"
    ]
  }
}

.angular-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"

___的更新 ______

从@Justin Shwartzenberger进行更改后

编译器成功但页面会不断加载，直到失败...想法？一旦我将脚本和CSS添加到.angular-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 lib，因为它似乎无法导入

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

在typings.d.ts添加：
（所以TypeScript知道Cesium的事情）

declare var Cesium: any;

在app.module.ts设置中：
（只需要引入令牌然后将其值设置为第三方lib创建的Cesium全局）

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

. . .

您可以进一步创建Cesium lib的输入并从此处封装更多内容，但这应该可以让您起作用。

角度为Cesium.js的注入令牌

1 个答案: