Skip to content

Commit 60314f4

Browse files
lukaVargalukaVarga
authored
chore: Angular 18 support (#993)
* chore: Angular 18 support
1 parent 3acf99b commit 60314f4

26 files changed

+3164
-2431
lines changed

‎downstream_projects.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"packageDir": "./dist",
33
"projects": {
44
"sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
5-
"angular17": "./test-angular-versions/v17",
6-
"typescript52": "./test-typescript-versions/typescript5.2"
5+
"angular18": "./test-angular-versions/v18",
6+
"typescript54": "./test-typescript-versions/typescript5.4"
77
}
88
}

‎package.json

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@uirouter/angular",
33
"description": "State-based routing for Angular",
4-
"version": "13.0.0",
4+
"version": "14.0.0",
55
"scripts": {
66
"clean": "shx rm -rf lib lib-esm _bundles _doc dist",
77
"compile": "npm run clean && ngc",
@@ -43,20 +43,20 @@
4343
"license": "MIT",
4444
"distDir": "dist",
4545
"peerDependencies": {
46-
"@angular/common": "^17.0.0",
47-
"@angular/core": "^17.0.0",
46+
"@angular/common": "^18.0.0",
47+
"@angular/core": "^18.0.0",
4848
"@uirouter/core": "^6.0.8",
4949
"@uirouter/rx": "^1.0.0"
5050
},
5151
"devDependencies": {
52-
"@angular-devkit/build-angular": "^17.0.0",
53-
"@angular/animations": "^17.0.0",
54-
"@angular/common": "^17.0.0",
55-
"@angular/compiler": "^17.0.0",
56-
"@angular/compiler-cli": "^17.0.0",
57-
"@angular/core": "^17.0.0",
58-
"@angular/platform-browser": "^17.0.0",
59-
"@angular/platform-browser-dynamic": "^17.0.0",
52+
"@angular-devkit/build-angular": "^18.0.0",
53+
"@angular/animations": "^18.0.0",
54+
"@angular/common": "^18.0.0",
55+
"@angular/compiler": "^18.0.0",
56+
"@angular/compiler-cli": "^18.0.0",
57+
"@angular/core": "^18.0.0",
58+
"@angular/platform-browser": "^18.0.0",
59+
"@angular/platform-browser-dynamic": "^18.0.0",
6060
"@types/jest": "^27.0.3",
6161
"@types/jquery": "^3.5.9",
6262
"@types/node": "^20.11.4",
@@ -65,8 +65,8 @@
6565
"@uirouter/rx": "^1.0.0",
6666
"husky": "^7.0.4",
6767
"jest": "^29.0.0",
68-
"jest-preset-angular": "^14.0.0",
69-
"ng-packagr": "^17.0.0",
68+
"jest-preset-angular": "^14.1.1",
69+
"ng-packagr": "^18.0.0",
7070
"postcss": "^8.0.0",
7171
"prettier": "^2.5.0",
7272
"pretty-quick": "^3.1.2",
@@ -76,7 +76,7 @@
7676
"ts-node": "10.4.0",
7777
"tslib": "^2.3.0",
7878
"tslint": "^6.1.0",
79-
"typescript": "~5.2.2",
79+
"typescript": "~5.4.5",
8080
"zone.js": "~0.14.0"
8181
},
8282
"jest": {

‎test-angular-versions/v18/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# V18
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.7.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
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.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎test-angular-versions/v18/angular.json

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "yarn"
6+
},
7+
"newProjectRoot": "projects",
8+
"projects": {
9+
"v18": {
10+
"projectType": "application",
11+
"schematics": {
12+
"@schematics/angular:class": {
13+
"skipTests": true
14+
},
15+
"@schematics/angular:component": {
16+
"skipTests": true
17+
},
18+
"@schematics/angular:directive": {
19+
"skipTests": true
20+
},
21+
"@schematics/angular:guard": {
22+
"skipTests": true
23+
},
24+
"@schematics/angular:interceptor": {
25+
"skipTests": true
26+
},
27+
"@schematics/angular:pipe": {
28+
"skipTests": true
29+
},
30+
"@schematics/angular:resolver": {
31+
"skipTests": true
32+
},
33+
"@schematics/angular:service": {
34+
"skipTests": true
35+
}
36+
},
37+
"root": "",
38+
"sourceRoot": "src",
39+
"prefix": "app",
40+
"architect": {
41+
"build": {
42+
"builder": "@angular-devkit/build-angular:application",
43+
"options": {
44+
"outputPath": "dist/v18",
45+
"index": "src/index.html",
46+
"browser": "src/main.ts",
47+
"polyfills": [
48+
"zone.js"
49+
],
50+
"tsConfig": "tsconfig.app.json",
51+
"assets": [
52+
{
53+
"glob": "**/*",
54+
"input": "public"
55+
}
56+
],
57+
"styles": [
58+
"src/styles.css"
59+
],
60+
"scripts": []
61+
},
62+
"configurations": {
63+
"production": {
64+
"budgets": [
65+
{
66+
"type": "initial",
67+
"maximumWarning": "500kB",
68+
"maximumError": "1MB"
69+
},
70+
{
71+
"type": "anyComponentStyle",
72+
"maximumWarning": "2kB",
73+
"maximumError": "4kB"
74+
}
75+
],
76+
"outputHashing": "all"
77+
},
78+
"development": {
79+
"optimization": false,
80+
"extractLicenses": false,
81+
"sourceMap": true
82+
}
83+
},
84+
"defaultConfiguration": "production"
85+
},
86+
"serve": {
87+
"builder": "@angular-devkit/build-angular:dev-server",
88+
"configurations": {
89+
"production": {
90+
"buildTarget": "v18:build:production"
91+
},
92+
"development": {
93+
"buildTarget": "v18:build:development"
94+
}
95+
},
96+
"defaultConfiguration": "development"
97+
},
98+
"extract-i18n": {
99+
"builder": "@angular-devkit/build-angular:extract-i18n"
100+
},
101+
"test": {
102+
"builder": "@angular-devkit/build-angular:karma",
103+
"options": {
104+
"polyfills": [
105+
"zone.js",
106+
"zone.js/testing"
107+
],
108+
"tsConfig": "tsconfig.spec.json",
109+
"assets": [
110+
{
111+
"glob": "**/*",
112+
"input": "public"
113+
}
114+
],
115+
"styles": [
116+
"src/styles.css"
117+
],
118+
"scripts": []
119+
}
120+
}
121+
}
122+
}
123+
}
124+
}

