How to detect templates in angular 2 after file separation?

Question

I am trying to learn how to start project in Angular 2 as so far got to second issue: After following this article I separated .ts from .js:

app: 'temp'  - in systemjs.config.js
"outDir": "temp"  -  in tsconfig.json

And of course I got to the issue, when If I'm creating files for template or style (in app folder),they are not visible because there are not in the same folder as .js files.

For example:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent  { name = 'World'; }

I am receiving error: Unhandled Promise rejection: Failed to load app.component.html

And if I'm adding moduleId: module.id I get Unhandled Promise rejection: Failed to load http://localhost:3000/temp/app.component.html

I saw that it is possible to achieve if I add .replace to module.id, but this is not what I want (if possible, I'd wanted to not use moduleId at all). If possible, I'd like to not use grunt either (at this moment at least) (tried its copy functionality but it does not catch updates while npm start is running)

It seems super strange to me that by just wanting to separate .ts from compiled files gives so much trouble with anything that is not .ts files.

Is there a simple way to work with .html (or .css/.scss in case of style) in case if there are stored in different directories (not the same as where compiled .js are) ?

I am super newbie speaking about angular and npm stuff, so... sorry, I might simply not understand what are we are talking about. What is webpack? — Olegs Jasjko
– Olegs Jasjko, Commented Jan 12, 2017 at 9:37
Webpack is a tool like Gulp .. try this in your Angular 2 component.. instead of templateUrl: './app.component.html', ..TRY template: require('./app.component.html') — federico scamuzzi
– federico scamuzzi, Commented Jan 12, 2017 at 9:38
@OlegsJasjko Webpack is a tool, like angularcli that helps you to build your application. Reload time using webpack incremental build is ~1s for small application, while angularcli takes too long. You should check it out, though for new person webpack configuration may be hard to grasp, but hey - I did it, that means that you can do it too :) — charlie_pl
– charlie_pl, Commented Jan 12, 2017 at 9:40
hm... is there any simple example of its configuration and usage? — Olegs Jasjko
– Olegs Jasjko, Commented Jan 12, 2017 at 9:48

Vincent Aige · Accepted Answer · 2017-01-23 16:10:18Z

0

Instead of templateUrl: './app.component.html'

try template: require('./app.component.html')

In Angular2 you don't need to deal with js files if you use Webpack. If you want to create a fast project to learn about it, try AngularCLI.

edited Jan 23, 2017 at 16:10

answered Jan 12, 2017 at 13:08

Vincent Aige

614 bronze badges

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

1 Comment

Olegs Jasjko Over a year ago

Does it need some additional configuration changes?

Collectives™ on Stack Overflow

How to detect templates in angular 2 after file separation?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related