diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/.eslintrc.json b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/.eslintrc.json deleted file mode 100644 index 1e4624e68ae6..000000000000 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/.eslintrc.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "root": true, - "ignorePatterns": [ - "projects/**/*" - ], - "overrides": [ - { - "files": [ - "*.ts" - ], - "parserOptions": { - "project": [ - "tsconfig.json", - "e2e/tsconfig.json" - ], - "createDefaultProgram": true - }, - "extends": [ - "plugin:@angular-eslint/recommended", - "plugin:@angular-eslint/template/process-inline-templates" - ], - "rules": { - "@angular-eslint/component-selector": [ - "error", - { - "prefix": "app", - "style": "kebab-case", - "type": "element" - } - ], - "@angular-eslint/directive-selector": [ - "error", - { - "prefix": "app", - "style": "camelCase", - "type": "attribute" - } - ] - } - }, - { - "files": [ - "*.html" - ], - "extends": [ - "plugin:@angular-eslint/template/recommended" - ], - "rules": {} - } - ] -} diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/README.md b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/README.md index 4d4f80106fe8..01cedaf7acb4 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/README.md +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/README.md @@ -1,6 +1,6 @@ # Company.WebApplication1 -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.2. ## Development server @@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can ## Build -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. ## Running unit tests @@ -20,7 +20,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github. ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. ## Further help diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/angular.json b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/angular.json index 53b1ab9be205..ed94fb6a7c38 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/angular.json +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/angular.json @@ -4,11 +4,15 @@ "newProjectRoot": "projects", "projects": { "Company.WebApplication1": { + "projectType": "application", + "schematics": { + "@schematics/angular:application": { + "strict": true + } + }, "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -30,35 +34,49 @@ }, "configurations": { "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "Company.WebApplication1:build", - "proxyConfig": "proxy.conf.js" - }, "configurations": { "production": { "browserTarget": "Company.WebApplication1:build:production" + }, + "development": { + "browserTarget": "Company.WebApplication1:build:development", + "proxyConfig": "proxy.conf.js" } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", @@ -73,22 +91,13 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", + "assets": [ + "src/assets" + ], "styles": [ "src/styles.css" ], - "scripts": [], - "assets": [ - "src/assets" - ] - } - }, - "lint": { - "builder": "@angular-eslint/builder:lint", - "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] + "scripts": [] } }, "server": { @@ -118,32 +127,7 @@ } } } - }, - "Company.WebApplication1-e2e": { - "root": "e2e/", - "projectType": "application", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "Company.WebApplication1:serve" - } - }, - "lint": { - "builder": "@angular-eslint/builder:lint", - "options": { - "lintFilePatterns": [ - "e2e//**/*.ts", - "e2e//**/*.html" - ] - } - } - } } }, - "defaultProject": "Company.WebApplication1", - "cli": { - "defaultCollection": "@angular-eslint/schematics" - } + "defaultProject": "Company.WebApplication1" } diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/protractor.conf.js b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/protractor.conf.js deleted file mode 100644 index 3c07988707c6..000000000000 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/protractor.conf.js +++ /dev/null @@ -1,35 +0,0 @@ -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - browserName: 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ - spec: { - displayStacktrace: StacktraceOption.PRETTY - } - })); - } -}; diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.e2e-spec.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 5b3b4b27d7aa..000000000000 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { AppPage } from './app.po'; - -describe('App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getMainHeading()).toEqual('Hello, world!'); - }); -}); diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.po.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.po.ts deleted file mode 100644 index 24bc8b3cfced..000000000000 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get('/'); - } - - getMainHeading() { - return element(by.css('app-root h1')).getText(); - } -} diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/tsconfig.json b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/tsconfig.json deleted file mode 100644 index db33721a1918..000000000000 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/app", - "module": "commonjs", - "target": "es2018", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} \ No newline at end of file diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json index e5980acb7429..90c7b65b21a2 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/package.json @@ -13,21 +13,20 @@ //#endif "build": "ng build", "build:ssr": "ng run Company.WebApplication1:server:dev", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" + "watch": "ng build --watch --configuration development", + "test": "ng test" }, "private": true, "dependencies": { - "@angular/animations": "~11.2.11", - "@angular/common": "~11.2.11", - "@angular/compiler": "~11.2.11", - "@angular/core": "~11.2.11", - "@angular/forms": "~11.2.11", - "@angular/platform-browser": "~11.2.11", - "@angular/platform-browser-dynamic": "~11.2.11", - "@angular/platform-server": "~11.2.11", - "@angular/router": "~11.2.11", + "@angular/animations": "~12.0.2", + "@angular/common": "~12.0.2", + "@angular/compiler": "~12.0.2", + "@angular/core": "~12.0.2", + "@angular/forms": "~12.0.2", + "@angular/platform-browser": "~12.0.2", + "@angular/platform-browser-dynamic": "~12.0.2", + "@angular/platform-server": "~12.0.2", + "@angular/router": "~12.0.2", "@nguniversal/module-map-ngfactory-loader": "^8.2.6", "bootstrap": "^4.6.0", "jquery": "^3.5.1", @@ -35,37 +34,23 @@ "popper.js": "^1.16.0", "run-script-os": "^1.1.6", "rxjs": "~6.6.0", - "tslib": "^2.0.0", - "zone.js": "~0.11.3" + "tslib": "^2.1.0", + "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.1102.10", - "@angular-eslint/builder": "4.0.0", - "@angular-eslint/eslint-plugin": "4.0.0", - "@angular-eslint/eslint-plugin-template": "4.0.0", - "@angular-eslint/schematics": "4.0.0", - "@angular-eslint/template-parser": "4.0.0", - "@angular/cli": "~11.2.10", - "@angular/compiler-cli": "~11.2.11", - "@types/jasmine": "^3.6.10", + "@angular-devkit/build-angular": "~12.0.2", + "@angular/cli": "~12.0.2", + "@angular/compiler-cli": "~12.0.2", + "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.8", "@types/node": "^12.11.1", - "@typescript-eslint/eslint-plugin": "4.16.1", - "@typescript-eslint/parser": "4.16.1", - "eslint": "^7.6.0", - "ini": "^1.3.7", - "jasmine-core": "~3.6.0", - "jasmine-spec-reporter": "~5.0.0", - "karma": "~6.1.0", + "jasmine-core": "~3.7.0", + "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", - "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", - "karma-spec-reporter": "0.0.32", - "protractor": "~7.0.0", - "ts-node": "~8.4.1", - "typescript": "~4.1.5" + "typescript": "~4.2.3" }, "optionalDependencies": {} } diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login/login.component.spec.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login/login.component.spec.ts index 2eb434706451..280ee5e78156 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login/login.component.spec.ts +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/login/login.component.spec.ts @@ -6,7 +6,6 @@ import { of } from 'rxjs'; import { LoginActions } from '../api-authorization.constants'; import { HttpParams } from '@angular/common/http'; import { AuthorizeService } from '../authorize.service'; -import { log } from 'util'; import { HomeComponent } from 'src/app/home/home.component'; class RouterStub { @@ -20,8 +19,6 @@ describe('LoginComponent', () => { let router: Router; beforeEach(async(() => { - log('login.component.spec.ts before each started...'); - let tempParams: Params = { id: '1234' }; let segment0: UrlSegment = new UrlSegment('segment0', {}); @@ -48,8 +45,6 @@ describe('LoginComponent', () => { router = TestBed.get(Router); spyOn(router, 'navigate').and.returnValue(Promise.resolve(true)); - - log('login.component.spec.ts before each after compileComponents()...'); })); beforeEach(() => { diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/logout/logout.component.spec.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/logout/logout.component.spec.ts index a989eb446628..ef77791d025d 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/logout/logout.component.spec.ts +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/api-authorization/logout/logout.component.spec.ts @@ -3,7 +3,6 @@ import { RouterTestingModule } from '@angular/router/testing'; import { LogoutComponent } from './logout.component'; import { HomeComponent } from 'src/app/home/home.component'; import { ActivatedRoute, convertToParamMap, Params, UrlSegment } from '@angular/router'; -import { log } from 'util'; import { LogoutActions } from '../api-authorization.constants'; describe('LogoutComponent', () => { @@ -11,8 +10,6 @@ describe('LogoutComponent', () => { let fixture: ComponentFixture; beforeEach(async(() => { - log('logout.component.spec.ts before each started...'); - let tempParams: Params = { id: '1234' }; let segment0: UrlSegment = new UrlSegment('segment0', {}); diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/environments/environment.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/environments/environment.ts index 012182efa3b9..f56ff47022c7 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/environments/environment.ts +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/environments/environment.ts @@ -1,5 +1,5 @@ // This file can be replaced during build by using the `fileReplacements` array. -// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. +// `ng build` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. export const environment = { @@ -7,9 +7,10 @@ export const environment = { }; /* - * In development mode, to ignore zone related error stack frames such as - * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can - * import the following file, but please comment it out in production mode - * because it will have performance impact when throw error + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. +// import 'zone.js/plugins/zone-error'; // Included with Angular CLI. diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/polyfills.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/polyfills.ts index aa665d6b8740..373f538a7197 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/polyfills.ts +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/polyfills.ts @@ -18,7 +18,9 @@ * BROWSER POLYFILLS */ -/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +/** + * IE11 requires the following for NgClass support on SVG elements + */ // import 'classlist.js'; // Run `npm install --save classlist.js`. /** @@ -35,7 +37,7 @@ * will put import in the top of bundle, so user need to create a separate file * in this directory (for example: zone-flags.ts), and put the following flags * into that file, and then add the following code before importing zone.js. - * import './zone-flags.ts'; + * import './zone-flags'; * * The flags allowed in zone-flags.ts are listed here. * @@ -55,7 +57,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/test.ts b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/test.ts index 16317897b1c5..2042356408ff 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/test.ts +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/test.ts @@ -1,13 +1,18 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/zone-testing'; +import 'zone.js/testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -declare const require: any; +declare const require: { + context(path: string, deep?: boolean, filter?: RegExp): { + keys(): string[]; + (id: string): T; + }; +}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tsconfig.json b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tsconfig.json index 45b04663fd7d..03a931883800 100644 --- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tsconfig.json +++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/tsconfig.json @@ -2,7 +2,6 @@ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", - "module": "esnext", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": true, @@ -14,10 +13,7 @@ "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "es2015", - "typeRoots": [ - "node_modules/@types" - ], + "target": "es2017", "module": "es2020", "lib": [ "es2018", diff --git a/src/ProjectTemplates/test/template-baselines.json b/src/ProjectTemplates/test/template-baselines.json index 223d7ab2cc71..2ed1c8bb1827 100644 --- a/src/ProjectTemplates/test/template-baselines.json +++ b/src/ProjectTemplates/test/template-baselines.json @@ -1157,10 +1157,6 @@ "Template": "angular", "Arguments": "new angular", "Files": [ - "ClientApp/e2e/src/app.e2e-spec.ts", - "ClientApp/e2e/src/app.po.ts", - "ClientApp/e2e/protractor.conf.js", - "ClientApp/e2e/tsconfig.json", "ClientApp/src/app/counter/counter.component.html", "ClientApp/src/app/counter/counter.component.spec.ts", "ClientApp/src/app/counter/counter.component.ts", @@ -1185,7 +1181,6 @@ "ClientApp/src/test.ts", "ClientApp/.browserslistrc", "ClientApp/.editorconfig", - "ClientApp/.eslintrc.json", "ClientApp/.gitignore", "ClientApp/angular.json", "ClientApp/aspnetcore-https.js",