‎test-angular-versions/v18/cypress.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineConfig } from 'cypress';
2+
3+
export default defineConfig({
4+
video: false,
5+
e2e: {
6+
setupNodeEvents(on, config) {},
7+
baseUrl: 'http://localhost:4000',
8+
supportFile: false
9+
},
10+
})

‎test-angular-versions/v18/cypress/e2e/sample_app.cy.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
describe('Angular app', () => {
2+
beforeEach(() => {
3+
window.sessionStorage.clear();
4+
});
5+
6+
it('loads', () => {
7+
cy.visit('');
8+
});
9+
10+
it('loads home state by default', () => {
11+
cy.visit('');
12+
cy.url().should('include', '/home');
13+
});
14+
15+
it('renders uisref as links', () => {
16+
cy.visit('');
17+
cy.get('a').contains('home');
18+
cy.get('a').contains('about');
19+
cy.get('a').contains('lazy');
20+
cy.get('a').contains('lazy.child');
21+
cy.get('a').contains('lazy.child.viewtarget');
22+
});
23+
24+
it('renders home', () => {
25+
cy.visit('/home');
26+
cy.get('a').contains('home').should('have.class', 'active');
27+
cy.get('a').contains('about').should('not.have.class', 'active');
28+
cy.get('#default').contains('home works');
29+
});
30+
31+
it('renders about', () => {
32+
cy.visit('/home');
33+
cy.visit('/about');
34+
cy.get('a').contains('home').should('not.have.class', 'active');
35+
cy.get('a').contains('about').should('have.class', 'active');
36+
cy.get('#default').contains('about works');
37+
});
38+
39+
it('loads lazy routes', () => {
40+
cy.visit('/home');
41+
cy.visit('/lazy');
42+
cy.get('a').contains('home').should('not.have.class', 'active');
43+
cy.get('a').contains('lazy').should('have.class', 'active');
44+
cy.get('#default').contains('lazy works');
45+
});
46+
47+
it('routes to lazy routes', () => {
48+
cy.visit('/lazy');
49+
cy.get('a').contains('home').should('not.have.class', 'active');
50+
cy.get('a').contains('lazy').should('have.class', 'active');
51+
cy.get('#default').contains('lazy works');
52+
});
53+
54+
it('routes to lazy child routes', () => {
55+
cy.visit('/lazy/child');
56+
cy.get('a').contains('home').should('not.have.class', 'active');
57+
cy.get('a').contains('lazy.child').should('have.class', 'active');
58+
cy.get('#default').contains('lazy.child works');
59+
});
60+
61+
it('targets named views', () => {
62+
cy.visit('/lazy/child/viewtarget');
63+
cy.get('a').contains('home').should('not.have.class', 'active');
64+
cy.get('a').contains('lazy.child').should('have.class', 'active');
65+
cy.get('#default').contains('lazy.child works');
66+
cy.get('#header').contains('lazy.child.viewtarget works');
67+
cy.get('#footer').contains('lazy.child.viewtarget works');
68+
});
69+
});

‎test-angular-versions/v18/package.json

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "v18",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "npm run test:dev && npm run test:prod",
10+
"test:dev": "ng build --configuration development && cypress-runner run --path dist/v18/browser",
11+
"test:prod": "ng build --configuration production && cypress-runner run --path dist/v18/browser"
12+
},
13+
"private": true,
14+
"dependencies": {
15+
"@angular/animations": "^18.0.0",
16+
"@angular/common": "^18.0.0",
17+
"@angular/compiler": "^18.0.0",
18+
"@angular/core": "^18.0.0",
19+
"@angular/forms": "^18.0.0",
20+
"@angular/platform-browser": "^18.0.0",
21+
"@angular/platform-browser-dynamic": "^18.0.0",
22+
"@angular/router": "^18.0.0",
23+
"rxjs": "~7.8.0",
24+
"tslib": "^2.3.0",
25+
"zone.js": "~0.14.3",
26+
"@uirouter/angular": "*",
27+
"@uirouter/cypress-runner": "*",
28+
"@uirouter/core": "*",
29+
"@uirouter/rx": "*"
30+
},
31+
"devDependencies": {
32+
"@angular-devkit/build-angular": "^18.0.7",
33+
"@angular/cli": "^18.0.7",
34+
"@angular/compiler-cli": "^18.0.0",
35+
"@types/jasmine": "~5.1.0",
36+
"jasmine-core": "~5.1.0",
37+
"karma": "~6.4.0",
38+
"karma-chrome-launcher": "~3.2.0",
39+
"karma-coverage": "~2.2.0",
40+
"karma-jasmine": "~5.1.0",
41+
"karma-jasmine-html-reporter": "~2.1.0",
42+
"typescript": "~5.4.5"
43+
},
44+
"checkPeerDependencies": {
45+
"ignore": [
46+
"ajv",
47+
"terser"
48+
]
49+
}
50+
}

‎test-angular-versions/v18/public/favicon.ico

14.7 KB
Binary file not shown.

‎test-angular-versions/v18/src/app/about.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-about',
5+
template: ` <p>about works!</p> `,
6+
standalone: true,
7+
})
8+
export class AboutComponent {}

‎test-angular-versions/v18/src/app/app.component.css

Whitespace-only changes.

‎test-angular-versions/v18/src/app/app.component.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from '@angular/core';
2+
import { UIRouterModule } from '@uirouter/angular';
3+
4+
@Component({
5+
selector: 'app-root',
6+
template: `
7+
<ui-view name="header" id="header"></ui-view>
8+
<div class="app">
9+
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
10+
<div>
11+
<a uiSref="home" uiSrefActive="active">home</a>
12+
<a uiSref="about" uiSrefActive="active">about</a>
13+
<a uiSref="lazy" uiSrefActiveEq="active">lazy</a>
14+
<a uiSref="lazy.child" uiSrefActive="active">lazy.child</a>
15+
<a uiSref="lazy.child.viewtarget" uiSrefActive="active">lazy.child.viewtarget</a>
16+
</div>
17+
<ui-view id="default"></ui-view>
18+
</div>
19+
<ui-view name="footer" id="footer"></ui-view>
20+
`,
21+
styles: [
22+
`
23+
.app {
24+
text-align: center;
25+
border: 1px solid;
26+
}
27+
.active {
28+
font-weight: bold;
29+
}
30+
`,
31+
],
32+
standalone: true,
33+
imports: [UIRouterModule]
34+
})
35+
export class AppComponent {}

0 commit comments

Comments
 (0)