angular-cli: Can't load app.component.html with relative path
Please provide us with the following information:
- OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Mac OSX (Yosemite)
- Versions. Please run
ng --version. If there’s nothing outputted, please run in a Terminal:node --versionand paste the result here: angular-cli: 1.0.0-beta.14 node: 6.1.0 os: darwin x64 - 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.htmlwith 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
- 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.
- Mention any other details that might be useful.
Things work upto certain extent when used complete folder structure like
app/app/component.htmlorapp/components/...
Thanks! We’ll be in touch soon.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 5
- Comments: 27
Changing from module:module.id to moduleId: module.id worked for me.
add module:module.id as a first line in @Component directive.
how module:module.id this thing fix issue? Can anybody explain plz Need to understand logic
@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.
to
works fine for me…
Same error. It works if I use
app/dashboard.component.htmlDeleting the .js and .js.map files from the serving directory and setting
compileOnSave: falsein tsconfig.json solved the problem for memoduleId: module.id worked for me
adding
moduleId: module.id
in the component decorator worked for me
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.
@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
https://stackoverflow.com/questions/39503805/zone-js344-unhandled-promise-rejection-failed-to-load-app-template-html-in-ang
Same Error : Its work if we start the path from app directory. for example : templateUrl: ‘./app/reactive/hero-form-reactive.component.html’
Did you try my solution with moduleId: module.id as you can see