Мое приложение имеет такую структуру:
app
- assets
- src
-- autogenerated
-- components
---- app
---- tabs
Папка «autogenerated» содержит скомпилированные файлы javascript, сгенерированные из машинописного текста с использованием той же структуры каталогов, что и в папке компонентов. Я использую gulp-tsc для его создания. (со временем я переименую это в «сборка»)
приложение, а вкладки - это компоненты... приложение является компонентом верхнего уровня.
В app.ts (в app/components/app) есть:
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);
Когда это компилируется, сгенерированный файл js имеет следующее:
var tabs_1 = require('../Tabs/tabs');
который не разрешается и приводит к ошибке 404, поскольку он не имеет расширения .js при загрузке браузером.
Редактировать... только что понял, что "требуется" от nodejs, а не от systemjs... все еще не уверен, что делать дальше.
** Редактировать 2 ** Задача глотка:
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/'));
});
Задача gulp не должна использовать tsconfig.json... Я добавил ее, чтобы удалить ошибку в коде Visual Studio.... но вот что в tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
index.html код:
<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>
