Angular2快速入门 – “无法获取”消息

我一直在尝试为Angular2做快速入门指南。 我按照快速指南中的说明做了例子。 但是,当我运行它时,它显示以下消息“无法获取”。 有谁知道这是为什么发生?

boot.js文件

// JavaScript source code (function (app) { document.addEventListener('DOMContentLoaded', function () { ng.platform.browser.bootstrap(app.AppComponent); }); })(window.app || (window.app = {})); 

app.component.js文件

 (function (app) { app.AppComponent = ng.core.Component({ Selector: 'my-app', template: '<h1>My First Angular 2 App </h1>' }) .class({ constructor: function () { } }); })(window.app || window.app == {}); 

索引文件

 <html> <head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script> <!-- 2. Load our 'modules' --> <script src='app/app.component.js'></script> <script src='app/boot.js'></script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> 

最后是package.json文件

 { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.0", "systemjs": "0.19.6", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "zone.js": "0.5.10" }, "devDependencies": { "lite-server": "^1.3.1" } } 

我跑了打开浏览器并显示“无法获取”的行“npm start”

       

网上收集的解决方案 "Angular2快速入门 – “无法获取”消息"

当index.html不在正确的文件夹中时,我得到这个错误。

如果是这种情况,把它放在主要的angular度项目的根文件夹应该解决错误。

背景

我有同样的问题:每个Cannot GET / pagename上都Cannot GET / pagename 。 我search了互联网,但没有find像这样的解决scheme。

由于存储库名称中还包含空格,因此我的项目位于具有ASCII空格的文件夹内。

回答

项目所在的文件夹不应包含任何空格或ASCII字符“%20”。

在这里输入图像描述

在这个改变之后,我的项目没有给出Cannot GET / pagename错误。

我想清楚是什么问题。 我有一个额外的空间在我的HTML文件,这是造成错误。 我删除了额外的空间,并按预期工作。

我有同样的问题,因为我忘了添加我们可以在教程的“最终结构”部分中看到的bs-config.json文件。 它应该包含:

 { "server": { "baseDir": "src", "routes": { "/node_modules": "node_modules" } } } 

我有与Angular.io例子“minimal NgModule”相同的问题他们给我们的文件名额外的“0”的文件。 我通过将文件名“index.0.html”转换为“index.html”解决了这个问题,终于工作:)

你需要在'src'文件夹所在的位置运行'ng serve'命令。

如果您使用路由,请确保您有一个正确导入的组件指向“”(/路由)。

例如: { path: "", component: MyHomeComponent }

Angular 5安装中app.module.ts完整示例(与Angular +2相同)

 import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { HttpModule } from "@angular/http"; import { Routes, RouterModule } from "@angular/router"; import { AppComponent } from "./app.component"; import { CinemaService } from "./services/cinema.service"; import { MyHomeComponent } from "./components/my-home/my-home.component"; import { MyMovieComponent } from "./components/my-movie/my-movie.component"; const routes: Routes = [ { path: "", component: MyHomeComponent }, { path: "movie/:id", component: MyMovieComponent }, ]; @NgModule({ declarations: [ AppComponent, MyHomeComponent, MyMovieComponent ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes) ], providers: [CinemaService], bootstrap: [AppComponent] }) export class AppModule { }