systemjs / systemjs

Dynamic ES module loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Where I can see example how to use systemjs with new angular version (14 or 15)

dxvladislavvolkov opened this issue · comments

commented
  • SystemJS Version:
  • Which library are you using?
    • system.js
    • s.js
    • system-node.cjs
  • Which extras are you using?
    • AMD extra
    • Named Exports
    • Named Register
    • Transform
    • Use Default
    • Global
    • Dynamic Import Maps
  • Are you using any custom hooks?

Question

I tried to update angular from 12 to 14 or 15. Now my angular app doesn't work
My config looks like:

`window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': '../../../../../node_modules/',
},
map: {
'ts': 'npm:plugin-typescript/lib/plugin.js',
'typescript': 'npm:typescript/lib/typescript.js',
'@angular/core': 'npm:@angular/core/esm2020/',
'@angular/platform-browser': 'npm:@angular/platform-browser/esm2020/',
// '@angular/core/esm2020/src/view': 'npm:@angular/core/esm2020/src/view/index.mjs',
'./directives/ng_optimized_image': 'npm:@angular/core/esm2020/src/directives/ng_optimized_image/index.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/esm2020/',
'@angular/forms': 'npm:@angular/forms/esm2020/',
'@angular/common': 'npm:@angular/common/esm2020/',
'@angular/compiler': 'npm:@angular/compiler/esm2020/',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs/dist/cjs/operators/index.js',
'rrule': 'npm:rrule/dist/es5/rrule.js',
'luxon': 'npm:luxon/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme/bundles/dx.all.js',
'jszip': 'npm:jszip/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme-angular': 'npm:devextreme-angular',
'@devextreme/runtime': 'npm:@devextreme/runtime',
'inferno': 'npm:inferno/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier/standalone.js',
'prettier/parser-html': 'npm:prettier/parser-html.js',
},
packages: {
'ng_optimized_image': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'@angular/core': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'@angular/compiler': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'@angular/common': {
main: './index.mjs',
defaultExtension: 'mjs',
map: {
'./directives/ng_optimized_image': './directives/ng_optimized_image/index.mjs',
'./src/directives/ng_optimized_image': './src/directives/ng_optimized_image/index.mjs'
}
},
'@angular/common/http': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'@angular/platform-browser-dynamic': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'@angular/platform-browser': {
main: './index.mjs',
defaultExtension: 'mjs',
},
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme//package.json',
'npm:@devextreme/runtime/inferno/package.json',
'npm:rxjs/package.json',
'npm:rxjs/operators/package.json',
'npm:devextreme-angular/
/package.json',
'npm:devextreme-angular/ui/*/package.json',
'npm:devextreme-angular/package.json',
'npm:devexpress-diagram/package.json',
'npm:devexpress-gantt/package.json',
],
};
// const prototypeOrig = System.constructor.prototype;
// const importOrig = prototypeOrig.import.bind(prototypeOrig);

// System.constructor.prototype.import = (a,b,c) => importOrig(a,b,c);

System.config(window.config);`