Я получил существующее решение в .NET Core MVC, которое я хотел использовать Angular в определенном виде, но не везде.
Поэтому я использовал командную строку для создания нового приложения Angular внутри решения в папке с именем Angular.
Структура:
SelfService (проект)
- Угловая
- src (все остальные угловые структуры здесь и на этом уровне)
- Просмотры
Имеется переключатель функций, позволяющий пилотам попробовать его.
Я использую функцию прокси, потому что сервер разработки Angular использует порт 4200, а порт моих приложений - порт 44323. Поэтому используйте прокси, чтобы исправить это на моем локальном компьютере.
Я настроил его, который очень хорошо работает при запуске сервера разработки и переходе к «http://localhost:4200",, но когда я захожу на / панель мониторинга в существующем решении, он загружает то же представление, но клики и обновления не работает. Просто ничего не делает
Startup.cs (часть)
public IServiceProvider ConfigureServices(IServiceCollection services)
{
// In production, the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "Angular/dist";
});
}
public void Configure
{
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Default}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "Angular";
if (env.IsDevelopment())
{
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
}
// Doesn't work so using a bat-file running ng serve and then works
//if (env.IsDevelopment())
//{
// spa.UseAngularCliServer(npmScript: "start");
//}
});
}
Dashboard.cshtml
@if (ViewBag.IsAngularDasboardFeaturesEnabled)
{
<app-root>app-root is loading ...</app-root>
}
.....
@section EndContent {
@if (ViewBag.IsAngularDasboardFeaturesEnabled)
{
@if (hostingEnv.IsDevelopment())
{
<script type="text/javascript" src="http://localhost:4200/runtime.js"></script>
<script type="text/javascript" src="http://localhost:4200/polyfills.js"></script>
<script type="text/javascript" src="http://localhost:4200/styles.js"></script>
<script type="text/javascript" src="http://localhost:4200/vendor.js"></script>
<script type="text/javascript" src="http://localhost:4200/main.js"></script>
}
else
{
<script type="text/javascript" src="~/scripts/AngularOutput/main.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/scripts/AngularOutput/polyfills.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/scripts/AngularOutput/runtime.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/scripts/AngularOutput/styles.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/scripts/AngularOutput/vendor.js" asp-append-version="true"></script>
}
}
app.component.html
<div (click)="clickHandler()">
{{title}}
</div>
app.component.ts
export class AppComponent {
counter: number = 1;
title = 'Angular LAWE (You are the BOSSmann)' + this.counter;
constructor() {
setTimeout(() => {
console.log("hello");
this.title = "something else";
}, 5000);
}
clickHandler(): any {
console.log("Change click", ++this.counter);
this.title = "hi" + this.counter;
}
}
Я ожидаю, что когда он работает с сервером разработки для http://localhost:4200,, он также будет работать для https://localhost:44323/dashboard/, но это не так.
?? Может ли это быть проблема https против http?
ОБНОВЛЕНИЕ 1: Я использовал в папке приложения Angular в package.json "start": "ng serve --ssl true", который удалил WDS-ошибку, но теперь выдает GET https://localhost/runtime.js net :: ERR_CONNECTION_REFUSED
?? Когда мой сервер разработки из VS в Startup.cs не работает, может ли это быть причиной того, что щелчки и все не работает? Он рендерит компонент и записывает журналы из init, и я могу вызвать clickMethod, который регистрирует клики, но нажатие div не работает.
ОБНОВЛЕНИЕ 2: Изменил порт на локальный порт разработки вместо 4200, но вместо этого выдал ответ 500.