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”
当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 { }