Skip to content

Commit

Permalink
feat: upgrade to Angular 17 (#173)
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt committed Jan 25, 2024
1 parent 1a85bf3 commit 8f1393b
Show file tree
Hide file tree
Showing 38 changed files with 5,233 additions and 4,864 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
8 changes: 4 additions & 4 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"root": true,
"ignorePatterns": ["**/*"],
"plugins": ["@nrwl/nx"],
"plugins": ["@nx"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"@nrwl/nx/enforce-module-boundaries": [
"@nx/enforce-module-boundaries": [
"error",
{
"enforceBuildableLibDependency": true,
Expand All @@ -23,15 +23,15 @@
},
{
"files": ["*.ts", "*.tsx"],
"extends": ["plugin:@nrwl/nx/typescript"],
"extends": ["plugin:@nx/typescript"],
"parserOptions": {
"project": "./tsconfig.*?.json"
},
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"extends": ["plugin:@nrwl/nx/javascript"],
"extends": ["plugin:@nx/javascript"],
"rules": {}
}
]
Expand Down
8 changes: 4 additions & 4 deletions .github/workflows/ngx-lottie.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@ jobs:
lint-test-build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v4
with:
ref: ${{ github.event.pull_request.head.ref }}
repository: ${{ github.event.pull_request.head.repo.full_name }}
fetch-depth: 0

- run: git fetch --no-tags --prune --depth 2 origin master

- uses: actions/setup-node@v2
- uses: actions/setup-node@v4
with:
node-version: 14.x
node-version: '18.13'

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo '::set-output name=dir::$(yarn config get cacheFolder)'

- uses: actions/cache@v2
- uses: actions/cache@v4
id: yarn-cache
with:
path: |
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ migrations.json
!.yarn/releases
!.yarn/sdks
!.yarn/versions

.nx/cache
8 changes: 2 additions & 6 deletions apps/demos-e2e/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,14 @@
"sourceRoot": "apps/demos-e2e/src",
"targets": {
"e2e": {
"executor": "@nrwl/cypress:cypress",
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/demos-e2e/cypress.config.ts",
"tsConfig": "apps/demos-e2e/tsconfig.e2e.json",
"devServerTarget": "demos:serve-ssr"
}
},
"lint": {
"executor": "@nrwl/linter:eslint",
"options": {
"lintFilePatterns": ["apps/demos-e2e/**/*.{js,ts}"]
}
"executor": "@nx/eslint:lint"
}
},
"implicitDependencies": ["demos"]
Expand Down
9 changes: 5 additions & 4 deletions apps/demos-e2e/src/e2e/ssr.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ describe('Server side rendering', () => {

it('should destroy animation', () => {
// Arrange & act & assert
cy.get('button.destroy').click().get('ng-lottie').should('not.exist');
cy.get('button.destroy').click();
cy.get('ng-lottie').should('not.exist');
});

it('should contain styles on the container div', () => {
Expand All @@ -56,9 +57,9 @@ describe('Server side rendering', () => {
// Arrange & act & assert
cy.get('ng-lottie svg g').invoke('prop', 'childElementCount').should('equal', 2);

cy.get('.update-animation')
.click()
.get('ng-lottie svg g')
cy.get('.update-animation').click();

cy.get('ng-lottie svg g')
.invoke('prop', 'childElementCount')
// The new animation is more complex and has much more elements.
.should('equal', 8);
Expand Down
2 changes: 1 addition & 1 deletion apps/demos-e2e/src/plugins/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const { preprocessTypescript } = require('@nx/cypress/plugins/preprocessor');

module.exports = (on, config) => {
on('file:preprocessor', preprocessTypescript(config));
Expand Down
10 changes: 0 additions & 10 deletions apps/demos-e2e/tsconfig.e2e.json

This file was deleted.

14 changes: 7 additions & 7 deletions apps/demos-e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"extends": "../../tsconfig.base.json",
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.e2e.json"
}
]
"compilerOptions": {
"allowJs": true,
"sourceMap": false,
"skipLibCheck": true,
"types": ["cypress", "node"]
},
"include": ["src/**/*.ts", "src/**/*.js"]
}
7 changes: 2 additions & 5 deletions apps/demos/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@
"overrides": [
{
"files": ["*.ts"],
"extends": [
"plugin:@nrwl/nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
],
"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
"rules": {
"@angular-eslint/directive-selector": [
"error",
Expand All @@ -29,7 +26,7 @@
},
{
"files": ["*.html"],
"extends": ["plugin:@nrwl/nx/angular-template"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
Expand Down
15 changes: 8 additions & 7 deletions apps/demos/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,21 @@ export default {
displayName: 'demos',
preset: '../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig.spec.json',
},
},
globals: {},
coverageDirectory: '../../coverage/apps/demos',
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
transform: {
'^.+.(ts|mjs|js|html)$': 'jest-preset-angular',
'^.+.(ts|mjs|js|html)$': [
'jest-preset-angular',
{
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig.spec.json',
},
],
},
transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
};
22 changes: 10 additions & 12 deletions apps/demos/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,27 +65,23 @@
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demos:build"
"buildTarget": "demos:build"
},
"configurations": {
"production": {
"browserTarget": "demos:build:production"
"buildTarget": "demos:build:production"
}
}
},
"lint": {
"executor": "@nrwl/linter:eslint",
"options": {
"lintFilePatterns": ["apps/demos/src/**/*.ts", "apps/demos/src/**/*.html"]
},
"executor": "@nx/eslint:lint",
"outputs": ["{options.outputFile}"]
},
"test": {
"executor": "@nrwl/jest:jest",
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/apps/demos"],
"options": {
"jestConfig": "apps/demos/jest.config.ts",
"passWithNoTests": true
"jestConfig": "apps/demos/jest.config.ts"
}
},
"server": {
Expand All @@ -95,7 +91,8 @@
"main": "apps/demos/server.ts",
"tsConfig": "apps/demos/tsconfig.server.json",
"sourceMap": true,
"optimization": false
"optimization": false,
"buildOptimizer": false
},
"configurations": {
"production": {
Expand All @@ -107,12 +104,13 @@
"replace": "apps/demos/src/environments/environment.ts",
"with": "apps/demos/src/environments/environment.prod.ts"
}
]
],
"buildOptimizer": true
}
}
},
"serve-ssr": {
"executor": "@nguniversal/builders:ssr-dev-server",
"executor": "@angular-devkit/build-angular:ssr-dev-server",
"options": {
"browserTarget": "demos:build",
"serverTarget": "demos:server"
Expand Down
49 changes: 33 additions & 16 deletions apps/demos/server.ts
Original file line number Diff line number Diff line change
@@ -1,55 +1,72 @@
import 'zone.js/node';

import { join } from 'path';
import * as express from 'express';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';

import { AppServerModule } from './src/main.server';
import { CommonEngine } from '@angular/ssr';
import * as express from 'express';
import { existsSync } from 'node:fs';
import { join } from 'node:path';
import bootstrap from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/apps/demos/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');

server.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
}),
);
const commonEngine = new CommonEngine();

server.set('view engine', 'html');
server.set('views', distFolder);

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get(
'*.*',
express.static(distFolder, {
maxAge: '1y',
}),
);

server.get('*', (req, res) => {
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then(html => res.send(html))
.catch(err => next(err));
});

return server;
}

function run(): void {
const port = process.env.PORT || 4200;
const port = process.env['PORT'] || 4200;

// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = (mainModule && mainModule.filename) || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}

export * from './src/main.server';
export default bootstrap;
13 changes: 11 additions & 2 deletions apps/demos/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="demo">
@if (shown) {
<ng-lottie
*ngIf="shown"
width="600px"
height="500px"
containerClass="moving-box moving-box-second-class"
Expand All @@ -9,10 +9,19 @@
(animationCreated)="animationCreated($event)"
(destroy)="destroy($event)"
></ng-lottie>
}

<div class="controls">
<div class="range">
<input #range type="range" value="1" min="0" max="3" step="0.5" (change)="setSpeed(range.value)">
<input
#range
type="range"
value="1"
min="0"
max="3"
step="0.5"
(change)="setSpeed(range.value)"
/>
</div>

<div class="actions">
Expand Down
4 changes: 3 additions & 1 deletion apps/demos/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import {
PLATFORM_ID,
} from '@angular/core';
import { AnimationItem } from 'lottie-web';
import { AnimationOptions, BMDestroyEvent, LottieTransferState } from 'ngx-lottie';
import { AnimationOptions, BMDestroyEvent, LottieComponent, LottieTransferState } from 'ngx-lottie';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [LottieComponent],
})
export class AppComponent implements AfterViewChecked {
options!: AnimationOptions;
Expand Down

0 comments on commit 8f1393b

Please sign in to comment.