Trying to understand the file structure in angular 7 app

Question

I got a solution and instructed to run by npm run build and then 'gulp dist'.

Here is the structure of the solution folders:

If I run the pixie -> index.html file in browser, my full app runs fine.

the full app is in the sibling folder source. that means source is the application folder. I run all ng commands in source folder.

source -> src -> app -> ....

But if I run it by ng-serve, another html file which is in

source -> dist -> angular -> index.html location, runs.

I wanted to understand the structure, and how do I make change and make impact in the pixie -> index.html file? because, whatever change I make, that does not effect the pixie -> index.html

Package.json

 {
  "name": "pixie2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --aot --host 0.0.0.0",
    "build": "ng build --prod --source-map --deploy-url=assets/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.0",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "^7.2.0",
    "@angular/compiler": "^7.2.0",
    "@angular/core": "^7.2.0",
    "@angular/forms": "^7.2.0",
    "@angular/http": "^7.2.0",
    "@angular/material": "^7.2.1",
    "@angular/platform-browser": "^7.2.0",
    "@angular/platform-browser-dynamic": "^7.2.0",
    "@angular/router": "^7.2.0",
    "@ngxs/devtools-plugin": "^3.3.2",
    "@ngxs/logger-plugin": "^3.3.2",
    "@ngxs/schematics": "0.0.1-alpha.5",
    "@ngxs/store": "^3.3.2",
    "b64-to-blob": "^1.2.19",
    "canvas": "^2.5.0",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^2.6.2",
    "deepmerge": "^3.0.0",
    "dot-object": "^1.7.1",
    "fabric": "^2.6.0",
    "file-saver": "^2.0.0",
    "hammerjs": "^2.0.8",
    "hex-rgb": "^3.0.0",
    "ngx-color-picker": "^7.3.0",
    "node-gyp": "^4.0.0",
    "perfect-scrollbar": "^1.4.0",
    "raven-js": "^3.27.0",
    "rxjs": "^6.3.2",
    "url-polyfill": "^1.1.3",
    "webfontloader": "^1.6.28",
    "zone.js": "0.8.27"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.1",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "^7.2.0",
    "@angular/language-service": "^7.2.0",
    "@ngxs/schematics": "^0.0.1-alpha.5",
    "@types/deepmerge": "^2.2.0",
    "@types/dot-object": "^1.5.0",
    "@types/fabric": "file:./fabric-types",
    "@types/file-saver": "^2.0.0",
    "@types/hammerjs": "^2.0.35",
    "@types/node": "~10.12.18",
    "@types/stripe-v3": "^3.0.9",
    "@types/webfontloader": "^1.6.29",
    "chartist": "^0.11.0",
    "codelyzer": "^4.5.0",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-concat": "^2.6.1",
    "gulp-filter": "^5.1.0",
    "gulp-hub": "^4.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-svgmin": "^2.1.0",
    "gulp-svgstore": "^7.0.1",
    "material-design-icons": "^3.0.1",
    "ts-node": "~7.0.1",
    "tslint": "~5.12.1",
    "typescript": "^3.1.1"
  }
}

From the pixie directory, I am running the app fine:

But the localhost:4200 has a different version. how do i match them?

What's your `package.json` you can simple run the app by doing `ng serve --open` from the root folder of the app (where `package.json` is present ). Do your changes and save and then you can build the app with `ng build` from the same location you will notice your dist folder gets regenerated with your recent changes. — Sourav Dutta, May 22 '19 at 02:14
There should be `index.html` under `src` no? Or am I misunderstanding something — penleychan, May 22 '19 at 02:14
You could do npm start from root folder to run your app locally — Sourav Dutta, May 22 '19 at 02:58

iosepa · Answer 1 · 2019-05-22T02:23:36.877

0

There is a production version and a development version of the site.

The pixie/ folder was created as the result of an ng build command. It is the production version of the site. On ng build your TypeScript files are transpiled into Javascript and minified. It's the little, just what you need to run version of the site.

edited May 22 '19 at 02:23

answered May 22 '19 at 02:16

iosepa

381
1
8

which .js file? runtime.xxxxxxx.js / main.xxxxxx.js this types of js files? how can I regenerate that build production? i tried production build. but nothing changed. – Abdur Rahim May 22 '19 at 02:20
Did you try "ng build"? It should have created a new folder called dist/ that looks like your pixie/ folder. – iosepa May 22 '19 at 02:24
ya that is tried. and i can run it fine. but the version loads there is corrupted anyway. The file I indicating which is little outside the source, (index.html) runs absoutely fine. – Abdur Rahim May 22 '19 at 02:33
1

It looks like you are using Ahead-Of-Time (AOT) compiler https://angular.io/guide/aot-compiler What does your dist/ folder look like? – iosepa May 22 '19 at 02:37
dist -> angular -> assets -> ... AND index.html, main.xxxx.js, polyfills.xxxx.js., runtime.xxxxx.js, styles.xxxx.css and Final folder also contains same files – Abdur Rahim May 22 '19 at 02:43
In .angular-cli.json you can set the output directory for "ng build" see: https://stackoverflow.com/questions/37348045/how-to-change-the-dist-folder-path-in-angular-cli-after-ng-build you can also "ng build --output-path=pixie" – iosepa May 22 '19 at 02:51
Finally I could run from 4200 with `ng serve --aot` Thanks – Abdur Rahim May 22 '19 at 02:54

Trying to understand the file structure in angular 7 app

1 Answers1