CODEWITHSUNDEEP
angulartypescriptsystemjs
Chris Klepeis
Chris Klepeis

Reputation: 10003

Angularjs 2 & Typescript import issue (systemjs?)

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/'));
});

enter image description here

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>

Upvotes: 0

Views: 2315

Answers (2)

Rob
Rob

Reputation: 2706

Visual Studio with TypeScript installed ignores your tsconfig file.

In you project properties under TypeScript Build set your Module system to "System"

You will have to manually change your project file by adding these lines under PropertyGroup:

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

Upvotes: 1

gilamran
gilamran

Reputation: 7294

  1. Use tsconfig.json, it's THE best way to configure your TypeScript compiler, and it is maintained by the TypeScript team. No need for some gulp tasks to understand what is typescript. Just run 'tsc' in the command line (Let gulp run 'exec').

  2. If you compile your modules into commonjs, (That's totally valid) you should have some way to load commonjs modules in the browser. And SystemJS (Same as angular2 is using) is currently the best module loader as of today. So, just create a SystemJs config file for your app and import the app.

Upvotes: 1

Related Questions