CODEWITHSUNDEEP
angularsystemjs
Matthis.h
Matthis.h

Reputation: 909

System.config is not defined

Hi I don't know why I have this error when I want configure my angular project :

System.config is not a funtion

My package.json & html :

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.0",
    "systemjs": "^2.0.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@types/core-js": "^2.5.0"
  }
}
<html>
<head>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script>

  System.config({
  // the app will need the following dependencies
  map: {
  '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
  '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
  '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
  '@angular/platform-browser': 'node_modules/@angular/platformbrowser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js',
  'rxjs': 'node_modules/rxjs'
  },
  packages: {
  // we want to import our modules without writing '.js' at the end
  // we declare them as packages and SystemJS will add the extension for us
  '.': {}
  }
  });
  // and to finish, let's boot the app!
  System.import('main');
  </script>
</head>
<body>
  <home>
  Hello
  </home>
</body>
</html>

I think is the version of systemJS is to recent but I don't know more....

Is the configuration of SystemJs changed in the latest versions?

Upvotes: 1

Views: 2071

Answers (3)

Nagendra
Nagendra

Reputation: 31

I guess you would have upgraded to the latest system.js by mistake... which doe not support System.Config Refer to https://guybedford.com/systemjs-2.0

It is instead done using https://github.com/systemjs/systemjs/blob/2.0.0/docs/package-name-maps.md

If you managed to update the code by now, might as well post the updated sample here for use of everyone.

Upvotes: 0

user184994
user184994

Reputation: 18301

It looks like the SystemJS 2 way to do this, is to put the config (as valid JSON) in a block like so:

<script type="systemjs-packagemap">

  {
      "map": {
          "@angular/core": "node_modules/@angular/core/bundles/core.umd.js",
          "@angular/common": "node_modules/@angular/common/bundles/common.umd.js",
          "@angular/compiler": "node_modules/@angular/compiler/bundles/compiler.umd.js",
          "@angular/platform-browser": "node_modules/@angular/platformbrowser/bundles/platform-browser.umd.js",
          "@angular/platform-browser-dynamic": "node_modules/@angular/platform-browserdynamic/bundles/platform-browser-dynamic.umd.js",
          "rxjs": "node_modules/rxjs"
        },
        "packages": {
            "main": "../main.js"
        }
    }
</script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script>
    System.import('main');        
</script>

Please note, this has to be placed before the system.js script

More details can be found in their docs

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136194

There seems to be some problem with the latest version of systemjs, you can downgrade it to "0.21.3" version and you will see everything will work just fine.

Checkout angular6-without-cli working repo here.

Note: Make sure you do npm install before give it a try.

Upvotes: 1

Related Questions