更新到 Angular 6 和 rxjs 6 后 Plunker 坏了

Posted

技术标签:

【中文标题】更新到 Angular 6 和 rxjs 6 后 Plunker 坏了【英文标题】:Plunker broken after updating to Angular 6 and rxjs 6 【发布时间】:2018-12-19 15:49:09 【问题描述】:

我有一个 Angular app in Plunker,因为我已经升级我的应用程序以使用 Angular 6 和 rxjs 6,所以它不再工作了。

这是我的config.js 文件:

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest')
  angularVersion = ''; //picks up latest

else 
  angularVersion = '@' + window.AngularVersionForThisPlunker;


System.config(
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: 
    emitDecoratorMetadata: true
  ,
  paths: 
    'npm:': 'https://unpkg.com/'
  ,
  //map tells the System loader where to look for things
  map: 
    'ngx-duration-picker': 'https://unpkg.com/ngx-duration-picker@latest/bundles/ngx-duration-picker.umd.js',
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',

    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  ,
  //packages defines our app package
  packages: 
    app: 
      main: './main.ts',
      defaultExtension: 'ts'
    ,
    rxjs: 
      defaultExtension: 'js'
    
  
);

现在我收到这些错误:

Failed to load resource: net::ERR_FILE_NOT_FOUND unpkg.com/rxjs@6.2.1/operators.js:1 GET https://unpkg.com/rxjs@6.2.1/operators.js 404 () zone.js:388 Error: (SystemJS) Error: XHR error (404) loading https://unpkg.com/rxjs/operators.js
        at XMLHttpRequest.wrapFn (https://unpkg.com/zone.js@0.8.26/dist/zone.js:1188:39)
        at ZoneDelegate.invokeTask (https://unpkg.com/zone.js@0.8.26/dist/zone.js:421:31)
        at Zone.runTask (https://unpkg.com/zone.js@0.8.26/dist/zone.js:188:47)
        at ZoneTask.invokeTask [as invoke] (https://unpkg.com/zone.js@0.8.26/dist/zone.js:496:34)
        at invokeTask (https://unpkg.com/zone.js@0.8.26/dist/zone.js:1540:14)
        at XMLHttpRequest.globalZoneAwareCallback (https://unpkg.com/zone.js@0.8.26/dist/zone.js:1566:17)   Error loading https://unpkg.com/rxjs/operators.js as "rxjs/operators" from https://unpkg.com/@angular/core/bundles/core.umd.js ZoneDelegate.invoke @ zone.js:388 Zone.run @ zone.js:138 (anonymous) @ ... GET https://unpkg.com/internal@1.0.8/observable/ConnectableObservable 404 () unpkg.com/internal@1.0.8/observable/merge:1 GET https://unpkg.com/internal@1.0.8/observable/merge 404 () unpkg.com/internal@1.0.8/Observable:1 GET https://unpkg.com/internal@1.0.8/Observable 404 () unpkg.com/internal@1.0.8/operators/groupBy:1 GET https://unpkg.com/internal@1.0.8/operators/groupBy 404 () unpkg.com/internal@1.0.8/util/UnsubscriptionError:1 GET https://unpkg.com/internal@1.0.8/util/UnsubscriptionError 404 () unpkg.com/internal@1.0.8/util/EmptyError:1 GET https://unpkg.com/internal@1.0.8/util/EmptyError 404 () unpkg.com/internal@1.0.8/scheduler/VirtualTimeScheduler:1 GET https://unpkg.com/internal@1.0.8/scheduler/VirtualTimeScheduler 404 () unpkg.com/internal@1.0.8/observable/generate:1 GET https://unpkg.com/internal@1.0.8/observable/generate 404 () unpkg.com/internal@1.0.8/observable/of:1 GET https://unpkg.com/internal@1.0.8/observable/of 404 () unpkg.com/internal@1.0.8/observable/iif:1 GET https://unpkg.com/internal@1.0.8/observable/iif 404 () unpkg.com/internal@1.0.8/AsyncSubject:1 GET https://unpkg.com/internal@1.0.8/AsyncSubject 404 () unpkg.com/internal@1.0.8/Notification:1 GET https://unpkg.com/internal@1.0.8/Notification 404 () unpkg.com/internal@1.0.8/observable/bindNodeCallback:1 GET https://unpkg.com/internal@1.0.8/observable/bindNodeCallback 404 () unpkg.com/internal@1.0.8/observable/timer:1 GET https://unpkg.com/internal@1.0.8/observable/timer 404 () unpkg.com/internal@1.0.8/util/identity:1 GET https://unpkg.com/internal@1.0.8/util/identity 404 () unpkg.com/internal@1.0.8/ReplaySubject:1 GET https://unpkg.com/internal@1.0.8/ReplaySubject 404 () unpkg.com/internal@1.0.8/config:1 GET https://unpkg.com/internal@1.0.8/config 404 () unpkg.com/internal@1.0.8/scheduler/animationFrame:1 GET https://unpkg.com/internal@1.0.8/scheduler/animationFrame 404 () unpkg.com/internal@1.0.8/observable/onErrorResumeNext:1 GET https://unpkg.com/internal@1.0.8/observable/onErrorResumeNext 404 () unpkg.com/internal@1.0.8/symbol/observable:1 GET https://unpkg.com/internal@1.0.8/symbol/observable 404 () unpkg.com/internal@1.0.8/observable/defer:1 GET https://unpkg.com/internal@1.0.8/observable/defer 404 () unpkg.com/internal@1.0.8/scheduler/asap:1 GET https://unpkg.com/internal@1.0.8/scheduler/asap 404 () unpkg.com/internal@1.0.8/util/ArgumentOutOfRangeError:1 GET https://unpkg.com/internal@1.0.8/util/ArgumentOutOfRangeError 404 () unpkg.com/internal@1.0.8/Subject:1 GET https://unpkg.com/internal@1.0.8/Subject 404 () unpkg.com/internal@1.0.8/scheduler/async:1 GET https://unpkg.com/internal@1.0.8/scheduler/async 404 () unpkg.com/internal@1.0.8/Subscriber:1 GET https://unpkg.com/internal@1.0.8/Subscriber 404 () unpkg.com/internal@1.0.8/observable/bindCallback:1 GET https://unpkg.com/internal@1.0.8/observable/bindCallback 404 () unpkg.com/internal@1.0.8/util/isObservable:1 GET https://unpkg.com/internal@1.0.8/util/isObservable 404 () unpkg.com/internal@1.0.8/util/noop:1 GET https://unpkg.com/internal@1.0.8/util/noop 404 () unpkg.com/internal@1.0.8/BehaviorSubject:1 GET https://unpkg.com/internal@1.0.8/BehaviorSubject 404 () unpkg.com/internal@1.0.8/observable/pairs:1 GET https://unpkg.com/internal@1.0.8/observable/pairs 404 () unpkg.com/internal@1.0.8/observable/never:1 GET https://unpkg.com/internal@1.0.8/observable/never 404 () unpkg.com/internal@1.0.8/observable/zip:1 GET https://unpkg.com/internal@1.0.8/observable/zip 404 () unpkg.com/internal@1.0.8/observable/empty:1 GET https://unpkg.com/internal@1.0.8/observable/empty 404 () unpkg.com/internal@1.0.8/observable/using:1 GET https://unpkg.com/internal@1.0.8/observable/using 404 () unpkg.com/internal@1.0.8/util/TimeoutError:1 GET https://unpkg.com/internal@1.0.8/util/TimeoutError 404 () unpkg.com/internal@1.0.8/scheduler/queue:1 GET https://unpkg.com/internal@1.0.8/scheduler/queue 404 () unpkg.com/internal@1.0.8/observable/forkJoin:1 GET https://unpkg.com/internal@1.0.8/observable/forkJoin 404 () unpkg.com/internal@1.0.8/Scheduler:1 GET https://unpkg.com/internal@1.0.8/Scheduler 404 () unpkg.com/internal@1.0.8/Subscription:1 GET https://unpkg.com/internal@1.0.8/Subscription 404 () unpkg.com/internal@1.0.8/observable/fromEventPattern:1 GET https://unpkg.com/internal@1.0.8/observable/fromEventPattern 404 () unpkg.com/internal@1.0.8/observable/range:1 GET https://unpkg.com/internal@1.0.8/observable/range 404 () unpkg.com/internal@1.0.8/observable/from:1 GET https://unpkg.com/internal@1.0.8/observable/from 404 () unpkg.com/internal@1.0.8/observable/interval:1 GET https://unpkg.com/internal@1.0.8/observable/interval 404 () unpkg.com/internal@1.0.8/util/ObjectUnsubscribedError:1 GET https://unpkg.com/internal@1.0.8/util/ObjectUnsubscribedError 404 () unpkg.com/internal@1.0.8/observable/combineLatest:1 GET https://unpkg.com/internal@1.0.8/observable/combineLatest 404 () unpkg.com/internal@1.0.8/observable/concat:1 GET https://unpkg.com/internal@1.0.8/observable/concat 404 () unpkg.com/internal@1.0.8/util/pipe:1 GET https://unpkg.com/internal@1.0.8/util/pipe 404 () unpkg.com/internal@1.0.8/observable/race:1 GET https://unpkg.com/internal@1.0.8/observable/race 404 () unpkg.com/internal@1.0.8/observable/fromEvent:1 GET https://unpkg.com/internal@1.0.8/observable/fromEvent 404 () unpkg.com/internal@1.0.8/observable/throwError:1 GET https://unpkg.com/internal@1.0.8/observable/throwError 404 ()

【问题讨论】:

【参考方案1】:

更换

rxjs: 
  defaultExtension: 'js'
,

rxjs: 
  main: 'index.js',
  defaultExtension: 'js'
,
"rxjs/operators": 
   main: 'index.js',
   defaultExtension: 'js'
,

为我工作

【讨论】:

【参考方案2】:

我已经通过修改我的config.js 解决了如下问题:

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest')
  angularVersion = ''; //picks up latest

else 
  angularVersion = '@' + window.AngularVersionForThisPlunker;


System.config(
  transpiler: 'ts',
  typescriptOptions: 
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  ,
  meta: 
  'typescript': 
        "exports": "ts"
      
    ,
  paths: 
    'npm:': 'https://unpkg.com/'
  ,
  map: 
    app: "./src",
    'ngx-duration-picker': 'https://unpkg.com/ngx-duration-picker@latest/bundles/ngx-duration-picker.umd.js',
    '@angular/core': 'npm:@angular/core'+angularVersion+'/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common'+angularVersion+'/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler'+angularVersion+'/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser'+angularVersion+'/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic'+angularVersion+'/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http'+angularVersion+'/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router'+angularVersion+'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms'+angularVersion+'/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade.umd.js',
    '@angular/upgrade/static': 'npm:@angular/upgrade'+angularVersion+'/bundles/upgrade-static.umd.js',

    // other libraries
    'rxjs':                      'npm:rxjs',
    'ts':                        'npm:plugin-typescript',
    'typescript':                'npm:typescript'
  ,
  //packages defines our app package
  packages: 
    app: 
      main: './main.ts',
      defaultExtension: 'ts'
    ,
    rxjs: 
        main: 'index.js',
        defaultExtension: 'js'
    ,
    "rxjs/operators": 
        main: 'index.js',
        defaultExtension: 'js'
    
  
);

【讨论】:

如果能描述解决问题的更改,那就太好了。否则我们将不得不做一个差异来找出解决问题的变化。

以上是关于更新到 Angular 6 和 rxjs 6 后 Plunker 坏了的主要内容,如果未能解决你的问题,请参考以下文章

在 Angular 6 中选择带有 RxJS 的状态不起作用

RxJS 6有哪些新变化?

Angular 6 RXJS 导入语法?

Angular 7、Ngrx、Rxjs 6 - 访问延迟加载模块之间的状态

Angular 6 和 RxJS 6 重大变化

无法在 RxJs 6 和 Angular 6 中使用 Observable.of