Angular 2 Typescript System.Src transpiler to work with gulptask

Question

I am new to typescript and Angular2 but ...

My setup is as follows:

Instead of an app-folder at the site-root i have a src\app folder then in my gulp task i compile my typescript like this:

gulp.task('copy:libs', ['clean'], function () {
return gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
        'node_modules/angular2/bundles/angular2-polyfills.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/angular2/bundles/angular2.dev.js'
    ])
    .pipe(gulp.dest(destination + '/js'));

});

with destination:

const destination = './UI/assets';

fine so far but now comes the tricky part:

in my destination + /app folder i get the compiled javascript files but when using them in my index.html file:

<script>
    System.config({
        paths: {
            'app/*': '/UI/assets/app/*'
        },
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main.js')
        .then(null, console.error.bind(console));
</script>

But the system src gets an 404 inside main.js on my app.component which is registered like this in typescript:

import { AppComponent } from './app.component';

if i change to ./app.component.js inside the compiled app.component.js-file this is working but how do i solve this the right way!?

My tsconfig is copied directly from angular 2 getting started.

How should my systemjs module be configured to work? Now it doesnt find any js-files..

dotnet-provoke · Accepted Answer · 2016-04-19 14:20:20Z

0

I fixed this. It was mainly the baseURL that i was missing:

<script>
        System.config({
            baseURL : '/node_modules'
        });
        System.defaultJSExtensions = true;

        System.import('app/main.js')
            .then(null, console.error.bind(console));
    </script>

answered Apr 19, 2016 at 14:20

dotnet-provoke

1,64817 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 Typescript System.Src transpiler to work with gulptask

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related