CODEWITHSUNDEEP
angularjs
Shawn
Shawn

Reputation: 5260

angular 2 does not transpile typescript component other than app folder

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?

Upvotes: 0

Views: 828

Answers (1)

Pratik Kelwalkar
Pratik Kelwalkar

Reputation: 1632

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.

Upvotes: 2

Related Questions