I'm having quite a bit of trouble with my angular2 app.
I have a very simple mvc app(I am using asp.net).
However, I am getting a When I am trying to use a template inside my innertest component my app fails to load with the following message.
Innercomponent code`import { Component } from '@angular/core';
@Component({
selector: 'test',
template: require('./innerhome.component.html')
})
export class InnerTestComponent {
name = '';
}
`
And the message is Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:2802/app/components/content/innerhome.component.html.js
Error: XHR error (404 Not Found) loading http://localhost:2802/app/components/content/innerhome.component.html.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:2802/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:2802/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:2802/app/components/content/innerhome.component.html.js as "./innerhome.component.html" from http://localhost:2802/app/components/content/innertest.component.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:2802/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost:2802/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:2802/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:2802/app/components/content/innerhome.component.html.js as "./innerhome.component.html" from http://localhost:2802/app/components/content/innertest.component.js
My systemjs.config.js file is
(function (global) {
System.config({
paths: {
// псевдоним для пути к модулям
'npm:': 'node_modules/'
},
// указываем загрузчику System, где искать модули
map: {
// наше приложение будет находиться в папке app
app: 'app',
// пакеты angular
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// остальные пакеты
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// пакеты, которые указывают загрузчику System, как загружать файлы без имени и расширения
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
I do not understand the cause of this issue.
Please advise.
In the decorator, you should use templateUrl instead of template. As long as the file you are referring to is in the same folder, you should only use filename, not path:
templateUrl: 'innerhome.component.html'
Every time you point to another file in the component decorator, you also need to include:
moduleId: module.id,
And make sure you have InnerTestComponent in your app.module declarations.
The entire component would then look like this:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'test',
templateUrl: 'innerhome.component.html'
})
export class InnerTestComponent {
name = '';
}