|
1
|
# Angular Setup |
|
2
|
|
|
3
|
Configuration requirements for Angular applications in the Replit environment. |
|
4
|
|
|
5
|
## Mandatory Setup Steps |
|
6
|
|
|
7
|
### 1. Disable Analytics |
|
8
|
|
|
9
|
Angular CLI analytics must be disabled during setup. Use the `--disable-analytics` flag or set it in configuration: |
|
10
|
|
|
11
|
```bash |
|
12
|
ng analytics off |
|
13
|
``` |
|
14
|
|
|
15
|
### 2. Configure allowedHosts |
|
16
|
|
|
17
|
Set `allowedHosts: true` in `angular.json` to allow the Replit proxy to access your dev server: |
|
18
|
|
|
19
|
```json |
|
20
|
{ |
|
21
|
"projects": { |
|
22
|
"your-app": { |
|
23
|
"architect": { |
|
24
|
"serve": { |
|
25
|
"options": { |
|
26
|
"allowedHosts": true, |
|
27
|
"host": "0.0.0.0", |
|
28
|
"port": 5000 |
|
29
|
} |
|
30
|
} |
|
31
|
} |
|
32
|
} |
|
33
|
} |
|
34
|
} |
|
35
|
``` |
|
36
|
|
|
37
|
### 3. Use Non-Interactive Commands |
|
38
|
|
|
39
|
Never use interactive Angular CLI tools. Always use command-line flags instead: |
|
40
|
|
|
41
|
```bash |
|
42
|
# Good - non-interactive |
|
43
|
ng generate component my-component --skip-tests --standalone |
|
44
|
|
|
45
|
# Bad - interactive (will hang) |
|
46
|
ng generate component |
|
47
|
``` |
|
48
|
|
|
49
|
## Common Flags |
|
50
|
|
|
51
|
| Flag | Purpose | |
|
52
|
|------|---------| |
|
53
|
| `--skip-tests` | Skip test file generation | |
|
54
|
| `--standalone` | Create standalone component | |
|
55
|
| `--inline-style` | Use inline styles | |
|
56
|
| `--inline-template` | Use inline template | |
|
57
|
| `--style=css` | Specify style format | |
|
58
|
|
|
59
|
## Workflow Configuration |
|
60
|
|
|
61
|
```bash |
|
62
|
ng serve --host 0.0.0.0 --port 5000 --disable-host-check |
|
63
|
``` |
|
64
|
|
|
65
|
Or configure in `angular.json`: |
|
66
|
|
|
67
|
```json |
|
68
|
{ |
|
69
|
"serve": { |
|
70
|
"options": { |
|
71
|
"host": "0.0.0.0", |
|
72
|
"port": 5000, |
|
73
|
"disableHostCheck": true |
|
74
|
} |
|
75
|
} |
|
76
|
} |
|
77
|
``` |
|
78
|
|
|
79
|
## Troubleshooting |
|
80
|
|
|
81
|
### User Cannot See the Application |
|
82
|
|
|
83
|
1. Verify `allowedHosts: true` is set in `angular.json` |
|
84
|
2. Ensure the server is bound to `0.0.0.0` not `localhost` |
|
85
|
3. Check that port 5000 is being used |
|
86
|
4. Restart the workflow after configuration changes |
|
87
|
|
|
88
|
### CLI Commands Hang |
|
89
|
|
|
90
|
You're using an interactive command. Add the necessary flags to make it non-interactive: |
|
91
|
|
|
92
|
```bash |
|
93
|
# Instead of interactive prompts |
|
94
|
ng new my-app --routing --style=css --skip-git --skip-tests |
|
95
|
``` |
|
96
|
|
|
97
|
### Build Errors After Setup |
|
98
|
|
|
99
|
Check console logs for specific errors. Common issues: |
|
100
|
|
|
101
|
- Missing peer dependencies |
|
102
|
- Version mismatches between Angular packages |
|
103
|
- TypeScript configuration issues |