Angular注入令牌为Cesium.js

Question

我想使用cesium.js库的角度方式，以便我仍然可以在打字稿中编码，我已经看到一些第三方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

这里有参考的原始的文件。

该项目是建立与角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" 

___ UPDATE ______

从@Justin Shwartzenberger

更改后的编译器是成功的，但在页面加载持续，直到如果失败...想法？这发生在我将脚本和css添加到.angular-cli之后。JSON文件

Answer 1

在apps数组第一个对象下添加.angular-cli.json文件：
（在第三方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附加：
（所以打字稿知道铯事）

declare var Cesium: any; 

在你app.module.ts设置：
（只需要在令牌带来然后将其值设置为第三方lib创建的铯全局）

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创建类型并从这里封装更多内容，但这应该会让你开始工作。