angular – XHR错误(404 Not Found)加载http:// localhost:300
当我在代码中尝试使用Angular Material时,我遇到了以下错误.
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 以下是代码: 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: 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: 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: import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 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','angular2-in-memory-web-api': { main: './index.js','@angular2-material/core': { main: 'core.js','@angular2-material/button': { main: 'button.js','@angular2-material/card': { main: 'card.js',defaultExtension: 'js' } } }); })(this); 一旦我在“app.module.ts”的导入列表中添加MdButtonModule,我就开始收到错误.
更新2.0.0-alpha.9 cobalt-kraken(2016-09-26)
所以您的配置可能如下所示: (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/material': 'npm:@angular/material/bundles/material.umd.js',<== this line ... },... }); })(this); 并使用它 import { MaterialModule } from '@angular/material'; @NgModule({ imports: [ BrowserModule,MaterialModule ],bootstrap: [ AppComponent ] }) export class AppModule { } 旧版 从angular2-material alpha 8开始,您需要使用以下配置: materialPackages.forEach(name => { packages[`@angular2-material/${name}`] = { format: 'cjs',main: `${name}.umd.js` }; }); 另请参见更改日志 > https://github.com/angular/material2/blob/master/CHANGELOG.md
所以你必须改变你的 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' },... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |