Question

我的应用程序是这样的结构：

app
- assets
- src
-- autogenerated
-- components
---- app
---- tabs

“autogenerated”文件夹包含使用与components文件夹中相同的目录结构从typescript生成的已编译javascript文件。我用gulp-tsc来创建它。（我最终会将其重命名为“build”）

app，标签是组件......应用程序是顶级组件。

在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');

由于浏览器加载时没有.js扩展名，因此无法解析并导致404.

编辑... 刚刚意识到“require”来自nodejs，而不是systemjs ...仍然不确定如何继续。

**编辑2 ** gulp任务：

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>

Answer 1

使用tsconfig.json，这是配置TypeScript编译器的最佳方式，它由TypeScript团队维护。不需要一些gulp任务来理解什么是打字稿。只需在命令行中运行'tsc'（让gulp运行'exec'）。
如果你将模块编译成commonjs，（那是完全有效的）你应该有一些方法在浏览器中加载commonjs模块。 SystemJS（与angular2一样使用）是目前最好的模块加载器。因此，只需为您的应用创建一个SystemJs配置文件并导入该应用程序。

Answer 2

安装了TypeScript的Visual Studio会忽略您的tsconfig文件。

在TypeScript Build下的项目属性中，将Module系统设置为＆＃34; System＆＃34;

您必须通过在PropertyGroup下添加以下行来手动更改项目文件：

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>

Angularjs 2＆amp;打字稿导入问题（systemjs？）

2 个答案: