XHR错误(404未找到)正在加载http://localhost:3000/traceur [英] XHR error (404 Not Found) loading http://localhost:3000/traceur
本文介绍了XHR错误(404未找到)正在加载http://localhost:3000/traceur的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我尝试在代码中使用Angular Material时出现以下错误.
I'm getting following error when I'm trying to use Angular Material in the code.
zone.js:101 GET http://localhost:3000/traceur 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(anonymous function) @ zone.js:122send @ VM437:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
login:15 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30)
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34)
Error loading http://localhost:3000/traceur
Error loading http://localhost:3000/node_modules/@angular2-material/button/button.js as "@angular2-material/button" from http://localhost:3000/app/assets/js/app.module.js(anonymous function) @ login:15ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(anonymous function) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
下面是代码:
app.component.ts:
Below is the code:
app.component.ts:
import { Component, ViewEncapsulation } from '@angular/core';
import { MdButton } from '@angular2-material/button';
@Component({
selector: 'myApp',
templateUrl: './app/app.html',
styleUrls: ['./app/app.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
app.module.ts:
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdButtonModule } from '@angular2-material/button';
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { HomeModule } from './home/home.module';
import { ItemsModule } from './items/items.module';
import { MoviesModule } from './movies/movies.module';
@NgModule({
imports: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, routing, LoginModule, HomeModule, ItemsModule, MoviesModule ],
declarations: [ AppComponent ],
providers: [ appRoutingProviders ],
bootstrap: [ AppComponent ],
})
export class AppModule {}
app.routing.ts:
app.routing.ts:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [];
export const appRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
main.ts:
main.ts:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
system.config.js:
system.config.js:
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@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',
'@angular2-material': 'npm:@angular2-material',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
main: 'main.js',
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
'@angular2-material/core': {
main: 'core.js',
defaultExtension: 'js'
},
'@angular2-material/button': {
main: 'button.js',
defaultExtension: 'js'
},
'@angular2-material/card': {
main: 'card.js',
defaultExtension: 'js'
}
}
});
})(this);
在"app.module.ts"的导入列表中添加MdButtonModule后，我开始收到错误消息.
As soon as I add MdButtonModule in imports list of "app.module.ts", I start getting the error.
推荐答案
更新2.0.0-alpha.9 cobalt-kraken(2016-09-26)
Angular Material已从@ angular2-material/...包更改为 @ angular/material下的单个包装
Angular Material has changed from @angular2-material/... packages to a single package under @angular/material
因此您的配置可能如下所示:
So your config might look like:
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@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/material': 'npm:@angular/material/bundles/material.umd.js', <== this line
...
},
...
});
})(this);
并像
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [ BrowserModule, MaterialModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
旧版本
从 angular2-material alpha 8 开始，您需要使用以下配置:
Starting with angular2-material alpha 8 you need to use the following configuration:
materialPackages.forEach(name => {
packages[`@angular2-material/${name}`] = {
format: 'cjs',
main: `${name}.umd.js`
};
});
另请参阅变更日志
全部:我们已经更新了包装，以匹配角度/角度的包装. 如果您在项目中使用SystemJS，则可能需要 切换到使用我们的UMD捆绑包
all: we've updated our packaging to match angular/angular's packaging. If you're using SystemJS in your project, you will probably want to switch to using our UMD bundles
所以您必须更改
system.config.js
packages: {
...
'@angular2-material/core': {
format: 'cjs',
main: 'core.umd.js'
},
'@angular2-material/button': {
format: 'cjs',
main: 'button.umd.js'
},
'@angular2-material/card': {
format: 'cjs',
main: 'card.umd.js'
},
...
这篇关于XHR错误(404未找到)正在加载http://localhost:3000/traceur的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
