dotnet new angular -o my-new-app cd my-new-app cd ClientApp npm install --save <package_name>
用于创建角度项目的链接 – https://docs.microsoft.com/en-us/aspnet/core/spa/angular?view=aspnetcore-2.1&tabs=visual-studio
现在我按照链接更新到Angular 6 How to update / upgrade from Angular 4 to Angular 5+
使用另一个链接进行更新,但所有链接都显示相同的错误
https://asish.com.au/how-to-upgrade-angular-5-application-to-angular-6-with-visual-studio-2017/
但是得到很多错误
处理请求时发生未处理的异常.
AggregateException：发生一个或多个错误. (发生了一个或多个错误.(NPM脚本’start’退出但未指示Angular CLI正在侦听请求.错误输出为：Unknown选项：’ – extraxtCss’
))
这是我的Package.json文件
{
"name": "WebApp","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": "^6.0.4","@angular/common": "^6.0.4","@angular/compiler": "^6.0.4","@angular/core": "^6.0.4","@angular/forms": "^6.0.4","@angular/http": "^6.0.4","@angular/platform-browser": "^6.0.4","@angular/platform-browser-dynamic": "^6.0.4","@angular/platform-server": "^6.0.4","@angular/router": "^6.0.4","@nguniversal/module-map-ngfactory-loader": "^6.0.0","aspnet-prerendering": "^3.0.1","bootstrap": "^4.1.1","core-js": "^2.4.1","rxjs": "^6.2.0","zone.js": "^0.8.26"
},"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8","@angular/cli": "^6.0.8","@angular/compiler-cli": "^6.0.4","@angular/language-service": "^6.0.4","@types/jasmine": "~2.8.3","@types/jasminewd2": "~2.0.2","@types/node": "~10.3.1","codelyzer": "^4.0.1","jasmine-core": "~3.1.0","jasmine-spec-reporter": "~4.2.1","karma": "^2.0.2","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "^2.0.1","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^1.1.0","protractor": "^5.3.2","ts-node": "~6.1.0","tslint": "~5.10.0","typescript": "~2.9.1"
},"optionalDependencies": {
"node-sass": "^4.9.0"
}
}
Start.cs中
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
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)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
// In production,the Angular files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app,IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",template: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
// To learn more about options for serving an Angular SPA from ASP.NET Core,// see https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
}
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
"WebApp": {
"root": "","sourceRoot": "src","projectType": "application","architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser","options": {
"outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","progress": true,"polyfills": "src/polyfills.ts","assets": [
"src/assets"
],"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],"scripts": []
},"configurations": {
"production": {
"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"fileReplacements": [
{
"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
}
]
}
}
},"serve": {
"builder": "@angular-devkit/build-angular:dev-server","options": {
"browserTarget": "WebApp:build"
},"configurations": {
"production": {
"browserTarget": "WebApp:build:production"
}
}
},"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n","options": {
"browserTarget": "WebApp:build"
}
},"test": {
"builder": "@angular-devkit/build-angular:karma","options": {
"main": "src/test.ts","karmaConfig": "./karma.conf.js","tsConfig": "src/tsconfig.spec.json","scripts": [],"assets": [
"src/assets"
]
}
},"lint": {
"builder": "@angular-devkit/build-angular:tslint","options": {
"tsConfig": [
"src/tsconfig.app.json","src/tsconfig.spec.json"
],"exclude": [
"**/node_modules/**"
]
}
}
}
},"WebApp-e2e": {
"root": "","sourceRoot": "e2e","architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "./protractor.conf.js","devServerTarget": "WebApp:serve"
}
},"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],"exclude": [
"**/node_modules/**"
]
}
}
}
}
},"defaultProject": "WebApp","schematics": {
"@schematics/angular:component": {
"prefix": "app","styleext": "css"
},"@schematics/angular:directive": {
"prefix": "app"
}
}
}
错误详情
任何人都可以让我知道如何通过适当的链接将角度5.2转换为角度6
dotnet new angular -o my-new-app cd my-new-app cd ClientApp npm install
首先,使用以下命令将Angular CLI全局更新为最新版本：
npm install -g @angular/cli
接下来,我们需要更新特定于应用程序的Angular CLI本地版本.为此,请导航到Angular应用程序根文件夹(package.json所在的位置)并运行以下命令.
npm install @angular/cli
Angular CLI现在支持包含多个项目的工作区,例如多个应用程序或库.因此,现在可以在同一个CLI项目中创建多个应用程序(称为工作空间),并创建库(一组共享的组件,指令,管道和服务)！这个新架构使用angular.json而不是.angular-cli.json进行构建和项目配置.因此,需要删除.angular-cli.json文件,并且需要在项目中添加新的angular.json文件.别担心,您不必手动执行此操作.运行以下命令将配置文件转换为新格式(angular.json).
ng update @angular/cli
成功完成此命令后,您可以在解决方案资源管理器中看到angular.json文件.我必须运行此命令两次以获取新文件.因此,如果您在第一次运行该命令后在解决方案资源管理器中找不到新的angular.json文件,请再试一次.
接下来,是时候将所有框架包升级到Angular 6.为此,请运行以下命令：
ng update @angular/core
所有Angular框架包都升级到Angular 6.您可以通过package.json文件对其进行验证.
接下来,运行ng update以识别和更新其他依赖项.
Angular 6现在依赖于TypeScript 2.7和RxJS 6.因此,我们需要升级RxJS.您将考虑在使用RxJS导入和运算符的任何地方手动更改代码.别担心,有一个包装可以解决这个问题.运行以下命令以升级RxJS.
npm install -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json
完成后,删除rxjs-compat.此软件包需要向后兼容版本6之前的RxJS.但是,现在不再需要它,所以让我们使用以下命令将其删除：
npm uninstall rxjs-compat
现在,运行ng来查看应用程序正在构建和运行而没有任何错误.还剩下一件事.如果我们从Visual Studio 2017构建应用程序并运行它,您可能会在浏览器中看到以下异常.
InvalidOperationException：NPM脚本“start”退出,但未指示Angular CLI正在侦听请求.错误输出为：未知选项：’ – extxtCss’
这是因为ng serve命令不再支持–extractCss选项. extractCSS是一个JavaScript库和一个在线工具,可以从HTML文档中提取元素ID,类和内联样式,并将它们输出为CSS样式表.此选项在ng服务上不可用,因为它是与构建相关的选项,而不是与服务相关的选项.
要解决此问题,请从package.json文件的scripts部分中的ng serve命令中删除–extract-css选项.
"start": "ng serve"
保存package.json文件,构建应用程序并再次运行.您应该会在浏览器中看到该应用正在运行
来源链接 – http://www.talkingdotnet.com/upgrade-angular-5-app-angular-6-visual-studio-2017/
