Where to place/find the systemjs.config.js file in an angularJS2 project?

前端 未结 2 1008
小鲜肉
小鲜肉 2021-02-19 22:35

I am new to angular 2 and trying to use the ng2-datetime-picker in my project. Now after installing the ng2-datetime-picker package when I run the project got an 404 err

相关标签:
2条回答
  • 2021-02-19 23:00

    For those, who are looking for systemjs.config.js content. It will be something similar to this, You can configure it as per your requirements.

    /**
     * System configuration for Angular 2 samples
     * Adjust as necessary for your application needs.
     */
    (function(global) {
      // map tells the System loader where to look for things
      var map = {
        'app':                        'app', // 'dist',
        '@angular':                   'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs':                       'node_modules/rxjs'
      };
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };
      var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
      ];
      // Individual files (~300 requests):
      function packIndex(pkgName) {
        packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
      }
      // Bundled (~40 requests):
      function packUmd(pkgName) {
        packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
      }
      // Most environments should use UMD; some (Karma) need the individual index files
      var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
      // Add package entries for angular packages
      ngPackageNames.forEach(setPackageConfig);
      var config = {
        map: map,
        packages: packages
      };
      System.config(config);
    })(this);
    

    And your index.html will look like : (Take care the order of .js file)

    <head>
        <meta charset="UTF-8">
        <title>My Angular 2 App!</title>
    
        <!-- css -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
        <style>body { padding: 50px 0; }</style>
    
        <!-- js -->
        <!-- load the dependencies -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
    
        <!-- load our angular app with systemjs -->
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="systemjs.config.js"></script>
        <script>
            System.import('app').catch(function(err) { console.error(err); });
        </script>
    </head>
    
    0 讨论(0)
  • 2021-02-19 23:08

    You need to create a "systemjs.config.js" file and load it from index.html, like a regular script:

     <script src="systemjs.config.js"></script>
    

    Make sure you also include System.JS before the config script:

    <script src="node_modules/systemjs/dist/system.src.js"></script>
    

    The following script loads the first module:

    System.import('app').catch(function (err) { console.error(err); });
    

    By default (according to your systemjs.config.js), SystemJS will look for app.js or app/main.js.

    In your systemjs.config.js file, you want to map the node package to a path where there is an index.js or package.json, which indicates where the module is located. The module should be compatible with your module loader that you intend to use: AMD, UMD, CommonJS, SystemJS, es6 etc

    The following should work in your systemjs.config.js file:

    'paths': {
        'npm:':'node_modules/'
    },
    
    'map': {
         'ng2-datetime-picker': 'npm:ng2-datetime-picker'
          ...
    },
    'packages':  {
         'ng2-datetime-picker': 'dist/ng2-datetime-picker.umd.js'
     }
    

    Or, you could map the UMD file directly:

    'paths': {
        'npm:':'node_modules/'
    },
    
    'map': {
         'ng2-datetime-picker': 'npm:ng2-datetime-picker/dist/ng2-datetime-picker.umd.js'
          ...
    }
    

    The following will only work with CommonJS/AMD/SystemJS as index.js uses the 'require' syntax:

    'paths': {
        'npm:':'node_modules/'
     },
    
    'map': {
         'ng2-datetime-picker': 'npm:ng2-datetime-picker'
          ...
    },
    'packages':  {
         'ng2-datetime-picker': 'dist/index.js'
     }
    

    EDIT

    This should work:

        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: { main: 'boot.js', defaultExtension: 'js' },
            rxjs: { defaultExtension: 'js' },
            'ng2-datetime-picker': { main: 'dist/ng2-datetime-picker.umd.js', defaultExtension: 'js' }
        }
    
    0 讨论(0)
提交回复
热议问题