SystemJS 依赖项未加载

Question

我不明白为什么没有加载依赖项。我的理解是这是 SystemJS 的一个核心特性。我在下面包含了我的 systemjs.config.json 文件。

systemjs.config.js?v=636221065494454018:162{  
   "warnings":true,
   "paths":{  
      "lib:":"lib/"
   },
   "meta":{  
      "@ngrx/core":{  
         "exports":"@ngrx/core"
      },
      "@ngrx/store":{  
         "exports":"@ngrx/store"
      },
      "localforage":{  
         "exports":"localforage"
      },
      "moment":{  
         "exports":"moment"
      },
      "underscore":{  
         "exports":"underscore"
      },
      "sortablejs":{  
         "exports":"sortablejs"
      },
      "clndr":{  
         "exports":"clndr",
         "format":"global",
         "deps":[  
            "jquery",
            "moment"
         ]
      },
      "swiper":{  
         "exports":"swiper",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "select2":{  
         "exports":"select2",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "autosize":{  
         "exports":"autosize",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "jquery":{  
         "exports":"jquery"
      },
      "jquery.mousewheel":{  
         "exports":"jquery.mousewheel",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "jquery.mCustomScrollbar":{  
         "exports":"jquery.mCustomScrollbar",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "hammerjs":{  
         "exports":"hammerjs"
      },
      "wnumb":{  
         "exports":"wnumb"
      },
      "clipboard":{  
         "exports":"clipboard"
      },
      "materialize-css":{  
         "exports":"materialize-css",
         "format":"global",
         "deps":[  
            "jquery"
         ]
      },
      "noUiSlider":{  
         "exports":"noUiSlider",
         "format":"global",
         "deps":[  
            "materialize-css"
         ]
      }
   },
   "map":{  
      "@angular":"lib:@angular",
      "aot":"aot",
      "app":"app",
      "rxjs":"lib:rxjs/",
      "@ngrx/core":"lib:@ngrx/core/",
      "@ngrx/store":"lib:@ngrx/store/",
      "localforage":"lib:localforage/",
      "moment":"lib:moment/",
      "underscore":"lib:underscore/",
      "sortablejs":"lib:sortablejs/",
      "clndr":"lib:clndr/",
      "swiper":"lib:swiper/",
      "select2":"lib:select2/",
      "autosize":"lib:autosize/",
      "jquery":"lib:jquery/",
      "jquery.mousewheel":"lib:jquery.mousewheel/",
      "jquery.mCustomScrollbar":"lib:jquery.mCustomScrollbar/",
      "hammerjs":"lib:hammerjs/",
      "wnumb":"lib:wnumb/",
      "clipboard":"lib:clipboard/",
      "materialize-css":"lib:materialize-css/dist/js",
      "noUiSlider":"lib:materialize-css",
      "plugin-babel":"lib:babel/plugin-babel.js",
      "systemjs-babel-build":"lib:babel/systemjs-babel-browser.js",
      "plugin-typescript":"lib:typescript",
      "typescript":"lib:typescript"
   },
   "packages":{  
      "@angular/http":{  
         "main":"/bundles/http.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/core":{  
         "main":"/bundles/core.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/router":{  
         "main":"/bundles/router.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/common":{  
         "main":"/bundles/common.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/compiler":{  
         "main":"/bundles/compiler.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/forms":{  
         "main":"/bundles/forms.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/platform-browser":{  
         "main":"/bundles/platform-browser.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/platform-webworker":{  
         "main":"/bundles/platform-webworker.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/platform-browser-dynamic":{  
         "main":"/bundles/platform-browser-dynamic.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "@angular/platform-webworker-dynamic":{  
         "main":"/bundles/platform-webworker-dynamic.umd.js",
         "defaultExtension":"js",
         "format":"cjs"
      },
      "aot":{  
         "defaultExtension":"ts",
         "format":"esm",
         "meta":{  
            "*.ts":{  
               "loader":"plugin-typescript"
            }
         }
      },
      "app":{  
         "defaultExtension":"ts",
         "format":"esm",
         "meta":{  
            "*.ts":{  
               "loader":"plugin-typescript"
            }
         }
      },
      "rxjs":{  
         "defaultExtension":"js",
         "format":"esm",
         "meta":{  
            "*.js":{  
               "loader":"plugin-babel"
            }
         }
      },
      "@ngrx/core":{  
         "defaultExtension":"js",
         "main":"index",
         "format":"esm",
         "meta":{  
            "*.js":{  
               "loader":"plugin-babel"
            }
         }
      },
      "@ngrx/store":{  
         "defaultExtension":"js",
         "main":"index",
         "format":"esm",
         "meta":{  
            "*.js":{  
               "loader":"plugin-babel"
            }
         }
      },
      "localforage":{  
         "defaultExtension":"js",
         "main":"localforage",
         "format":"esm",
         "meta":{  
            "*.js":{  
               "loader":"plugin-babel"
            }
         }
      },
      "moment":{  
         "defaultExtension":"js",
         "main":"moment",
         "format":"global"
      },
      "underscore":{  
         "defaultExtension":"js",
         "main":"underscore",
         "format":"global"
      },
      "sortablejs":{  
         "defaultExtension":"js",
         "main":"sortable",
         "format":"global"
      },
      "clndr":{  
         "defaultExtension":"js",
         "main":"clndr",
         "format":"global"
      },
      "swiper":{  
         "defaultExtension":"js",
         "main":"swiper",
         "format":"global"
      },
      "select2":{  
         "defaultExtension":"js",
         "main":"select2.full",
         "format":"global"
      },
      "autosize":{  
         "defaultExtension":"js",
         "main":"autosize",
         "format":"global"
      },
      "jquery":{  
         "defaultExtension":"js",
         "main":"jquery",
         "format":"global"
      },
      "jquery.mousewheel":{  
         "defaultExtension":"js",
         "main":"jquery.mousewheel",
         "format":"global"
      },
      "jquery.mCustomScrollbar":{  
         "defaultExtension":"js",
         "main":"jquery.mCustomScrollbar",
         "format":"global"
      },
      "hammerjs":{  
         "defaultExtension":"js",
         "main":"hammer",
         "format":"global"
      },
      "wnumb":{  
         "defaultExtension":"js",
         "main":"wnumb",
         "format":"global"
      },
      "clipboard":{  
         "defaultExtension":"js",
         "main":"clipboard",
         "format":"global"
      },
      "materialize-css":{  
         "defaultExtension":"js",
         "main":"materialize",
         "format":"global"
      },
      "noUiSlider":{  
         "defaultExtension":"js",
         "main":"noUiSlider",
         "format":"global"
      },
      "plugin-typescript":{  
         "main":"plugin.js"
      },
      "typescript":{  
         "main":"typescript.js",
         "meta":{  
            "typescript.js":{  
               "exports":"ts"
            }
         }
      }
   },
   "typescriptOptions":{  
      "target":"es5",
      "module":"es6",
      "emitDecoratorMetadata":true,
      "experimentalDecorators":true
   },
   "transpiler":"plugin-typescript"
}

例如，clndr 包未加载 moment.js 库。似乎声明依赖关系的语法在过去一年左右发生了很大变化......我试图了解从 systemjs 0.20.5（大约一周前发布）开始列出包依赖关系的正确方法是什么.

感谢任何帮助 - 谢谢。

Answer 1

看起来 SystemJS 需要元定义中的完整路径。此配置正在运行...

{
   "warnings":true,
   "map":{
      "@angular":"lib:@angular",
      "aot":"aot/",
      "app":"app/",
      "rxjs":"lib:rxjs/",
      "@ngrx/core":"lib:@ngrx/core/",
      "@ngrx/store":"lib:@ngrx/store/",
      "localforage":"lib:localforage/",
      "moment":"lib:moment/",
      "underscore":"lib:underscore/",
      "sortablejs":"lib:sortablejs/",
      "clndr":"lib:clndr/",
      "swiper":"lib:swiper/",
      "select2":"lib:select2/",
      "autosize":"lib:autosize/",
      "jquery":"lib:jquery/",
      "jquery.mousewheel":"lib:jquery.mousewheel/",
      "jquery.mCustomScrollbar":"lib:jquery.mCustomScrollbar/",
      "hammerjs":"lib:hammerjs/",
      "wnumb":"lib:wnumb/",
      "clipboard":"lib:clipboard/",
      "materialize-css":"lib:materialize-css/dist/js/",
      "noUiSlider":"lib:materialize-css/",
      "plugin-babel":"lib:babel/plugin-babel.js",
      "systemjs-babel-build":"lib:babel/systemjs-babel-browser.js",
      "plugin-typescript":"lib:typescript",
      "typescript":"lib:typescript"
   },
   "meta":{
      "lib:clndr/clndr.js":{
         "deps":[
            "moment",
            "jquery"
         ]
      },
      "lib:swiper/swiper.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:select2/select2.full.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:autosize/autosize.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:jquery.mousewheel/jquery.mousewheel.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:jquery.mCustomScrollbar/jquery.mCustomScrollbar.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:materialize-css/dist/js/materialize.js":{
         "deps":[
            "jquery"
         ]
      },
      "lib:materialize-css/noUiSlider.js":{
         "deps":[
            "materialize-css"
         ]
      }
   },
   "paths":{
      "lib:":"lib/"
   },
   "depCache":{
      "clndr":[
         "moment",
         "jquery"
      ],
      "swiper":[
         "jquery"
      ],
      "select2":[
         "jquery"
      ],
      "autosize":[
         "jquery"
      ],
      "jquery.mousewheel":[
         "jquery"
      ],
      "jquery.mCustomScrollbar":[
         "jquery"
      ],
      "materialize-css":[
         "jquery"
      ],
      "noUiSlider":[
         "materialize-css"
      ]
   },
   "packages":{
      "@angular/http":{
         "main":"/bundles/http.umd.js",
         "defaultExtension":"js"
      },
      "@angular/core":{
         "main":"/bundles/core.umd.js",
         "defaultExtension":"js"
      },
      "@angular/router":{
         "main":"/bundles/router.umd.js",
         "defaultExtension":"js"
      },
      "@angular/common":{
         "main":"/bundles/common.umd.js",
         "defaultExtension":"js"
      },
      "@angular/compiler":{
         "main":"/bundles/compiler.umd.js",
         "defaultExtension":"js"
      },
      "@angular/forms":{
         "main":"/bundles/forms.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-browser":{
         "main":"/bundles/platform-browser.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-webworker":{
         "main":"/bundles/platform-webworker.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-browser-dynamic":{
         "main":"/bundles/platform-browser-dynamic.umd.js",
         "defaultExtension":"js"
      },
      "@angular/platform-webworker-dynamic":{
         "main":"/bundles/platform-webworker-dynamic.umd.js",
         "defaultExtension":"js"
      },
      "aot":{
         "defaultExtension":"ts",
         "meta":{

         }
      },
      "app":{
         "defaultExtension":"ts",
         "meta":{

         }
      },
      "rxjs":{
         "defaultExtension":"ts",
         "meta":{

         }
      },
      "@ngrx/core":{
         "defaultExtension":"js",
         "meta":{
            "*.js":{
               "loader":"plugin-babel"
            }
         },
         "main":"index",
         "format":"esm"
      },
      "@ngrx/store":{
         "defaultExtension":"js",
         "meta":{
            "*.js":{
               "loader":"plugin-babel"
            }
         },
         "main":"index",
         "format":"esm"
      },
      "localforage":{
         "defaultExtension":"js",
         "meta":{
            "*.js":{
               "loader":"plugin-babel"
            }
         },
         "main":"localforage",
         "format":"esm"
      },
      "moment":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"moment",
         "format":"global"
      },
      "underscore":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"underscore",
         "format":"global"
      },
      "sortablejs":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"sortable",
         "format":"global"
      },
      "clndr":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"clndr",
         "format":"global"
      },
      "swiper":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"swiper",
         "format":"global"
      },
      "select2":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"select2.full",
         "format":"global"
      },
      "autosize":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"autosize",
         "format":"global"
      },
      "jquery":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"jquery",
         "format":"global"
      },
      "jquery.mousewheel":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"jquery.mousewheel",
         "format":"global"
      },
      "jquery.mCustomScrollbar":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"jquery.mCustomScrollbar",
         "format":"global"
      },
      "hammerjs":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"hammer",
         "format":"global"
      },
      "wnumb":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"wnumb",
         "format":"global"
      },
      "clipboard":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"clipboard",
         "format":"global"
      },
      "materialize-css":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"materialize",
         "format":"global"
      },
      "noUiSlider":{
         "defaultExtension":"js",
         "meta":{

         },
         "main":"noUiSlider",
         "format":"global"
      },
      "plugin-typescript":{
         "main":"plugin.js"
      },
      "typescript":{
         "main":"typescript.js",
         "meta":{
            "typescript.js":{
               "exports":"ts"
            }
         }
      }
   },
   "typescriptOptions":{
      "target":"es5",
      "module":"es6",
      "emitDecoratorMetadata":true,
      "experimentalDecorators":true
   },
   "transpiler":"plugin-typescript"
}

注意前后的元节...我认为导出和格式语句在这里无关紧要。 lib: 定义为路径 { 'lib:': 'lib/'}

之前

"clndr":{  
         "exports":"clndr",
         "format":"global",
         "deps":[  
            "jquery",
            "moment"
         ]
      },

之后

 "lib:clndr/clndr.js":{
         "deps":[
            "moment",
            "jquery"
         ]
      },

SystemJS 依赖项未加载

SystemJS depdencies not loading

systemjs