Skip to content

Commit 4dd010c

Browse files
rogue-elephantrogue-elephant
authored
Feature/ng projects (#12)
* Updated to use scoped name within app module * Got scoped package name and parallel library watching and app serving working * Added scripts for tasks on projects * made start script run against the library-scripts script * script for tidying up angular json * Added add and remove lib scripts and updated readme * Added concurrent build watch and serve task * Converted loading module to ng project * Script tidy up
1 parent ae7e861 commit 4dd010c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1201
-260
lines changed

‎README.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,29 @@ This is a component library for various angular packages.
77
The project acts as a runnable application that can also be used to generate individual npm packages.
88
To run locally use:
99

10-
```npm run start:mock```
10+
```npm run start```
11+
12+
This will run a build --watch against all projects and also serve the app in parallel.
13+
14+
# Add a new library
15+
To add a new library run (from the root directory):
16+
`npm run libs:add library-name`
17+
18+
This will add a new project within the chapichapi scope namespace inside the projects folder and with the ngx prefix:
19+
20+
![Add lib](./screenshots/npm-add-lib.PNG)
21+
22+
and then also tidy up the angular json by removing the `@chapichapi/` prefix from the projects key as this is invalid.
23+
24+
![Add lib](./screenshots/npm-add-lib2.PNG)
25+
26+
# Removing a library
27+
You can remove a library by running (from the root directory):
28+
`npm run libs:remove library-name`
29+
30+
This deletes the library from the projects folder and then cleans up the reference to it in the angular.json file:
31+
32+
![Remove lib](./screenshots/npm-remove-lib.PNG)
1133

1234
# Packaging
1335
The point of this project is to build out a _normal_ angular application for displaying the components, whilst seperating each logical grouping into its own module/package.

‎angular.json

Lines changed: 214 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,225 @@
11
{
2-
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3-
"version": 1,
4-
"newProjectRoot": "projects",
5-
"projects": {
6-
"angular-component-library": {
7-
"projectType": "application",
8-
"schematics": {
9-
"@schematics/angular:component": {
10-
"style": "scss"
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-component-library",
21-
"index": "src/index.html",
22-
"main": "src/main.ts",
23-
"polyfills": "src/polyfills.ts",
24-
"tsConfig": "tsconfig.app.json",
25-
"aot": true,
26-
"assets": [
27-
"src"
28-
],
29-
"styles": [
30-
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
31-
"src/styles.scss"
32-
],
33-
"scripts": []
34-
},
35-
"configurations": {
36-
"mock": {
37-
"fileReplacements": [
38-
{
39-
"replace": "src/environments/environment.ts",
40-
"with": "src/environments/environment.mock.ts"
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"angular-component-library": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
4111
}
42-
]
4312
},
44-
"production": {
45-
"fileReplacements": [
46-
{
47-
"replace": "src/environments/environment.ts",
48-
"with": "src/environments/environment.prod.ts"
49-
}
50-
],
51-
"optimization": true,
52-
"outputHashing": "all",
53-
"sourceMap": false,
54-
"extractCss": true,
55-
"namedChunks": false,
56-
"extractLicenses": true,
57-
"vendorChunk": false,
58-
"buildOptimizer": true,
59-
"budgets": [
60-
{
61-
"type": "initial",
62-
"maximumWarning": "2mb",
63-
"maximumError": "5mb"
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-component-library",
21+
"index": "src/index.html",
22+
"main": "src/main.ts",
23+
"polyfills": "src/polyfills.ts",
24+
"tsConfig": "tsconfig.app.json",
25+
"aot": true,
26+
"assets": [
27+
"src"
28+
],
29+
"styles": [
30+
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
31+
"src/styles.scss"
32+
],
33+
"scripts": []
34+
},
35+
"configurations": {
36+
"mock": {
37+
"fileReplacements": [
38+
{
39+
"replace": "src/environments/environment.ts",
40+
"with": "src/environments/environment.mock.ts"
41+
}
42+
]
43+
},
44+
"production": {
45+
"fileReplacements": [
46+
{
47+
"replace": "src/environments/environment.ts",
48+
"with": "src/environments/environment.prod.ts"
49+
}
50+
],
51+
"optimization": true,
52+
"outputHashing": "all",
53+
"sourceMap": false,
54+
"extractCss": true,
55+
"namedChunks": false,
56+
"extractLicenses": true,
57+
"vendorChunk": false,
58+
"buildOptimizer": true,
59+
"budgets": [
60+
{
61+
"type": "initial",
62+
"maximumWarning": "2mb",
63+
"maximumError": "5mb"
64+
},
65+
{
66+
"type": "anyComponentStyle",
67+
"maximumWarning": "6kb",
68+
"maximumError": "10kb"
69+
}
70+
]
71+
}
72+
}
73+
},
74+
"serve": {
75+
"builder": "@angular-devkit/build-angular:dev-server",
76+
"options": {
77+
"browserTarget": "angular-component-library:build"
78+
},
79+
"configurations": {
80+
"production": {
81+
"browserTarget": "angular-component-library:build:production"
82+
},
83+
"mock": {
84+
"browserTarget": "angular-component-library:build:mock"
85+
}
86+
}
87+
},
88+
"extract-i18n": {
89+
"builder": "@angular-devkit/build-angular:extract-i18n",
90+
"options": {
91+
"browserTarget": "angular-component-library:build"
92+
}
93+
},
94+
"test": {
95+
"builder": "@angular-devkit/build-angular:karma",
96+
"options": {
97+
"main": "src/test.ts",
98+
"polyfills": "src/polyfills.ts",
99+
"tsConfig": "tsconfig.spec.json",
100+
"karmaConfig": "karma.conf.js",
101+
"assets": [
102+
"src/favicon.ico",
103+
"src/assets"
104+
],
105+
"styles": [
106+
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
107+
"src/styles.scss"
108+
],
109+
"scripts": []
110+
}
64111
},
65-
{
66-
"type": "anyComponentStyle",
67-
"maximumWarning": "6kb",
68-
"maximumError": "10kb"
112+
"lint": {
113+
"builder": "@angular-devkit/build-angular:tslint",
114+
"options": {
115+
"tsConfig": [
116+
"tsconfig.app.json",
117+
"tsconfig.spec.json",
118+
"e2e/tsconfig.json"
119+
],
120+
"exclude": [
121+
"**/node_modules/**"
122+
]
123+
}
124+
},
125+
"e2e": {
126+
"builder": "@angular-devkit/build-angular:protractor",
127+
"options": {
128+
"protractorConfig": "e2e/protractor.conf.js",
129+
"devServerTarget": "angular-component-library:serve"
130+
},
131+
"configurations": {
132+
"production": {
133+
"devServerTarget": "angular-component-library:serve:production"
134+
}
135+
}
136+
},
137+
"deploy": {
138+
"builder": "angular-cli-ghpages:deploy",
139+
"options": {}
69140
}
70-
]
71141
}
72-
}
73142
},
74-
"serve": {
75-
"builder": "@angular-devkit/build-angular:dev-server",
76-
"options": {
77-
"browserTarget": "angular-component-library:build"
78-
},
79-
"configurations": {
80-
"production": {
81-
"browserTarget": "angular-component-library:build:production"
82-
},
83-
"mock": {
84-
"browserTarget": "angular-component-library:build:mock"
143+
"ngx-mock-api": {
144+
"projectType": "library",
145+
"root": "projects/chapichapi/ngx-mock-api",
146+
"sourceRoot": "projects/chapichapi/ngx-mock-api/src",
147+
"prefix": "lib",
148+
"architect": {
149+
"build": {
150+
"builder": "@angular-devkit/build-ng-packagr:build",
151+
"options": {
152+
"tsConfig": "projects/chapichapi/ngx-mock-api/tsconfig.lib.json",
153+
"project": "projects/chapichapi/ngx-mock-api/ng-package.json"
154+
},
155+
"configurations": {
156+
"production": {
157+
"tsConfig": "projects/chapichapi/ngx-mock-api/tsconfig.lib.prod.json"
158+
}
159+
}
160+
},
161+
"test": {
162+
"builder": "@angular-devkit/build-angular:karma",
163+
"options": {
164+
"main": "projects/chapichapi/ngx-mock-api/src/test.ts",
165+
"tsConfig": "projects/chapichapi/ngx-mock-api/tsconfig.spec.json",
166+
"karmaConfig": "projects/chapichapi/ngx-mock-api/karma.conf.js"
167+
}
168+
},
169+
"lint": {
170+
"builder": "@angular-devkit/build-angular:tslint",
171+
"options": {
172+
"tsConfig": [
173+
"projects/chapichapi/ngx-mock-api/tsconfig.lib.json",
174+
"projects/chapichapi/ngx-mock-api/tsconfig.spec.json"
175+
],
176+
"exclude": [
177+
"**/node_modules/**"
178+
]
179+
}
180+
}
85181
}
86-
}
87-
},
88-
"extract-i18n": {
89-
"builder": "@angular-devkit/build-angular:extract-i18n",
90-
"options": {
91-
"browserTarget": "angular-component-library:build"
92-
}
93-
},
94-
"test": {
95-
"builder": "@angular-devkit/build-angular:karma",
96-
"options": {
97-
"main": "src/test.ts",
98-
"polyfills": "src/polyfills.ts",
99-
"tsConfig": "tsconfig.spec.json",
100-
"karmaConfig": "karma.conf.js",
101-
"assets": [
102-
"src/favicon.ico",
103-
"src/assets"
104-
],
105-
"styles": [
106-
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
107-
"src/styles.scss"
108-
],
109-
"scripts": []
110-
}
111-
},
112-
"lint": {
113-
"builder": "@angular-devkit/build-angular:tslint",
114-
"options": {
115-
"tsConfig": [
116-
"tsconfig.app.json",
117-
"tsconfig.spec.json",
118-
"e2e/tsconfig.json"
119-
],
120-
"exclude": [
121-
"**/node_modules/**"
122-
]
123-
}
124182
},
125-
"e2e": {
126-
"builder": "@angular-devkit/build-angular:protractor",
127-
"options": {
128-
"protractorConfig": "e2e/protractor.conf.js",
129-
"devServerTarget": "angular-component-library:serve"
130-
},
131-
"configurations": {
132-
"production": {
133-
"devServerTarget": "angular-component-library:serve:production"
183+
"ngx-loading": {
184+
"projectType": "library",
185+
"root": "projects/chapichapi/ngx-loading",
186+
"sourceRoot": "projects/chapichapi/ngx-loading/src",
187+
"prefix": "lib",
188+
"architect": {
189+
"build": {
190+
"builder": "@angular-devkit/build-ng-packagr:build",
191+
"options": {
192+
"tsConfig": "projects/chapichapi/ngx-loading/tsconfig.lib.json",
193+
"project": "projects/chapichapi/ngx-loading/ng-package.json"
194+
},
195+
"configurations": {
196+
"production": {
197+
"tsConfig": "projects/chapichapi/ngx-loading/tsconfig.lib.prod.json"
198+
}
199+
}
200+
},
201+
"test": {
202+
"builder": "@angular-devkit/build-angular:karma",
203+
"options": {
204+
"main": "projects/chapichapi/ngx-loading/src/test.ts",
205+
"tsConfig": "projects/chapichapi/ngx-loading/tsconfig.spec.json",
206+
"karmaConfig": "projects/chapichapi/ngx-loading/karma.conf.js"
207+
}
208+
},
209+
"lint": {
210+
"builder": "@angular-devkit/build-angular:tslint",
211+
"options": {
212+
"tsConfig": [
213+
"projects/chapichapi/ngx-loading/tsconfig.lib.json",
214+
"projects/chapichapi/ngx-loading/tsconfig.spec.json"
215+
],
216+
"exclude": [
217+
"**/node_modules/**"
218+
]
219+
}
220+
}
134221
}
135-
}
136-
},
137-
"deploy": {
138-
"builder": "angular-cli-ghpages:deploy",
139-
"options": {}
140222
}
141-
}
142-
}
143-
},
144-
"defaultProject": "angular-component-library"
145-
}
223+
},
224+
"defaultProject": "angular-component-library"
225+
}

0 commit comments

Comments
 (0)