angular 2 does not transpile typescript component other than app folder

Question

I tried the ToH at https://angular.io/docs/ts/latest/tutorial/toh-pt5.html and it worked fine.

Then I created a new folder named services. The services folder is parallel to app folder. So I moved the service components into the services folder.

Next I changed the import to

import { Component, OnInit } from 'angular2/core';
import { Router } from 'angular2/router';

import { Hero } from '../services/hero';
import { HeroService } from '../services/hero.service';

The transpiled js file gave this

System.register(['angular2/core', 'angular2/router', '../services/hero.service']

It looks the '../services/hero' is missing from the array. The browser gave this error "GET http://localhost:3000/services/hero.service 404 (Not Found)".

The watch console log showed this

[1] [BS] File changed: services\hero.js
[0] 2:04:14 AM - Compilation complete. Watching for file changes.
[1] [BS] File changed: services\mock-heroes.js
[1] [BS] File changed: services\hero.service.js
[1] [BS] File changed: app\hero-detail.component.js
[1] [BS] File changed: app\heroes.component.js
[1] [BS] File changed: app\dashboard.component.js
[1] [BS] File changed: app\app.component.js
[1] [BS] File changed: app\app.component_1.js
[1] [BS] File changed: app\main.js
[1] 16.04.15 02:04:15 304 GET /index.html
[1] 16.04.15 02:04:15 200 GET /index.html
[1] 16.04.15 02:04:15 304 GET /public/css/styles.css
[1] 16.04.15 02:04:18 200 GET /app/main.js
[1] 16.04.15 02:04:18 304 GET /favicon.ico
[1] 16.04.15 02:04:18 200 GET /app/app.component.js
[1] 16.04.15 02:04:18 404 GET /services/hero.service
[1] 16.04.15 02:04:18 200 GET /app/heroes.component.js
[1] 16.04.15 02:04:18 200 GET /app/dashboard.component.js
[1] 16.04.15 02:04:18 200 GET /app/hero-detail.component.js
[1] 16.04.15 02:04:18 200 GET /app/main.js.map
[1] 16.04.15 02:04:18 200 GET /app/app.component.js.map
[1] 16.04.15 02:04:18 404 GET /services/hero.service
[1] 16.04.15 02:04:18 304 GET /app/hero-detail.component.js
[1] 16.04.15 02:04:18 200 GET /app/heroes.component.js.map
[1] 16.04.15 02:04:18 200 GET /app/dashboard.component.js.map
[1] 16.04.15 02:04:18 404 GET /services/hero
[1] 16.04.15 02:04:18 200 GET /app/hero-detail.component.js.map

As shown above the "GET /services/hero" and "/services/hero.service" do not contain file extension like others do.

What do I need to adjust to fix this thing?

Its a bit confusing, are you saying the example isn't running? — Pratik Kelwalkar
– Pratik Kelwalkar, Commented Apr 15, 2016 at 8:47

Pratik Kelwalkar · Accepted Answer · 2016-04-15 08:51:11Z

2

Ok i think i got what the problem is here, edit the index.html and do the following

<script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'},
                'services': {defaultExtension: 'ts'}
             }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

Explanation : Since previously the service component was inside the app folder the config had mentioned the default extension. But since you moved into a parallel folder now its folder default extension is missing since you dont type the '.ts' wherever you use.

answered Apr 15, 2016 at 8:51

Pratik Kelwalkar

1,6322 gold badges16 silver badges21 bronze badges

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

3 Comments

Shawn Over a year ago

Pratik, Thanks a lot for pointing out the missing and good explanation. Now the app can see the services folder. But not it emits a new error [1] 16.04.15 08:43:01 404 GET /traceur. I didn't see "traceur" anywhere in ts code. Any idea?

Shawn Over a year ago

Never mind. if I change the defaultExtension to 'js' it will work. I appreciate your help.

Pratik Kelwalkar Over a year ago

i too had faced this wierd problem, suddenly on a new day all my angular2 projects started throwing the traceur error, it was really bugging me and after lot of digging i came out with nothing, what i did was use the latest typescript.js and system.js files. Only thing i observed that traceur was throwing after chrome had updated....

Collectives™ on Stack Overflow

angular 2 does not transpile typescript component other than app folder

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related