Angular-cli: 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 [email protected]

[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).

[avuletica]

@GabrielSimonMarian Can't tell more without looking at code but you could revert to latest stable configuration (branching) and add that component step by step and see where it breaks

[rahulsivalenka]

Deleting the .js and .js.map files from the serving directory and setting compileOnSave: false in tsconfig.json solved the problem for me

[loumorgsy]

adding

moduleId: module.id

in the component decorator worked for me

[saaammmmm]

moduleId: module.id worked for me

[joe223]

Same error. It works if I use app/dashboard.component.html

[rameshpraja]

Same Error : Its work if we start the path from app directory.
for example :
templateUrl: './app/reactive/hero-form-reactive.component.html'

[sanaattar]

how module:module.id this thing fix issue? Can anybody explain plz
Need to understand logic

[Codefans-fan]

https://stackoverflow.com/questions/39503805/zone-js344-unhandled-promise-rejection-failed-to-load-app-template-html-in-ang

[sunkarashruthi]

@rameshpraja :
I get 404: angular2.dev.js:20736 GET http://localhost:3000/app/contact-form.component.html 404 (Not Found)
even if i give the path from app directory.

@loumorgsy y should we give moduleId: module.id

when i gave it says cannot find module.

Pl let me know. TIA

[broni0]

templateUrl: './menu.component.html'

to

templateUrl: require('./menu.component.html')

works fine for me..

[TomasKatz]

Had the same problem.
Deleting all .map .js files from components/modules/services resolved this issue. Now I have to figure out why the build causes this and how to resolve it.
If anyone has any info on how I solve this by configurations in webpack.common/webpack.config please notify me.

[nombrekeff]

Deleting the .js and .js.map files from the serving directory and setting compileOnSave: false in tsconfig.json solved the problem for me

Yup, this also worked for me, thanks!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}