My app is structure like so:
app
- assets
- src
-- autogenerated
-- components
---- app
---- tabs
The "autogenerated" folder contains the compiled javascript files generated from typescript using the same directory structure from the components folder. I use gulp-tsc to create it. (I'll eventually rename this to "build")
app, and tabs are components... app being the top level component.
In app.ts (in app/components/app) is:
import {Component, bootstrap} from 'angular2/angular2';
import {Tabs} from '../Tabs/tabs';
@Component({
selector: 'my-app',
templateUrl: 'src/components/app/app.html',
directives: [Tabs]
})
class AppComponent { }
bootstrap(AppComponent);
When this compiles, the generated js file has this:
var tabs_1 = require('../Tabs/tabs');
which does not resolve and results in a 404 since it has no .js extension when being loaded by the browser.
Edit... just realized that "require" is from nodejs, not systemjs... still not sure how to proceed.
** Edit 2 ** The gulp task:
gulp.task('compile', function() {
// compile sass to css
gulp.src('./app/assets/sass/*.scss')
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./app/assets/css'));
// compile typescript
// this ignores tsconfig.json, but ideally configuration in both places should match
gulp.src(['./app/src/**/*.ts'])
.pipe(typescript({ target: "ES5",
experimentalDecorators: true,
sourceMap: true,
emitDecoratorMetadata: true }))
.pipe(gulp.dest('./app/src/autogenerated/'));
});
The gulp task shouldn't be using the tsconfig.json... I added it to remove the error in visual studio code.... but here's whats in the tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
index.html code:
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="../../node_modules/systemjs/dist/system.src.js"></script>
<script src="../../node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
packages: {'app': {
defaultExtension: 'js'}
}
});
System.import('../src/components/app/app.js');
</script>
</head>
<body>
<my-app>Loading... please wait</my-app>
</body>
</html>
