I have an Angular app in Plunker which no longer works since I've upgraded my app to use Angular 6 and rxjs 6.
This is my config.js file:
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:[email protected]',
'rxjs': 'npm:rxjs',
'typescript': 'npm:[email protected]/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
Now I'm getting these errors:
Failed to load resource: net::ERR_FILE_NOT_FOUND unpkg.com/[email protected]/operators.js:1 GET https://unpkg.com/[email protected]/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/[email protected]/dist/zone.js:1188:39)
at ZoneDelegate.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:421:31)
at Zone.runTask (https://unpkg.com/[email protected]/dist/zone.js:188:47)
at ZoneTask.invokeTask [as invoke] (https://unpkg.com/[email protected]/dist/zone.js:496:34)
at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1540:14)
at XMLHttpRequest.globalZoneAwareCallback (https://unpkg.com/[email protected]/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/[email protected]/observable/ConnectableObservable 404 () unpkg.com/[email protected]/observable/merge:1 GET https://unpkg.com/[email protected]/observable/merge 404 () unpkg.com/[email protected]/Observable:1 GET https://unpkg.com/[email protected]/Observable 404 () unpkg.com/[email protected]/operators/groupBy:1 GET https://unpkg.com/[email protected]/operators/groupBy 404 () unpkg.com/[email protected]/util/UnsubscriptionError:1 GET https://unpkg.com/[email protected]/util/UnsubscriptionError 404 () unpkg.com/[email protected]/util/EmptyError:1 GET https://unpkg.com/[email protected]/util/EmptyError 404 () unpkg.com/[email protected]/scheduler/VirtualTimeScheduler:1 GET https://unpkg.com/[email protected]/scheduler/VirtualTimeScheduler 404 () unpkg.com/[email protected]/observable/generate:1 GET https://unpkg.com/[email protected]/observable/generate 404 () unpkg.com/[email protected]/observable/of:1 GET https://unpkg.com/[email protected]/observable/of 404 () unpkg.com/[email protected]/observable/iif:1 GET https://unpkg.com/[email protected]/observable/iif 404 () unpkg.com/[email protected]/AsyncSubject:1 GET https://unpkg.com/[email protected]/AsyncSubject 404 () unpkg.com/[email protected]/Notification:1 GET https://unpkg.com/[email protected]/Notification 404 () unpkg.com/[email protected]/observable/bindNodeCallback:1 GET https://unpkg.com/[email protected]/observable/bindNodeCallback 404 () unpkg.com/[email protected]/observable/timer:1 GET https://unpkg.com/[email protected]/observable/timer 404 () unpkg.com/[email protected]/util/identity:1 GET https://unpkg.com/[email protected]/util/identity 404 () unpkg.com/[email protected]/ReplaySubject:1 GET https://unpkg.com/[email protected]/ReplaySubject 404 () unpkg.com/[email protected]/config:1 GET https://unpkg.com/[email protected]/config 404 () unpkg.com/[email protected]/scheduler/animationFrame:1 GET https://unpkg.com/[email protected]/scheduler/animationFrame 404 () unpkg.com/[email protected]/observable/onErrorResumeNext:1 GET https://unpkg.com/[email protected]/observable/onErrorResumeNext 404 () unpkg.com/[email protected]/symbol/observable:1 GET https://unpkg.com/[email protected]/symbol/observable 404 () unpkg.com/[email protected]/observable/defer:1 GET https://unpkg.com/[email protected]/observable/defer 404 () unpkg.com/[email protected]/scheduler/asap:1 GET https://unpkg.com/[email protected]/scheduler/asap 404 () unpkg.com/[email protected]/util/ArgumentOutOfRangeError:1 GET https://unpkg.com/[email protected]/util/ArgumentOutOfRangeError 404 () unpkg.com/[email protected]/Subject:1 GET https://unpkg.com/[email protected]/Subject 404 () unpkg.com/[email protected]/scheduler/async:1 GET https://unpkg.com/[email protected]/scheduler/async 404 () unpkg.com/[email protected]/Subscriber:1 GET https://unpkg.com/[email protected]/Subscriber 404 () unpkg.com/[email protected]/observable/bindCallback:1 GET https://unpkg.com/[email protected]/observable/bindCallback 404 () unpkg.com/[email protected]/util/isObservable:1 GET https://unpkg.com/[email protected]/util/isObservable 404 () unpkg.com/[email protected]/util/noop:1 GET https://unpkg.com/[email protected]/util/noop 404 () unpkg.com/[email protected]/BehaviorSubject:1 GET https://unpkg.com/[email protected]/BehaviorSubject 404 () unpkg.com/[email protected]/observable/pairs:1 GET https://unpkg.com/[email protected]/observable/pairs 404 () unpkg.com/[email protected]/observable/never:1 GET https://unpkg.com/[email protected]/observable/never 404 () unpkg.com/[email protected]/observable/zip:1 GET https://unpkg.com/[email protected]/observable/zip 404 () unpkg.com/[email protected]/observable/empty:1 GET https://unpkg.com/[email protected]/observable/empty 404 () unpkg.com/[email protected]/observable/using:1 GET https://unpkg.com/[email protected]/observable/using 404 () unpkg.com/[email protected]/util/TimeoutError:1 GET https://unpkg.com/[email protected]/util/TimeoutError 404 () unpkg.com/[email protected]/scheduler/queue:1 GET https://unpkg.com/[email protected]/scheduler/queue 404 () unpkg.com/[email protected]/observable/forkJoin:1 GET https://unpkg.com/[email protected]/observable/forkJoin 404 () unpkg.com/[email protected]/Scheduler:1 GET https://unpkg.com/[email protected]/Scheduler 404 () unpkg.com/[email protected]/Subscription:1 GET https://unpkg.com/[email protected]/Subscription 404 () unpkg.com/[email protected]/observable/fromEventPattern:1 GET https://unpkg.com/[email protected]/observable/fromEventPattern 404 () unpkg.com/[email protected]/observable/range:1 GET https://unpkg.com/[email protected]/observable/range 404 () unpkg.com/[email protected]/observable/from:1 GET https://unpkg.com/[email protected]/observable/from 404 () unpkg.com/[email protected]/observable/interval:1 GET https://unpkg.com/[email protected]/observable/interval 404 () unpkg.com/[email protected]/util/ObjectUnsubscribedError:1 GET https://unpkg.com/[email protected]/util/ObjectUnsubscribedError 404 () unpkg.com/[email protected]/observable/combineLatest:1 GET https://unpkg.com/[email protected]/observable/combineLatest 404 () unpkg.com/[email protected]/observable/concat:1 GET https://unpkg.com/[email protected]/observable/concat 404 () unpkg.com/[email protected]/util/pipe:1 GET https://unpkg.com/[email protected]/util/pipe 404 () unpkg.com/[email protected]/observable/race:1 GET https://unpkg.com/[email protected]/observable/race 404 () unpkg.com/[email protected]/observable/fromEvent:1 GET https://unpkg.com/[email protected]/observable/fromEvent 404 () unpkg.com/[email protected]/observable/throwError:1 GET https://unpkg.com/[email protected]/observable/throwError 404 ()
I've resolved by modifying my config.js as follows:
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'
}
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments