Can't load app.component.html with relative path

[richavyas]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Mac OSX (Yosemite)
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.14
   node: 6.1.0
   os: darwin x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   This app ran successfully with the latest webpack/angular-cli@latest but it's not loading app.component.html with relative path.

source code:

app.component.ts

   styleUrls: ['./app.component.scss'],
   templateUrl: './app.component.html',

Error:

zone.js:1241GET http://localhost:4200/app.component.html 404 (Not Found) zone.js:344 Unhandled Promise rejection: Failed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html undefined

Setup info:

Router : upgraded to rc.7
Webpack: "2.1.0-beta.22"
angular-cli@latest

1. The log given by the failure. Normally this include a stack trace and some
   more information.
   No error while ng build or serve. Build happens successfully but this does not load files with relative path.
2. Mention any other details that might be useful.
   Things work upto certain extent when used complete folder structure like app/app/component.html or app/components/...

---

Thanks! We'll be in touch soon.

[richavyas]

Closing this as everything started working with angular-cli@1.0.0-beta.15

[TeodorKolev]

Same here

[richavyas]

@TeodorKolev same here in what terms? Just in case, if you are still facing relative path issue, please match the options in src/tsconfig.json with https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14#steps-to-migrate src.webpacktemplate/tsconfig.json

[TeodorKolev]

I gotFailed to load app.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load app.component.html from this tutorial. My repo: repo

[dokkis]

@richavyas @TeodorKolev same here!

https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html says that you can do it by add to Component moduleId: module.id. But for webpack they says "Webpack users may prefer an alternative approach (https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html#!#webpack)".

The angular2-template-loader should do the trick but it seems that it's not working. I'll investigate and I let you know if I am able to fix that.

EDIT:
I trace the issue by starting to "debug" angular2-template-loader with console log adding:
console.log("+++++++"+source); just after the function definition.
By doing it I saw that not all the ts file were processed and in particular app.component.ts.

Then I saw in the src folder .js and .map files, so I deleted it and added in the tsconfig.json those properties after compilerOptions (outside it):
"compileOnSave": false,
"buildOnSave": false

Run again npm start and now the application loads successfully.

@TeodorKolev: I cloned your repo, npm install and npm start and replicated the error.
I deleted the .js and .map files created, then added the properties and then npm start again and now it's working.

[talhaamin]

add module:module.id as a first line in @component directive.

[elebumm]

Was also having this problem and @talhaamin's solution worked for me. Thank you.

[iamsarav]

Even with module:module.id i am getting the same error.
Can some one explain me how is this relative path works, and from where the relative path starts basically?

[avuletica]

Changing from module:module.id to moduleId: module.id worked for me.

[GabrielSimonMarian]

adding module:module.id does not work for me also.
i've tried to apply @dokkis solution, but i do not found .map and .js files under src, in order to delete them
.
@dokkis, can you provide here more help, please ?
thanks

[avuletica]

Did you try my solution with moduleId: module.id as you can see

[GabrielSimonMarian]

Hi @avuletica,

I've tried also your solution, but if I understood correctly, as long as I have in my project webpack, this solution won't work.

The interesting fact, is that my configuration has previously worked well.

[avuletica]

@GabrielSimonMarian you are right, it seems If you are using webpack for bundling then you don't need module.id in decorator. Webpack plugins auto handle (add it) module.id in final bundle, did you check on angular official site:

[GabrielSimonMarian]

Nope, does not works at all, the error is still there.

Should the taken into consideration the fact, that I do no use angular-cli ? (the project was implemented without angular-cli, but as I said previously has worked well).