├── src
├── assets
│ └── .gitkeep
├── styles.css
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── app
│ ├── app.component.ts
│ ├── app-routing.module.ts
│ ├── app.module.ts
│ ├── app.component.css
│ ├── app.component.spec.ts
│ └── app.component.html
├── index.html
├── main.ts
├── test.ts
├── polyfills.ts
└── demo-styling.css
├── renovate.json
├── .vscode
├── extensions.json
├── launch.json
└── tasks.json
├── cypress.config.ts
├── netlify.toml
├── .editorconfig
├── tsconfig.app.json
├── tsconfig.spec.json
├── cypress
└── e2e
│ └── basic.cy.ts
├── .gitignore
├── tsconfig.json
├── package.json
├── karma.conf.js
├── angular.json
└── README.md
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-templates/angular-quickstart/HEAD/src/favicon.ico
--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 | "extends": [
4 | "local>netlify-templates/renovate-config"
5 | ]
6 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "cypress";
2 |
3 | export default defineConfig({
4 | e2e: {
5 | baseUrl: 'http://localhost:8888',
6 | supportFile: false,
7 | },
8 | });
9 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['../demo-styling.css']
7 | })
8 | export class AppComponent {
9 | title = 'angular-quickstart';
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 |
4 | const routes: Routes = [];
5 |
6 | @NgModule({
7 | imports: [RouterModule.forRoot(routes)],
8 | exports: [RouterModule]
9 | })
10 | export class AppRoutingModule { }
11 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command="ng build"
3 | publish="dist/angular-quickstart"
4 |
5 | [[redirects]]
6 | from = "/*"
7 | to = "/index.html"
8 | status = 200
9 |
10 | [[plugins]]
11 | package = "netlify-plugin-cypress"
12 |
13 | [plugins.inputs.postBuild]
14 | enable = true
15 |
16 | [plugins.inputs]
17 | enable = false
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts",
10 | "src/polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular Quickstart
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "files": [
11 | "src/test.ts",
12 | "src/polyfills.ts"
13 | ],
14 | "include": [
15 | "src/**/*.spec.ts",
16 | "src/**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppRoutingModule } from './app-routing.module';
5 | import { AppComponent } from './app.component';
6 |
7 | @NgModule({
8 | declarations: [
9 | AppComponent
10 | ],
11 | imports: [
12 | BrowserModule,
13 | AppRoutingModule
14 | ],
15 | providers: [],
16 | bootstrap: [AppComponent]
17 | })
18 | export class AppModule { }
19 |
--------------------------------------------------------------------------------
/cypress/e2e/basic.cy.ts:
--------------------------------------------------------------------------------
1 | describe('empty spec', () => {
2 | beforeEach(() => {
3 | cy.visit('/')
4 | })
5 |
6 | it('displays the resources text', () => {
7 | cy.get('h2')
8 | .contains('This is a bare-bones Angular project that has everything you need to quickly deploy it to Netlify');
9 | })
10 | it('renders the image', () => {
11 | cy.get('img')
12 | .should('be.visible')
13 | .and(($img) => {
14 | expect($img[0].naturalWidth).to.be.greaterThan(0);
15 | })
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 | BrowserDynamicTestingModule,
13 | platformBrowserDynamicTesting(),
14 | );
15 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "pwa-chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .logo img {
2 | padding: 30px 0;
3 | width: 100%;
4 | }
5 |
6 | .resource-list {
7 | font-family: Helvetica, Arial, sans-serif;
8 | font-size: larger;
9 | padding: 10px;
10 | text-align: center;
11 | }
12 |
13 | .resource-list ul {
14 | text-align: left;
15 | margin: 0 auto;
16 | width: 300px;
17 | }
18 |
19 | .resource-list a {
20 | color: black;
21 | line-height: 30px;
22 | }
23 |
24 | footer {
25 | bottom: 10px;
26 | font-family: Helvetica, Arial, sans-serif;
27 | margin: 0 auto;
28 | width: 100%;
29 | position: fixed;
30 | text-align: center;
31 | }
32 |
33 | footer img {
34 | width: 20px;
35 | }
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
44 | # Local Netlify folder
45 | .netlify
46 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "es2020",
21 | "lib": [
22 | "es2020",
23 | "dom"
24 | ],
25 | "useDefineForClassFields": false
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { RouterTestingModule } from '@angular/router/testing';
3 | import { AppComponent } from './app.component';
4 |
5 | describe('AppComponent', () => {
6 | beforeEach(async () => {
7 | await TestBed.configureTestingModule({
8 | imports: [
9 | RouterTestingModule
10 | ],
11 | declarations: [
12 | AppComponent
13 | ],
14 | }).compileComponents();
15 | });
16 |
17 | it('should create the app', () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app).toBeTruthy();
21 | });
22 |
23 | it(`should have as title 'angular-quickstart'`, () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | const app = fixture.componentInstance;
26 | expect(app.title).toEqual('angular-quickstart');
27 | });
28 |
29 | it('should render title', () => {
30 | const fixture = TestBed.createComponent(AppComponent);
31 | fixture.detectChanges();
32 | const compiled = fixture.nativeElement as HTMLElement;
33 | expect(compiled.querySelector('.content span')?.textContent).toContain('angular-quickstart app is running!');
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-quickstart",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^16.2.12",
14 | "@angular/common": "^16.2.12",
15 | "@angular/compiler": "^16.2.12",
16 | "@angular/core": "^16.2.12",
17 | "@angular/forms": "^16.2.12",
18 | "@angular/platform-browser": "^16.2.12",
19 | "@angular/platform-browser-dynamic": "^16.2.12",
20 | "@angular/router": "^16.2.12",
21 | "cypress": "^10.0.3",
22 | "rxjs": "~7.8.0",
23 | "tslib": "^2.3.0",
24 | "zone.js": "~0.13.3"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "^16.2.16",
28 | "@angular/cli": "^16.2.16",
29 | "@angular/compiler-cli": "^16.2.12",
30 | "@types/jasmine": "~4.6.0",
31 | "@types/node": "^16.0.0",
32 | "jasmine-core": "~4.6.0",
33 | "karma": "~6.4.0",
34 | "karma-chrome-launcher": "~3.2.0",
35 | "karma-coverage": "~2.2.0",
36 | "karma-jasmine": "~4.0.0",
37 | "karma-jasmine-html-reporter": "~1.7.0",
38 | "netlify-plugin-cypress": "~2.2.1",
39 | "typescript": "^4.9.5"
40 | }
41 | }
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/angular-quickstart'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 |
51 | /***************************************************************************************************
52 | * APPLICATION IMPORTS
53 | */
54 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
29 |
--------------------------------------------------------------------------------
/src/demo-styling.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
2 |
3 | :root {
4 | --main-family: 'Poppins', sans-serif;
5 | --color-bg: linear-gradient(180deg, #FFFFFF 0%, #AEC6DC 100%);
6 |
7 | /* Controls the blob blur gradient colors within the main tag's svg */
8 | --top-right-blur-1: #20C6B7;
9 | --top-right-blur-2: #4D9ABF;
10 | --bttm-left-blur-1: #de3641;
11 | --bttm-left-blur-2: #e46b73;
12 | }
13 |
14 | html {
15 | background: var(--color-bg);
16 | font-family: var(--main-family);
17 | min-height: 100%;
18 | }
19 |
20 | body{
21 | margin: 0;
22 | }
23 |
24 | #background {
25 | position: fixed;
26 | width: 100%;
27 | z-index: -1;
28 | height: 100%;
29 | }
30 |
31 | #content {
32 | display: flex;
33 | flex-direction: column;
34 | align-items: center;
35 | margin: 0 auto;
36 | }
37 |
38 | .header{
39 | text-align: center;
40 | }
41 |
42 | .header h1 {
43 | padding-top:5%;
44 | margin: 0;
45 | font-size: calc(max(5vw, 32px));
46 | }
47 |
48 | .header .logo img {
49 | padding: 30px 0;
50 | width: 100%;
51 | }
52 |
53 | .header h2 {
54 | line-height: 34px;
55 | width: 50%;
56 | margin: 0 auto;
57 | padding-bottom: 5%;
58 | font-weight: 500;
59 | }
60 |
61 | @media only screen and (max-width: 450px) {
62 | .header h2 {
63 | width: 90%;
64 | padding: 5%;
65 | }
66 | }
67 |
68 | .bttns{
69 | margin-bottom: 5%;
70 | }
71 |
72 | .bttn{
73 | padding: 15px;
74 | border-radius: 5px;
75 | width: 150px;
76 | margin: 0 1%;
77 | text-decoration: none;
78 | }
79 |
80 | .bttn.primary{
81 | display: inline-block;
82 | width: max-content;
83 | background: #21A69A;
84 | border: none;
85 | color: white;
86 | box-shadow: -3px 3px 5px rgb(35 33 33 / 23%);
87 | }
88 |
89 | .bttn.primary:hover {
90 | background: #21a69a;
91 | box-shadow: inset 3px 4px 10px rgb(35 33 33 / 40%);
92 | /* -webkit-box-shadow: inset 3px 4px 10px rgb(35 33 33 / 40%); */
93 | }
94 |
95 | .bttn.secondary{
96 | background: transparent;
97 | border: #093C4F 2px solid;
98 | color: #0D1D24;
99 | }
100 |
101 | .bttn.secondary:hover {
102 | background: #05171f;
103 | color: white;
104 | }
105 |
106 | .resource-list {
107 | font-family: Helvetica, Arial, sans-serif;
108 | font-size: larger;
109 | text-align: center;
110 | width: 100%;
111 | }
112 |
113 | .resource-list ul {
114 | text-align: left;
115 | margin: 0 auto;
116 | list-style: none;
117 | display: flex;
118 | justify-content: center;
119 | padding: 2%;
120 | }
121 |
122 | .resource-list li {
123 | padding: 2%;
124 | font-weight: bold;
125 | }
126 |
127 | .resource-list a {
128 | color: black;
129 | line-height: 30px;
130 | }
131 |
132 | footer {
133 | margin: 0 auto;
134 | width: 100%;
135 | text-align: center;
136 | }
137 |
138 | footer img {
139 | width: 20px;
140 | }
141 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-quickstart": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:application": {
10 | "strict": true
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:browser",
19 | "options": {
20 | "outputPath": "dist/angular-quickstart",
21 | "index": "src/index.html",
22 | "main": "src/main.ts",
23 | "polyfills": "src/polyfills.ts",
24 | "tsConfig": "tsconfig.app.json",
25 | "assets": [
26 | "src/favicon.ico",
27 | "src/assets"
28 | ],
29 | "styles": [
30 | "src/styles.css",
31 | "src/demo-styling.css"
32 | ],
33 | "scripts": []
34 | },
35 | "configurations": {
36 | "production": {
37 | "budgets": [
38 | {
39 | "type": "initial",
40 | "maximumWarning": "500kb",
41 | "maximumError": "1mb"
42 | },
43 | {
44 | "type": "anyComponentStyle",
45 | "maximumWarning": "2kb",
46 | "maximumError": "4kb"
47 | }
48 | ],
49 | "fileReplacements": [
50 | {
51 | "replace": "src/environments/environment.ts",
52 | "with": "src/environments/environment.prod.ts"
53 | }
54 | ],
55 | "outputHashing": "all"
56 | },
57 | "development": {
58 | "buildOptimizer": false,
59 | "optimization": false,
60 | "vendorChunk": true,
61 | "extractLicenses": false,
62 | "sourceMap": true,
63 | "namedChunks": true
64 | }
65 | },
66 | "defaultConfiguration": "production"
67 | },
68 | "serve": {
69 | "builder": "@angular-devkit/build-angular:dev-server",
70 | "configurations": {
71 | "production": {
72 | "browserTarget": "angular-quickstart:build:production"
73 | },
74 | "development": {
75 | "browserTarget": "angular-quickstart:build:development"
76 | }
77 | },
78 | "defaultConfiguration": "development"
79 | },
80 | "extract-i18n": {
81 | "builder": "@angular-devkit/build-angular:extract-i18n",
82 | "options": {
83 | "browserTarget": "angular-quickstart:build"
84 | }
85 | },
86 | "test": {
87 | "builder": "@angular-devkit/build-angular:karma",
88 | "options": {
89 | "main": "src/test.ts",
90 | "polyfills": "src/polyfills.ts",
91 | "tsConfig": "tsconfig.spec.json",
92 | "karmaConfig": "karma.conf.js",
93 | "assets": [
94 | "src/favicon.ico",
95 | "src/assets"
96 | ],
97 | "styles": [
98 | "src/styles.css"
99 | ],
100 | "scripts": []
101 | }
102 | }
103 | }
104 | }
105 | },
106 | "cli": {
107 | "analytics": "6a2392ab-7487-4dbe-ae87-f0df128e77a4"
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular on Netlify Quick Start Template
2 | 
3 |
4 | This is a bare-bones Angular project that has everything you need to quickly deploy it to [Netlify](https://netlify.com).
5 |
6 | Click this button and it will help you create a new repo, create a new Netlify project, and deploy!
7 |
8 | [](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/angular-quickstart)
9 |
10 | ## Table of Contents:
11 |
12 | - [Setup](#setup)
13 | - [Deploying](#deploying)
14 | - [Styling](#styling)
15 | - [Notes on Styling](#notes-on-styling)
16 | - [Remove Styling](#remove-styling)
17 | - [Testing](#testing)
18 | - [Included Default Testing](#included-default-testing)
19 | - [Removing Renovate](#removing-renovate)
20 | - [Removing Cypress](#removing-cypress)
21 | - [Angular + Netlify Resources](#angular--netlify-resources)
22 | - [Deployment Options](#deployment-options)
23 | - [Customization](#customization)
24 | - [Styling](#styling-1)
25 | - [Updating Dependencies](#updating-dependencies)
26 |
27 | ## Setup
28 |
29 | Clone this repo with one of these options:
30 | - Click the 'Deploy to Netlify' button above
31 | - Click the 'Use this template' button at the top of the page
32 | - Or via the command line `git clone https://github.com/netlify-templates/angular-quickstart`
33 |
34 | Then install the necessary packages and run the project locally to make sure everything works.
35 |
36 | ```bash
37 | npm install
38 | ng serve
39 | ```
40 |
41 | Alternatively, you can run this locally with [the Netlify CLI](https://docs.netlify.com/cli/get-started/)'s `netlify dev` command for more options like receiving a live preview to share (`netlify dev --live`) and the ability to test [Netlify Functions](https://www.netlify.com/products/functions) and [redirects](https://docs.netlify.com/routing/redirects/).
42 |
43 | > 🚨 If you decide to change the project name be sure to change it everywhere in the project including the [Netlify configuration file, `netlify.toml`](./netlify.toml), as there are many places in Angular projects where the project name is used. A quick fix is to find/replace all instances of `angular-quickstart` with your project name.
44 |
45 | ## Deploying
46 |
47 | There are a few ways to deploy this template:
48 | - Click the 'Deploy to Netlify' button above
49 | - Use the `netlify deploy` command
50 | - Head to the [Netlify UI](https://app.netlify.com/) to deploy via GitHub or [drag and drop](https://app.netlify.com/drop) the project folder
51 | - Use the Netlify CLI's create from template command `netlify sites:create-template angular-quickstart` which will create a repo, Netlify project, and deploy it
52 |
53 | ## Styling
54 |
55 | We've added some modern styling to this template using css within an external stylesheet, this will allow you to easily remove our styling and add in your own.
56 |
57 | If you decide that you want to keep our styling you can review our style notes below.
58 |
59 | ### Notes on Styling
60 |
61 | The variables below give you the ability to change the gradient colors of the blobs and are interpolated into the URL string of the background-img within the body.
62 |
63 | ```css
64 | // Controls the blob blur gradient colors within the main tag's svg
65 | --top-right-blur-1: #20C6B7;
66 | --top-right-blur-2: #4D9ABF;
67 | --bttm-left-blur-1: #de3641;
68 | --bttm-left-blur-2: #e46b73;
69 | ```
70 |
71 | ## Remove Styling
72 |
73 | If you decide that our styling is not for you, all you'll need to do is remove the [demo-styling.css](https://github.com/netlify-templates/angular-quickstart/blob/tn/designUpdates/src/demo-styling.css) file.
74 |
75 | ## Testing
76 |
77 | ### Included Default Testing
78 |
79 | We've included some tooling that helps us maintain these templates. This template currently uses:
80 |
81 | - [Renovate](https://www.mend.io/free-developer-tools/renovate/) - to regularly update our dependencies
82 | - [Cypress](https://www.cypress.io/) - to run tests against how the template runs in the browser
83 | - [Cypress Netlify Build Plugin](https://github.com/cypress-io/netlify-plugin-cypress) - to run our tests during our build process
84 |
85 | If your team is not interested in this tooling, you can remove them with ease!
86 |
87 | ### Removing Renovate
88 |
89 | In order to keep our project up-to-date with dependencies we use a tool called [Renovate](https://github.com/marketplace/renovate). If you're not interested in this tooling, delete the `renovate.json` file and commit that onto your main branch.
90 |
91 | ### Removing Cypress
92 |
93 | For our testing, we use [Cypress](https://www.cypress.io/) for end-to-end testing. This makes sure that we can validate that our templates are rendering and displaying as we'd expect. By default, we have Cypress not generate deploy links if our tests don't pass. If you'd like to keep Cypress and still generate the deploy links, go into your `netlify.toml` and delete the plugin configuration lines:
94 |
95 | ```diff
96 | [[plugins]]
97 | package = "netlify-plugin-cypress"
98 | - [plugins.inputs.postBuild]
99 | - enable = true
100 | -
101 | - [plugins.inputs]
102 | - enable = false
103 | ```
104 |
105 | If you'd like to remove the `netlify-plugin-cypress` build plugin entirely, you'd need to delete the entire block above instead. And then make sure sure to remove the package from the dependencies using:
106 |
107 | ```bash
108 | npm uninstall -D netlify-plugin-cypress
109 | ```
110 |
111 | And lastly if you'd like to remove Cypress entirely, delete the entire `cypress` folder and the `cypress.config.ts` file. Then remove the dependency using:
112 |
113 | ```bash
114 | npm uninstall cypress
115 | ```
116 |
117 | ## Angular + Netlify Resources
118 |
119 | Here are some resources to help you on your Angular + Netlify coding fun!
120 |
121 | - [Angular Docs](https://angular.dev/overview)
122 | - [Angular CLI Commands](https://angular.dev/cli)
123 | - [Angular on Netlify Configuration](https://docs.netlify.com/frameworks/angular/)
124 | - [Netlify CLI](https://docs.netlify.com/cli/get-started/)
125 |
126 |
127 | ## Deployment Options
128 |
129 | - **One-Click**: Click the "Deploy to Netlify" button above
130 | - **CLI**: Use `netlify deploy` command
131 | - **Git Integration**: Connect your repository in the [Netlify UI](https://app.netlify.com/)
132 | - **Manual**: Drag and drop the `dist/` folder to the [Netlify UI](https://app.netlify.com/drop)
133 |
134 | ## Customization
135 |
136 | ### Styling
137 |
138 | The project includes a demo stylesheet in `src/demo-styling.css` with customizable variables:
139 |
140 | ```css
141 | --top-right-blur-1: #20C6B7;
142 | --top-right-blur-2: #4D9ABF;
143 | --bttm-left-blur-1: #de3641;
144 | --bttm-left-blur-2: #e46b73;
145 | ```
146 |
147 | To remove the demo styling, delete the import from `angular.json` and `app.component.ts`.
148 |
149 | ### Updating Dependencies
150 |
151 | To update Angular packages to compatible versions:
152 |
153 | ```bash
154 | ng update @angular/core @angular/cli
155 | ```
156 |
157 | For TypeScript compatibility issues, install a compatible version:
158 |
159 | ```bash
160 | npm install typescript@4.6.4 --save-dev
161 | ```
162 |
163 | ## Testing
164 |
165 | This project includes:
166 | - Unit tests with Jasmine/Karma
167 | - E2E tests with Cypress
168 | - Cypress Netlify Build Plugin
169 |
170 | ---
171 |
172 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15 and uses Angular 15.
--------------------------------------------------------------------------------
7 |