Ich versuche, das Angular 4-Projekt einer anderen Person zu öffnen, zu erstellen und auszuführen, aber ich kann das Projekt nicht anzeigen, wenn ich es auf meine Weise leite. Ich sehe nicht, was schief läuft oder was ich jetzt tun sollte. Ich hatte bereits alles vorhanden, um NPM und NodeJS zu verwenden
Die Schritte, die ich unternahm, waren:
Das Projekt kompiliert den richtigen Weg. (Ich habe eine eigene Angular-App und weiß, wie das aussieht.) Die Konsole zeigt:
'** NG Live Development Server hört auf localhost: 4200, öffnen Sie Ihren Browser unter http: // localhost: 4200 **'.
Als ich dann einen Webbrowser öffnete, navigierte ich zu localhost: 4200 und eine Webseite mit dem folgenden Text wurden angezeigt:
'Kann nicht bekommen /'
Und auf der Konsole stand folgender Text:
"GET http: // localhost: 4200/ 404 (nicht gefunden)"
Das Projekt sollte gut funktionieren, aber ich kann nicht zu einer funktionierenden URL auf der Webseite navigieren. Routing ist anders eingerichtet, da ich es gewohnt bin. In app.module.ts ist Folgendes implementiert:
app.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: 'tree', pathMatch: 'full' },
{ path: 'admin', component: AdminPanelComponent, canActivate: [AuthGuard],
children: [{path:'', component: PanelComponent},{path: 'add', component:
AddTreeComponent}, {path:'manage-trees', component:ManageTreesComponent},
{path:'manage-users', component: ManageUsersComponent}, {path:'view-trees',
component: ViewTreeComponent}]},
{path:'tree', component: TreeComponent},
{path:'error', component: ErrorComponent},
{path:'unauthorized', component: UnauthorizedComponent},
{path:'login', component: LoginComponent},
{path:'entire-tree', component: EntireTreeComponent},
{ path: '**', component: PageNotFoundComponent },
];
Öffnen Sie auch eine Webseite wie; localhost: 4200/tree funktioniert nicht. Wenn ich die Einstellung der Webseite durch Angle aufhören lasse, wird auf der Webseite angezeigt: "Diese Seite ist nicht erreichbar". Ich glaube, bei localhost läuft etwas: 4200 ... Auch ein anderes Projekt dieser Person verhält sich genauso .
Weiß jemand, was los ist?
EDIT
app.module.ts
RouterModule.forRoot(appRoutes, { useHash: true })
Package.json
{
"name": "xxx",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular-oauth2-oidc": "^1.0.20",
"angular-polyfills": "^1.0.1",
"angular2-jwt": "^0.2.3",
"angular2-spinner": "^1.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"ngx-bootstrap": "^1.8.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.4",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^1.2.1",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"TypeScript": "~2.3.3"
}
}
Neben dem Tabellennamen wird ein Symbol mit der Bezeichnung "Fehler" angezeigt.
ÜBERWACHUNG:
Neue Beobachtung:
Nachdem ich npm install -g angular-cli
ausgeführt habe, konnte ich ng serve
nicht ausführen. (Sie müssen sich in einem angle-cli-Projekt befinden, um den build-Befehl nach der Neuinstallation von angle-cli verwenden zu können.)
Dann lief ich npm install -g @angular/[email protected]
und konnte ng serve
wieder verwenden.
BEOBACHTUNG 2:
Nach dem Erstellen der App mit: 'ng build ...' befindet sich im Ordner 'dist' keine index.html ... Wenn ich die Website online stelle, gibt es nur eine Ordnerstruktur anstelle einer Nice-Website. Ich denke das liegt daran, dass es keine index.html gibt.
Das Problem war, dass ich die Befehle im Ordner /project/src/app
ausgeführt habe. Das Navigieren zurück zum Projektordner, also zu /project
, und Ausführen von ng serve
von dort aus löste mein Problem.
Für mich war es auch ein Problem mit dem Pfad, aber ich hatte Prozentzeichen im Stammordner.
Nachdem ich% 20 durch Leerzeichen ersetzt habe, fing es an zu arbeiten :)
Ich hatte denselben Fehler, der durch Build-Fehler verursacht wurde. Ich habe ng build im Verzeichnis meiner Anwendung ausgeführt, wodurch ich meine Fehler korrigieren konnte
Ich habe export class TestCalendar implements OnInit{}
verwendet, aber ich habe die Funktion nicht geschrieben
ngOnInit() {
/* Display initial */
}
. Nachdem ich den Befehl ng serve
ausgeführt hatte, stellte ich fest, dass ich ngOnInit(){}
nicht verwendete. Nach der Implementierung funktionierte es einwandfrei. Hoffe es hilft jemandem.
Ich hatte das gleiche Problem mit einer Angular 6+ App und ASP.NET Core 2.0
Ich hatte gerade versucht, die Angular-App von CSS zu SCSS zu ändern.
Meine Lösung bestand darin, zum Ordner src/angularApp
zu gehen und ng serve
auszuführen. Dies half mir zu erkennen, dass ich die src/styles.css
-Datei nicht in src/styles.scss
geändert hatte
Prüfen Sie, ob in index.html
base eingestellt ist
<head>
<base href="/">
...
</head>
Ich bezog mich auf einen meiner Anbieter mit zwei verschiedenen Gehäusen. Einer von ihnen war falsch, aber nur der Webpack-Compiler beschwerte sich. Ich musste in den ClientApp-Ordner springen und ng build oder ng serv verwenden, um die Fehler anzuzeigen. (ASP.NET Core SPA mit Angular 5)
Finden Sie einfach den Grund heraus, wenn wir IN UNSEREM PROJEKT "ng serve" eingeben.
zum Beispiel C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
modul C:\Users\EdgeTech1\Desktop\C
konnte nicht aufgelöst werden
Ergebnisse: failed compiled
ursache:
Mein Ordnername war C# Project..
Hinweis: Ich habe versucht, den #
In meinem Projektnamen zu entfernen. Stattdessen habe ich C# Project
In CSharp
umbenannt und versucht, cmd
zu öffnen gleiche Sache..
zum Beispiel:
C:\Users\EdgeTech1\Desktop\CSharp\WebAPI\MyProject>ng serve
und mein Projekt wurde erfolgreich kompiliert. Vermeiden Sie so weit wie möglich ASCII Zeichen beim Benennen von Projektdateien.
Siehe diese Antwort hier . Sie müssen alle Routen umleiten, die Node nicht zu Angular verwenden:
app.get('*', function(req, res) {
res.sendfile('./server/views/index.html')
})
Im Allgemeinen handelt es sich um ein Versionsproblem. Node.js v8 kann nicht mit Angular-Cli 6.0 oder höher kompiliert werden. AngularCli v6 und höher funktioniert für die neuesten Knotenversionen. Bitte stellen Sie sicher, dass Sie Angular-Cli bis 1.7.4 installieren müssen, wenn Ihre Knotenversion v8 ist. Geben Sie den Befehl ng -v in cmd ein und überprüfen Sie die CLI- und Node-Versionen.