我正在用Angular开发一个dotnet核心应用程序。
我正在尝试迁移到dotnet core 2.1和Angular 6。
我能够首先毫无问题地迁移到dotnet core 2.1,但是当我尝试迁移到最新的Angular构建时,遇到了问题。
这不是Angular本身的问题,而是webpack的问题。我毫无问题地将package.json中的所有软件包(webpack除外)都升级到最新版本,但是HMR无法正常工作,并且我无法运行
webpack --config webpack.config.vendor.js
都可以。
所以,我用
npm install npm-check-updates -g
ncu -u
npm install
还可以升级Webpack。
我现在有了这个package.json:
{
"name": "SIGAD",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "node --max-old-space-size=1600 app.js < /dev/null",
"test": "karma start ClientApp/test/karma.conf.js"
},
"dependencies": {
"@angular-cool/storage": "^1.0.1",
"@angular/animations": "^6.1.7",
"@angular/common": "^6.1.7",
"@angular/compiler": "^6.1.7",
"@angular/core": "^6.1.7",
"@angular/forms": "^6.1.7",
"@angular/http": "^6.1.7",
"@angular/platform-browser": "^6.1.7",
"@angular/platform-browser-dynamic": "^6.1.7",
"@angular/platform-server": "^6.1.7",
"@angular/router": "^6.1.7",
"@ng-idle/core": "^6.0.0-beta.3",
"@ng-idle/keepalive": "^6.0.0-beta.3",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@types/webpack-env": "^1.13.6",
"angular2-cool-storage": "^3.1.3",
"angular2-moment": "^1.9.0",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^3.0.0",
"core-js": "^2.5.7",
"es6-shim": "0.35.3",
"isomorphic-fetch": "2.2.1",
"json-loader": "0.5.7",
"ng-pick-datetime": "^6.0.16",
"ng2-datepicker-bootstrap": "^1.0.0",
"raw-loader": "0.5.1",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
"to-string-loader": "1.1.5",
"webpack-hot-middleware": "^2.24.0",
"webpack-merge": "^4.1.4",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.8.1",
"@angular/cdk": "^6.4.7",
"@angular/cli": "^6.2.1",
"@angular/compiler-cli": "^6.1.7",
"@angular/language-service": "^6.1.7",
"@angular/material": "^6.4.7",
"@ngtools/webpack": "^6.2.1",
"@types/chai": "4.1.5",
"@types/jasmine": "^2.8.8",
"@types/node": "^10.9.4",
"awesome-typescript-loader": "^5.2.1",
"bootstrap": "^4.1.3",
"chai": "4.1.2",
"codelyzer": "^4.4.4",
"css": "^2.2.4",
"css-loader": "^1.0.0",
"event-source-polyfill": "0.0.16",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"jasmine-core": "^3.2.1",
"jasmine-spec-reporter": "^4.2.1",
"jquery": "^3.3.1",
"karma": "^3.0.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^1.3.1",
"karma-webpack": "3.0.5",
"popper.js": "^1.14.4",
"preboot": "^6.0.0-beta.5",
"protractor": "^5.4.1",
"reflect-metadata": "^0.1.12",
"rxjs-tslint": "^0.1.5",
"style-loader": "^0.23.0",
"tslint": "^5.11.0",
"typescript": "^3.0.3",
"url-loader": "^1.1.1",
"webpack": "^4.18.1",
"webpack-cli": "^3.1.0"
},
"buildOptions": {
"emitEntryPoint": true
}
}
问题是当我尝试启动应用程序时出现内部服务器错误。通过调试,我捕获到此异常:
System.IO.FileNotFoundException: Could not load the specified file.
File name: 'System.Net.Sockets.resources'
at System.Runtime.Loader.AssemblyLoadContext.ResolveUsingEvent(AssemblyName assemblyName)
我没有对C#代码进行任何更改。毫无问题地迁移到dotnet core 2.1之后,我升级了所有依赖项。
我的Startup.cs是:
namespace SIGAD
{
public class Startup
{
private static string databaseConnection = "";
private const string SecretKey = "iNivDmHLpUA223sqsfhqGbMRdRj1PVkH"; // todo: get this from somewhere secure
private readonly SymmetricSecurityKey _signingKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes(SecretKey));
public Startup(IConfiguration config)
{
Configuration = config;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
try {
services.AddAutoMapper();
databaseConnection = Configuration.GetConnectionString("DefaultConnection");
if (databaseConnection == null) databaseConnection = "Server=localhost\\SQLEXPRESS;Database=SIGADCORE;Trusted_Connection=true";
services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(databaseConnection));
DatabaseConnection.ConnectionString = databaseConnection;
services.AddSingleton<IJwtFactory, JwtFactory>();
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
// jwt wire up
// Get options from app settings
var jwtAppSettingOptions = Configuration.GetSection(nameof(JwtIssuerOptions));
// Configure JwtIssuerOptions
services.Configure<JwtIssuerOptions>(options =>
{
options.Issuer = jwtAppSettingOptions[nameof(JwtIssuerOptions.Issuer)];
options.Audience = jwtAppSettingOptions[nameof(JwtIssuerOptions.Audience)];
options.SigningCredentials = new SigningCredentials(_signingKey, SecurityAlgorithms.HmacSha256);
});
services.AddAuthorization(options =>
{
options.AddPolicy("ApiUser", policy => policy.RequireClaim(Constants.Strings.JwtClaimIdentifiers.Rol, Constants.Strings.JwtClaims.ApiAccess));
});
// Add application services.
services.AddTransient<IEmailSender, EmailSender>();
services.AddNodeServices();
services.AddSingleton(Configuration);
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
catch (Exception e)
{
AddErrorToDatabase(e);
}
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, IServiceProvider serviceProvider, ILoggerFactory loggerFactory)
{
try {
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
HotModuleReplacementEndpoint = "/dist/__webpack_hmr"
});
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseDefaultFiles();
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseCookiePolicy();
var jwtAppSettingOptions = Configuration.GetSection(nameof(JwtIssuerOptions));
var tokenValidationParameters = new TokenValidationParameters
{
ValidateIssuer = true,
ValidIssuer = jwtAppSettingOptions[nameof(JwtIssuerOptions.Issuer)],
ValidateAudience = true,
ValidAudience = jwtAppSettingOptions[nameof(JwtIssuerOptions.Audience)],
ValidateIssuerSigningKey = true,
IssuerSigningKey = _signingKey,
RequireExpirationTime = false,
ValidateLifetime = false,
ClockSkew = TimeSpan.Zero
};
app.UseAuthentication();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
CreateRoles(serviceProvider);
if (Thread.CurrentThread.CurrentUICulture.Name == "en-US")
SessionConstants.CultureInfo = CultureInfo.CreateSpecificCulture("ro-RO");
else
SessionConstants.CultureInfo = CultureInfo.CreateSpecificCulture("ro-RO");
Thread.CurrentThread.CurrentCulture = SessionConstants.CultureInfo;
Thread.CurrentThread.CurrentUICulture = SessionConstants.CultureInfo;
}
catch (Exception e)
{
AddErrorToDatabase(e);
}
}
private void CreateRoles(IServiceProvider serviceProvider)
{
var roleManager = serviceProvider.GetRequiredService<RoleManager<IdentityRole>>();
var userManager = serviceProvider.GetRequiredService<UserManager<ApplicationUser>>();
Task<IdentityResult> roleResult;
string[] roleNames = { RoleNames.Admin, RoleNames.Supraveghetor, RoleNames.Operator, RoleNames.OperatorCuModificare, RoleNames.OperatorCuVizualizare };
//Check that there is an Administrator role and create if not
foreach (var roleName in roleNames)
{
Task<bool> hasAdminRole = roleManager.RoleExistsAsync(roleName);
hasAdminRole.Wait();
if (!hasAdminRole.Result)
{
roleResult = roleManager.CreateAsync(new IdentityRole(roleName));
roleResult.Wait();
}
}
}
public static void AddErrorToDatabase(Exception e)
{
// Get stack trace for the exception with source file information
var st = new StackTrace(e, true);
// Get the stack frames
string file = "";
string fileTemp = "";
string method = "";
string lineNumber = "";
foreach (StackFrame frame in st.GetFrames())
{
// Get the file name from the stack frame
fileTemp = frame.GetFileName() ?? "";
fileTemp = fileTemp.Replace('\\', '-').Split('-').Last().Trim();
int line = frame.GetFileLineNumber();
if (line > 0)
{
file += "-> " + fileTemp + "\n";
// Get the method from the stack frame
method = "-> " + frame.GetMethod().ToString().Substring(frame.GetMethod().ToString().IndexOf(' '), frame.GetMethod().ToString().IndexOf('(') - frame.GetMethod().ToString().IndexOf(' ')) + "\n";
// Get the line number from the stack frame
lineNumber += "-> " + frame.GetFileLineNumber().ToString() + "\n";
}
}
string destails = e.Message;
if (e.InnerException != null)
{
var innerException = e;
Exception realerror = e;
while (realerror.InnerException != null)
{
realerror = realerror.InnerException;
destails += "\n" + realerror.Message;
}
}
if (databaseConnection != null)
{
string QueryString = "INSERT INTO Error(Description,Moment,[File],Method,Line) VALUES (@description,@moment,@file,@method,@line)";
System.Type tipProdus = e.GetType();
SqlConnection myConnection = new SqlConnection(databaseConnection);
SqlDataAdapter myCommand = new SqlDataAdapter(QueryString, myConnection);
DataSet ds = new DataSet();
// add the elements to the list
using (SqlConnection con = new SqlConnection(databaseConnection))
{
con.Open();
using (SqlCommand cmd = new SqlCommand(QueryString, con))
{
cmd.Parameters.AddWithValue("@description", destails);
cmd.Parameters.AddWithValue("@moment", DateTime.Now);
cmd.Parameters.AddWithValue("@file", file);
cmd.Parameters.AddWithValue("@method", method);
cmd.Parameters.AddWithValue("@line", lineNumber);
cmd.ExecuteNonQuery();
}
con.Close();
}
}
else
{
//string folderPath = System.IO.Directory.GetCurrentDirectory();
string path = "errors" + DateTime.Now.ToString("ddMMyyyyhhmmss") + ".txt";
if (!File.Exists(path))
{
// Create a file to write to.
using (StreamWriter sw = File.CreateText(path))
{
sw.WriteLine(destails);
sw.WriteLine(DateTime.Now);
sw.WriteLine(file);
sw.WriteLine(method);
sw.WriteLine(lineNumber);
}
}
}
}
}
}
没有错误,但更改未反映在应用程序中。我尝试运行
webpack --config webpack.config.vendor.js
但是现在我得到了错误
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in 'C:\Users\Andrei\Desktop\Bosch.SIGAD-Core\SIGAD\node_modules\bootstrap\dist\js'
所以我用
安装了它npm install popper.js -D
运行
webpack --config webpack.config.vendor.js
再次奏效,但是现在我遇到了这个错误。
我什至不知道从哪里开始调查此错误。任何想法都很棒。
谢谢!
更新:
如果我通信:
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
HotModuleReplacementEndpoint = "/dist/__webpack_hmr"
});
在Startup.cs中,我没有收到内部服务器错误,但是却得到
Uncaught Error: Type e is part of the declarations of 2 modules: e and e! Please consider moving e to a higher module that imports e and e. You can also create a new NgModule that exports and includes e then import that NgModule in e and e.
在浏览器控制台中...
更新2:
我想强调的是,即使我之后用
创建了一个具有dotnet core和Angular的新项目,
npm install npm-check-updates -g
ncu -u
npm install
我收到此错误,但无法启动我的应用程序
我发现了这个:
https://github.com/dotnet/coreclr/issues/14482
这似乎是escat的相同问题,但我在那里看不到任何解决方案。
答案 0 :(得分:1)
使用.NET Core 2.1 API和Angular 6进行复制的步骤
1.-创建一个新的Proyect Aplication Web ASP.NET Core->选择启用Angular https
2.-关闭项目
3.-将ClientApp src复制到另一个文件夹
4。删除ClientApp文件夹
在应用程序的5.-in文件夹中(startup.cs在哪里)写入
ng new ClientApp
查看我的版本是Angular CLI:6.1.3 Node 10.5.0 OS:win32 x64
6.-打开项目并在IISExpress中发布(询问您有关https, 不用担心添加导航器的安全例外)
7.-您在localhost:#####中看到了应用程序
8.-复制之前保存的src文件夹
9.-转到“ ClientApp”文件夹并仅添加bootstrap-css
npm install bootstrap-css-only
10.-在angular.json中,必须在“样式”中包含.css,以便您的angular.json变得像
...
"styles": [
"src/styles.css",
"node_modules/bootstrap-css-only/css/bootstrap.css"
],
...
11.-您可以安装ng-bootstrap(位于ClientApp文件夹中)
npm install --save @ng-bootstrap/ng-bootstrap
然后在app.module.ts中添加导入
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
并添加NgbModule,以类似在https://ng-bootstrap.github.io/#/getting-started中显示的方式导入
12.-最后用代码替换nav-manu.component.html
<ul class="nav flex-column">
<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a class="nav-link" [routerLink]='["/"]'>Home</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]' >
<a class="nav-link" [routerLink]='["/counter"]' >Counter</a>
</li>
<li class="nav-item" [routerLinkActive]='["link-active"]' >
<a class="nav-link" [routerLink]='["/fetch-data"]' >Fech Data</a>
</li>
</ul>
但是我们有一个使用角度6的API应用
参见https://github.com/EliseoPlunker/sample-.NET-Core-2.1-Angular-6
答案 1 :(得分:0)
该错误与C#无关
这是一个Angular问题。
由于某些原因,Angular没有告诉我们一些编译错误。 Visual Studio没有显示任何错误,浏览器的控制台中没有错误,并且Output-> ASP.NET Core Web服务器中也没有错误(尽管有时会出现)。
我接受了Eliseo的建议,从头开始创建项目,并实际上一次添加了一个元素。没有迹象表明,但是在某些服务中,有此导入:
import 'rxjs/add/operator/map';
我知道不再使用map,但是我认为应该在编译时将其显示为错误。
在消除了该错误和其他错误之后,它起作用了。
我认为它是C#,因为它是我得到错误的唯一指示。