Я только начал работать с Angular в этом году, и, имея опыт разработки .NET, мой бэкэнд находится в ASP.NET Core.Шаблон Visual Studio 2017 (не VS Code) отлично работал для Angular 4, но у меня было много проблем с его публикацией.После этого я обновил npm до последней версии, но это привело к огромной цепочке ошибок, поэтому я решил создать новое решение с нуля, но шаблон, созданный для Angular 6, имеет совершенно другую структуру.Я вручную добавляю свои компоненты в новое решение, и хотя первый компонент работал просто отлично, всякий раз, когда я добавляю большинство моих старых компонентов в проект (и мне даже не нужно ссылаться на них в app.modules.ts), яПолучите следующий html при каждом запуске проекта:
<code><html lang="en"> == $0
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET / Консоль браузера просто говорит: Failed to load resource: the server responded with a status of 404 (Not Found).
У меня уже естьсложный компонент, который прекрасно работает, но как только я добавлю следующий компонент, я получу вышеупомянутую ошибку:
addframe.ts:
import { Component, OnInit, Inject, Injectable } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { AutoList } from '../types';
@Component({
selector: 'addframe',
template: require('./addframe.component.html')
})
@Injectable()
export class AddFrameComponent {
public frameAmount: number;
private http: Http;
private routeMethod: string = ''; // Value defined by ngModel in the html
private hasOverhang: boolean = false;
private rawType: string;
public frameList: AutoList.FrameList;
public displayName: string = '';
public overhang = 0;
public frameTypes = [
{ value: 'Door', display: 'Door', rawType: 'door' },
{ value: 'Window', display: 'Window', rawType: 'window' }
]
constructor(http: Http, @Inject('LOCALSTORAGE') private localStorage: any) {
this.http = http;
if (localStorage.getItem('frames') != undefined) {
this.frameList = new AutoList.FrameList(JSON.parse(localStorage.getItem('frames')));
this.displayName = " - " + this.frameList.Name;
}
else
this.frameList = new AutoList.FrameList('');
}
public addFrame(dimensionX: string, dimensionY: string, overhang: string, amount: string) {
if (this.routeMethod == '' || this.frameAmount <= 0) // Validates checkbox, attempts to validate Quantity
return;
var routePrefix = this.frameList.Style == 0 ? "AddClassic" : "AddStandard";
var route: string = '/api/addframe/' + routePrefix + this.routeMethod + '/';
var data: AutoList.HttpData;
data = new AutoList.HttpData(this.frameList.Frames, { X: +dimensionX, Y: +dimensionY, Z: 0 }, +amount, +overhang);
this.http.post(route, data).subscribe(result => {
this.frameList.Frames = result.json();
this.persistToLocalStorage();
});
}
public deleteFrame(frameId: number) {
var route = '/api/addframe/Delete';
var data = { Id: frameId };
this.http.post(route, data).subscribe(result => {
this.frameList = result.json();
this.persistToLocalStorage();
});
}
private persistToLocalStorage() {
localStorage.setItem('frames', JSON.stringify(this.frameList));
}
private frameSelected(rawType: string) {
this.rawType = rawType;
if (rawType == 'window')
this.hasOverhang = false;
}
private isOverhangEnabled() {
return this.rawType == 'door';
}
}
addframes.html:
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-3'>
<nav-menu></nav-menu>
</div>
<div class='col-sm-9 body-content'>
<h1>Add Frames {{displayName}}</h1>
<div>
Dimension X: <input type="text" [(ngModel)]="dimensionX" class="input-group" />
Dimension Y: <input type="text" [(ngModel)]="dimensionY" class="input-group" />
Quantity: <input type="text" [(ngModel)]="amount" class="input-group" />
</div>
<br />
<label>Frame Type</label>
<br />
<div *ngFor="let type of frameTypes">
<label>
<input type="radio" [(ngModel)]="routeMethod" [value]="type.value" (click)="frameSelected(type.rawType)" /> <!-- radio group bound by ngModel -->
{{ type.display }}
</label>
<br />
</div>
<div *ngIf="isOverhangEnabled()">
<br />
<label>
<input type="checkbox" [(ngModel)]="hasOverhang" [disabled]="!isOverhangEnabled()" /> <!-- no need for [disabled], it is just there to show how it's done -->
Has Overhang?
</label>
</div>
<div *ngIf="hasOverhang">
<!-- supposedly I shouldn't pick things by DOM ID, like I do here, I think -->
<!--Overhang: <input type="text" id="overhangInput" [(ngModel)]="overhangInput" />-->
Overhang: <input type="text" [(ngModel)]="overhang" />
</div>
<br />
<input type="button" value="Add Frame" (click)="addFrame(dimensionX, dimensionY, overhang, amount)" class="btn-primary" /> <!-- maybe I don't need these parameters -->
<br />
<br />
<br />
<table class="table table-bordered table-striped" width="400">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>X</th>
<th>Y</th>
<th>Parts</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let frame of frameList.Frames">
<td>{{ frame.Id }}</td>
<td>{{ frame.FrameName }}</td>
<td>{{ frame.InitialDimensions.X }}</td>
<td>{{ frame.InitialDimensions.Y }}</td>
<td>
<ul>
<li *ngFor="let part of frame.Parts">
<p>
Name: {{ part.PartName }} <br />
ID: {{ part.ItemNumber }} <br />
Length: {{ part.Length }}
</p>
</li>
</ul>
</td>
<td><a (click)="deleteFrame(frame.Id)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
app.modules.ts вообще не ссылается на AddFramesComponent, мне просто нужно переместить папку addframes в проект Angular 6, и она вылетает.Если я удаляю такую папку, она снова начинает работать.Просто для удовольствия, это мой package.json:
{
"name": "AutoListWeb",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --extract-css",
"build": "ng build --extract-css",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.0",
"@angular/router": "^5.2.0",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
},
"optionalDependencies": {
"node-sass": "^4.9.0"
}
}
, который был автоматически сгенерирован Visual Studio.Любая помощь приветствуется.
Редактировать: большинство других моих компонентов будут работать так же, как только я добавлю их в проект Angular 6.
Второе редактирование: не имеет значения, добавлю ли яДобавитьFramesComponent или нет в app.modules.ts, ошибка все та же.