基本上我已经提到Angular2快速入门教程创建了一个示例应用程序。为进一步挖掘我创建 ./服务/ dataService.ts
服务文件象下面这样。
进口{}注射从'angular2 /核心;@Injectable()出口类的DataService { 项目:数组<号取代; 构造函数(){ this.items = [1,2,3,4〕; } getItems(){ 返回this.items; }}
我OUTDIR:../的wwwroot /应用,
在 tsconfig
提到的选项,transpile app.ts
&安培; dataService.ts
下面的路径。
- wwwroot文件 |应用 | --app.js | --services | - dataService.js
MyAppComponent
进口{组件,景观,注入,forwardRef}从'angular2 /核心;进口{} NgFor从'angular2 /通用';从angular2 /平台/浏览器的进口{}引导;进口{}的DataService从'./services/dataService';@零件({ 选择:我的应用, 模板:` < DIV * ngFor =#项目项> {{项目}} < / DIV> ` 指令:[NgFor] 供应商:[DataService的]})出口类MyAppComponent { 项目:数组<号取代; 构造函数(服务:DataService的){ this.items = service.getItems(); }}引导(MyAppComponent)
code被没有错误编译,但在应用程序运行我 下面的错误,的http://本地主机:8413 /应用程序/服务/ DataService的
无法加载资源:服务器的状态为回应404(未找到)
我用低于code从 index.html的
加载页面上的应用程序文件。
System.config({包:{SRC:{defaultExtension:'JS'}}});System.import(应用程序/ app.js'),然后(NULL,console.error.bind(控制台))。
我的问题是我怎么能导入 dataService.js
,为什么是在一个地方给404错误还是它的存在?我研究了这个问题很多,但没有发现任何有用的。任何帮助将AP preciated。
修改
新增 .tsconfig
来直接拿到整顿的时候有问题。
{ compilerOptions:{ noImplicitAny:假的, noEmitOnError:真实, 模块:CommonJS的 removeComments:假的, sourceMap:真实, 目标:ES5 OUTDIR:../wwwroot/app, experimentalDecorators:真实, emitDecoratorMetadata:真 }, 排除:[ node_modules wwwroot的 ]}
解决方案
的问题是与系统配置
,previously我有低于code加载组件。
System.config({包:{SRC:{defaultExtension:'JS'}}});System.import(应用程序/ app.js'),然后(NULL,console.error.bind(控制台))。
基本上 System.config
设置告诉包
是属于的src
文件夹和文件 defaultExtension
是 JS
。所以我改变了我的包的
我有的src
到应用
为应用
文件夹,而不是的src
。
除此之外,我改变了 System.import(应用程序/ app.js')
到 System.import(应用程序/应用程序)
为文件的默认扩展名是 JS
,所以我不需要理会它。所以,我的组件加载脚本改为如下。
System.config({包:{应用程序:{defaultExtension:'JS'}}});System.import(应用程序/应用程序),然后(NULL,console.error.bind(控制台))。
Basically I have created a sample application by referring to Angular2 quickstart tutorial. For further digging I've created ./services/dataService.ts
service file like below.
import {Injectable} from 'angular2/core';
@Injectable()
export class DataService {
items: Array<number>;
constructor() {
this.items = [1, 2, 3, 4];
}
getItems() {
return this.items;
}
}
I had "outDir": "../wwwroot/app",
option mentioned in tsconfig
which transpile app.ts
& dataService.ts
to below path.
--wwwroot
|app
|--app.js
|--services
|-- dataService.js
MyAppComponent
import {Component, View, Inject, forwardRef} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';
import {DataService} from './services/dataService';
@Component({
'selector': 'my-app',
template: `
<div *ngFor="#item of items">
{{item}}
</div>
`,
directives: [NgFor],
providers: [DataService]
})
export class MyAppComponent {
items: Array<number>;
constructor(service: DataService) {
this.items = service.getItems();
}
}
bootstrap(MyAppComponent)
Code gets compiled with no-error, but after application Ran I got below error, http://localhost:8413/app/services/dataService.
Failed to load resource: the server responded with a status of 404 (Not Found)
I used below code from index.html
to load app files on page.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
My question is how could I import the dataService.js
, why does is give 404 error still its there in a place? I Researched alot on this problem, but didn't find anything helpful. Any help would appreciated.
Edit
Added .tsconfig
to directly get rectify when there is issue
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"module": "commonjs",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/app",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}
解决方案
The problem was with configuration of System
, previously I was having below code to load component.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
Basically System.config
settings tells that packages
would be belongs to src
folder and the files defaultExtension
is js
. So I changed my packages
's src
to app
as I was having app
folder, not src
.
Other than that I changed System.import('app/app.js')
to System.import('app/app')
as default extensions of files is js
, so I don't need to bother about it. So my component loading script changed to below.
System.config({ packages: { app: { defaultExtension: 'js' } } });
System.import('app/app').then(null, console.error.bind(console));