CODEWITHSUNDEEP
typescriptangularsystemjs
DRobertE
DRobertE

Reputation: 3508

Different loading behavior based solely on location of app.ts file

This one works! Call it APP01

enter image description here

This one doesn't work! APP02

enter image description here

Contents on the app.ts file doesn't change between the two file systems

app.ts

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

@Component({
    selector: "my-app",
    template: '<h1>My First Angular 2 App</h1>'
})

export class TodoAppComponent {}

bootstrap(TodoAppComponent);

index.html APP01

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            //typescriptOptions: { emitDecoratorMetadata: true },
            packages: { app: { defaultExtension: 'js' } }
        });

        System.import('app/app');
    </script>
</head>
<body>
    <my-app></my-app>

</body>
</html>

APP02

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
    <meta charset="utf-8"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.2/angular2.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            //typescriptOptions: { emitDecoratorMetadata: true },
            packages: { defaultExtension: 'js' }  <-- THIS CHANGED
        });

        System.import('app');  <-- THIS CHANGED
    </script>
</head>
<body>
    <my-app></my-app>

</body>
</html>

So between the two in APP02 the location of app.ts is at the root instead of in the app folder and the contents of the index.html the System.import changed from "app/app" and the packages property in the System.config. Yet the APP02 on startup can't find teh application. I get a error in the console of the web browser as follows.

enter image description here

Why does one work and the other doesn't when the only thing that changed was the location of the app.ts file. The System.import tells the app where to find the main application where it bootstraps but it can't seem to find it in the second case it ONLY works when I put the app.ts file in the appfolder and change the System.import lines to app/app and change the packages node in the config to tell the config there is an app folder.

Upvotes: 0

Views: 124

Answers (1)

SnareChops
SnareChops

Reputation: 13347

Your import call should be to 

System.import('app.js').then(void 0, console.error.bind(console));

(Added the console.error in error handler for better error catching)

The initial .js file import should include the extension, after that system will take over.

The APP01 version worked because of the

packages: { app: { defaultExtension: 'js' } }

which meant, everything in the folder app should be a .js file.

My assumption would be that the rest of your application will be in the app folder, so I would recommend that you keep this line as is.

By using

packages: { defaultExtension: 'js' }

You were actually telling System to look for a defaultExtension package.

Upvotes: 1

Related Questions