Robert Robert - 1 year ago 110
Javascript Question

Angular JS 2 not creating main.js

I followed the tutorial for Angular JS2 TypScript exactly adding the correct paths for my setup. And when I test it in the browser it says it can not find my main.js file. I tried testing after I start npm. When npm gets started it says "start: Unknown job: npm. Then I load up my browser run the main index file and it says XHR error (404 Not Found) loading…)

Here is my systemjs.config.js file

(function (global) {
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: '',
// angular bundles
'@angular/core': 'npm:assets/angular/node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:assets/angular/node_modules/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:assets/angular/node_modules/@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:assets/angular/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:assets/angular/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:assets/angular/node_modules/@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:assets/angular/node_modules/@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:assets/angular/node_modules/@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:assets/angular/node_modules/rxjs',
'angular2-in-memory-web-api': 'npm:assets/angular/node_modules/angular2-in-memory-web-api',
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: 'assets/scripts/app/main.js',
defaultExtension: 'js'
rxjs: {
defaultExtension: 'js'
'angular2-in-memory-web-api': {
main: 'assets/scriopts/app/index.js',
defaultExtension: 'js'

Any ideas on what I have wrong? It seems like typscript isn't generating the main.js however i did install typscript and that worked fine as well as all the angular stuff without errors.

The app is being built to run inside of a existing web site as a nested application. Thus the reasoning for the odd file structuring of including the app files under scripts. The app gets called to a header_view of the site.

As requested here is the header file which contains the scripts for loading the libraries:

<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="<?=base_url();?>assets/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="<?=base_url();?>assets/angular/node_modules/zone.js/dist/zone.js"></script>
<script src="<?=base_url();?>assets/angular/node_modules/reflect-metadata/Reflect.js"></script>
<script src="<?=base_url();?>assets/angular/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="<?=base_url();?>assets/angular/systemjs.config.js"></script>
System.import('app').catch(function(err){ console.error(err); });

This app is being added to a Codeingiter application so what I just provider is the header_view

Then inside the main body I have the


so for file structure "hope this helps!"

index.php (created by views)

  • assets folder

    • angular

      • node_modules (contains all core files for angular)

      • typings

      • package.json

      • systemjs.config.js

      • tsconfig.json

      • typings.json

    • scripts

      • app

        • app.component.ts

        • app.main.ts

        • app.module.ts

Also I was just following this tutorial below to get to this point.!#prereq

here is my app.main.ts file

import { platformBrowserDynamic } from 'assets/scripts/node_modules/@angular/platform-browser-dynamic';
import { AppModule } from ''app.module';
const platform = platformBrowserDynamic();

Thank you in advance!

Answer Source

the problem is changed file structure(and some typos) which originally looks like

  • app
    • app.component.ts
    • app.module.ts
    • main.ts
  • node_modules ...
  • typings ...
  • index.html
  • package.json
  • styles.css
  • systemjs.config.js
  • tsconfig.json
  • typings.json

you must move all angular project files to your scripts dir then if your are using php (which you are) you don't need to run lite server so run npm run tsc:w instead of npm start to watch files by typescript and compile it when something has changed

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download