Angular-cli: Reference Error: System Not Defined (Angular-CLI) [404 on .js resources in index.html]

Created on 15 May 2017 · 9Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.3
node: 6.10.3
os: win32 x64
@angular/animations: 4.1.2
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Repro steps.

Running: ng serve --prod --aot

{project_dir}/src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!-- Polyfill(s) for older browsers -->
    <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/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.ts').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <z-app-component>Loading...</z-app-component>
  </body>
</html>

{project_dir}/src/systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'src/app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

{project_dir}/package.json

{
  "name": "REMOVED",
  "author": "REMOVED",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@angular/router": "^4.1.2",
    "angular": "^1.6.4",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.0",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.3",
    "@angular/compiler-cli": "^4.1.2",
    "@types/jasmine": "2.5.47",
    "@types/node": "^7.0.18",
    "codelyzer": "~3.0.1",
    "jasmine-core": "2.6.1",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "ts-node": "3.0.4",
    "tslint": "^5.2.0",
    "typescript": "~2.3.2"
  }
}

The log given by the failure.

ff_errors

Desired functionality.

Conflicted. On one hand I don't think SystemJS is used for angular-cli but instead uses Webpack. I don't typically do front end development and I'm new to Angular (v4). Errors just don't look good and I don't know what impact not resolving these issues will have on the rest of the application (other portions of the minimal application still work despite these errors).

Mention any other details that might be useful.

Project started with the quick-start and removal of "unnecessary files". I have no idea where to go and what documentation to trust as a new user. I've read through hundreds of github pages and stack overflow discussions around issues similar to (and the same as) what I'm struggling with now.

I don't know if there's anything else I can include to outline the scope of issue or what it might be. I am not even certain it's 100% on angular's end, but I've run out of ideas and hours trying to sort it out!

more info

Source

Gaudon

All 9 comments

@Gaudon Was the project created using Angular CLI? From the images of project structure above, seems like it was systemjs project and then migrated half way to CLI. Is there a repo for it? Can you create a new CLI project and copy the files over and get rid of systemjs altogether?

sumitarora on 15 May 2017

👍1

You are probably correct in assuming it was migrated half way. Most likely because I didn't / wasn't sure entirely what I was doing, flipping between documentation for Angular v1 and Angular v2/3/4 + external resources.

There is a private repo (company code) that if I had to share to sort it out I would (we're redoing a legacy system in angularv4+typscript front end) and there's essentially nothing proprietary in there yet (started last week!).

I will try to create a new CLI project and copy the files over now and post back shortly when I figure out how to exactly do that! (Apologies in advance if this is an entirely my fault issue)

Gaudon on 15 May 2017

@sumitarora I'm running through the cli quickstart now. Shouldn't take long.

Gaudon on 15 May 2017

👍1

@sumitarora this resolved the issue. My confusion was simply that I was unaware during project setup the differences between cli based and "other?". Stumbling across comments regarding webpack vs systemJS etc led me to believe something was incorrectly setup but I didn't have enough framework knowledge to identify what it was.

Copied everything over and re-added some dependencies and now it works.

Cheers!

Gaudon on 15 May 2017

🎉1

@Gaudon
I have a same problem. so how did you fix them?