Angular-cli not generating dist directory with ng build

Question

Here is what I have installed:

@angular/cli: 1.0.0-rc.1
node: 7.4.0
os: linux x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.1

I have looked at this post Not generating dist folders , but I just want a dist directory generated so that I can link it with Express. The command I am using is

ng build --base-href /apply/

I understand with ng serve the files are created in memory. However I am not using ng serve. I have a Express static path

app.use('/', express.static(path.resolve('../../dist')));

Since the build command does not create the dist directory I cannot serve the angular application. The answer in the link (above) says to use the --watch argument. Why do I have to do that? Shouldn't ng build create the dist directory?

Am I missing something obvious. Any help is appreciated.

Secondary comment. If there is an error for example "ERROR in Error encountered resolving symbol values statically" does the build process abort ? — eferesen
– eferesen, Commented Mar 10, 2017 at 18:50

eferesen · Accepted Answer · 2017-03-10 19:09:00Z

5

Here is what I have learned. The reason there was no dist directory being created was due to the fact that there was a compiling error (in older cli version this was not the case). The error was

ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 79:22 in the original .ts file), resolving symbol AUTH_PROVIDERS in ...

I removed the dependency of AUTH_PROVIDERS from app_module.ts. Once this was done the project compiled ok.

answered Mar 10, 2017 at 19:09

eferesen

1611 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas Porter · Accepted Answer · 2018-02-17 16:59:14Z

5

I encountered the same problem. The solution for me was to look in the tsconfig.json file and remove dist from the excludes section. Then I ran ng build and the dist folder was generated and put into the project root directory.

Also look at your angular-cli.json file to see if the outdir field is writing to dist.

answered Feb 17, 2018 at 16:59

Nicholas Porter

3,0214 gold badges25 silver badges40 bronze badges

Comments

clemens · Accepted Answer · 2018-01-03 08:13:18Z

1

Also, perhaps the dist folder has actually been created (check in your Finder) but doesn't show in your text editor because, by default, your .gitignore file has /dist.

edited Jan 3, 2018 at 8:13

clemens

17.9k12 gold badges52 silver badges71 bronze badges

answered Jan 3, 2018 at 7:50

cjpillette

1111 silver badge3 bronze badges

Comments

Feng Zhang · Accepted Answer · 2020-01-20 01:38:43Z

1

I solved this by adding a folder /dist manually, and run "ng build". So that I can see what is in there and copy things to upload to AWS S3.

answered Jan 20, 2020 at 1:38

Feng Zhang

2,0001 gold badge21 silver badges22 bronze badges

Comments

Syed Shahbaz Ulla · Accepted Answer · 2020-09-01 06:05:29Z

1

Step 1 :- Go to angular.json and check for below line "outputPath": "../webapp",

Step 2 :- Redirect to the path which is mentioned inside the outputPath you will get the dist file.

answered Sep 1, 2020 at 6:05

Syed Shahbaz Ulla

6368 silver badges12 bronze badges

Comments

Codemaker2015 · Accepted Answer · 2020-10-18 07:04:38Z

The build folder will be listed in the angular.json file with parameter named outputPath. Just check the respective folder to get the production code.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "BuddyTranslator": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "./dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            ...

Here the directory name is dist. So, that the build files will be listed under dist folder in the source directory,

Ribaz · Accepted Answer · 2022-10-21 16:44:53Z

0

In my case, it was funny. I had opened a terminal(cmd) and distination was dist folder. So, the dist folder was locked. I closed the terminal and everything went OK.

answered Oct 21, 2022 at 16:44

Ribaz

6945 silver badges11 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-04-25 15:27:47Z

0

Find and add this in angular.json file, worked for me, finally got my dist with data.

"build": {
  "options": {
    "outputPath": "dist"
  }
  ...
}

edited Apr 25, 2023 at 15:27

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Apr 19, 2023 at 21:33

Boban Banjevic

295 bronze badges

Collectives™ on Stack Overflow

Angular-cli not generating dist directory with ng build

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related