0

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) ?

Community
  • 1
  • 1
Olegs Jasjko
  • 2,128
  • 6
  • 27
  • 47
  • are you use webpack also? – federico scamuzzi Jan 12 '17 at 09:34
  • 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 Jan 12 '17 at 09: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 Jan 12 '17 at 09: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 Jan 12 '17 at 09:40
  • hm... is there any simple example of its configuration and usage? – Olegs Jasjko Jan 12 '17 at 09:48

1 Answers1

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.

Vincent Aige
  • 61
  • 4