CODEWITHSUNDEEP
angularsystemjs
Tim Schumacher
Tim Schumacher

Reputation: 421

systemjs.config.js not appending *.js to file names

I get a 404 Not Found in the Chrome developer console for the app.module.js because the URL trying to be resolved, after first typing in the URL to index.html, is like this, notice the app.module is missing the .js extension:

http://localhost:8080/someTomcatContext/scripts/someAppName/src/app/app.module

Here is the folder structure:

node_modules
package.json
styles.css
systemjs.config.extras.js
systemjs.config.js
systemjs-angular-loader.js
tslint.json
src
|-- app
|   |-- app.component.ts
|   |-- app.module.ts
|   |-- app.routes.ts
|-- index.html
|-- main.ts
|-- tsconfig.json

I have the following system.config.js

(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/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',

  // 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);

I have tried changing the wildcard with the following two variations in order to append the .js extension inside the system.config.js shown above:

  './src/app/*.js'
  './app/*.js'

Here is the contents of the index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <script>document.write('<base href="' + document.location + '" />');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../styles.css">

    <!-- 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.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Here is the main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Upvotes: 0

Views: 764

Answers (2)

hugovicfortman
hugovicfortman

Reputation: 201

Sorry, this may be coming in too late, but I hope it helps someone else. I experienced the same issue with the angular quickstart project. Turns out you need to add a defaultJSExtensions flag to System.config in systemjs.config.js file, and set that to true like so.

System.config(
    //paths and other settings...
    defaultJSExtensions : true
)(this);

See issue on github https://github.com/systemjs/systemjs/issues/812

Upvotes: 1

Tim Schumacher
Tim Schumacher

Reputation: 421

I upgraded my Angular 2 application to an Angular 4 application, and I used the quickstart project (https://github.com/angular/quickstart.git) as a skeleton.

I placed my application specific TS files in the src/app folder and got this working with the following structure:

node_modules
package.json
tslint.json
src
|-- app
|   |-- app.component.ts
|   |-- app.module.ts
|   |-- app.routes.ts
|-- index.html
|-- main.ts
|-- styles.css
|-- systemjs.config.extras.js
|-- systemjs.config.js
|-- systemjs-angular-loader.js
|-- tsconfig.json

My systemjs.config.js looks like this:

/**
 * 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': '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/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',

      // 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);

And my index.html looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 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.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

The main.ts looks like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Upvotes: 1

Related Questions