Angular-cli: angular universal - Unable to find app with name or index. Verify the configuration in `.angular-cli.json`

[ranbuch]

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 6.9.5
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

I've implemented the instructions in this https://angular.io/guide/universal and got the step where I need to build my project using Universal:
npm run build:universal

The log given by the failure.

npm run build:universal

[email protected] build:universal C:\srccompany-repocompany.ClientWebRole\my-site
npm run build:client-and-server-bundles && npm run webpack:server

[email protected] build:client-and-server-bundles C:\srccompany-repocompany.ClientWebRole\my-site
ng build --prod && ng build --prod --app 1 --output-hashing=false

Date: 2017-11-15T09:21:01.585Z
Hash: f6016ac788ed0cfe0492
Time: 98477ms
chunk {0} polyfills.ad37cd45a71cb38eee76.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.bda34458a290ec7dbd1b.bundle.js (main) 782 kB [initial] [rendered]
chunk {2} styles.c1c24e133c2fa2cdc365.bundle.css (styles) 87.8 kB [initial] [rendered]
chunk {3} inline.32f4dc5ef7408961f4a1.bundle.js (inline) 1.45 kB [entry] [rendered]
Unable to find app with name or index. Verify the configuration in .angular-cli.json

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build:client-and-server-bundles"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:client-and-server-bundles: ng build --prod && ng build --prod --app 1 --output-hashing=false
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:client-and-server-bundles script 'ng build --prod && ng build --prod --app 1 --output-hashing=false'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the my-site package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng build --prod && ng build --prod --app 1 --output-hashing=false
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs my-site
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls my-site
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\srccompany-repocompany.ClientWebRole\my-site\npm-debug.log

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build:universal"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:universal: npm run build:client-and-server-bundles && npm run webpack:server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:universal script 'npm run build:client-and-server-bundles && npm run webpack:server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the my-site package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build:client-and-server-bundles && npm run webpack:server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs my-site
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls my-site
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\srccompany-repocompany.ClientWebRole\my-site\npm-debug.log

Desired functionality.

I'm trying to generate a pre-rendered HTML via Angular Universal

Mention any other details that might be useful.

When running ng serve the project run's just fine.

[ranbuch]

Could it be a missing entry on the "apps" array in my .angular-cli.json file?

[ranbuch]

Yes, that was it.
I think it's best if you will add this to the "universal guide" https://angular.io/guide/universal.

My .angular-cli.json file looks like this:

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "my-site" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.scss", "my-theme.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } }, { "platform": "server", "root": "src", "outDir": "dist/server", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.server.ts", "test": "test.ts", "tsconfig": "tsconfig.server.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.scss", "my-theme.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, { "project": "src/tsconfig.spec.json", "exclude": "**/node_modules/**" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "**/node_modules/**" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "scss", "component": {} } }

Basically I've added another entry in the apps entry array.

Make sure to change the "styles" entry with your css files names.

[Brocco]

If you've solved your problem, please close the issue.

[dorlandode]

The solution provided by @ranbuch should definitely be added to https://angular.io/guide/universal. I spent over an hour googling trying to figure out why the tutorial didn't work even though I followed it exactly.

The tutorial states that you will create a main.server.ts. But neglects to show you the contents of the file. https://github.com/angular/angular-cli/wiki/stories-universal-rendering gives an example of what to do, but as is the tutorial doesn't work for those that are new.

Once I added the main.server.ts file, then it would build with npm run build:universal.

Also, this is the content of my .angular-cli.json file:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "angular.io-example" }, "apps": [ { "root": "src", "outDir": "dist/browser", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } }, { "platform": "server", "root": "src", "outDir": "dist/server", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.server.ts", "test": "test.ts", "tsconfig": "tsconfig.server.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "styles.css" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, { "project": "src/tsconfig.spec.json", "exclude": "**/node_modules/**" }, { "project": "e2e/tsconfig.e2e.json", "exclude": "**/node_modules/**" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "component": {} } }

[cliffhall]

This demo just flat out doesn't work. I had gotten the Tour of Heroes working then went to https://angular.io/guide/universal which purports to take that demo to the next level with server side rendering. It does not. The above changes don't help, they just get you to the next error, which is that there is no main.server.ts which the https://angular.io/guide/universal page says you will add, but then never shows you what to put in it. Downloaded the zip file of the demo, again from https://angular.io/guide/universal, and installed the node dependencies and STILL it doesn't work, failing to find a main.server.ts. The docs on https://angular.io/guide/universal even have different script names than are in the package.json of the downloaded source.

It would really be nice if some form of this demo were available that worked, and particularly if the https://angular.io/guide/universal page actually showed all the steps to take someone who has just finished the Tour of Heroes demo to proceed through the remaining steps to see it server-renderable. Now, even the Tour of Heroes demo that was working no longer does. :(

[derschnee68]

After the error, I've edited this files, and it works (it follows angular.io/guide/universal conventions) : This is my angular-cli.json file (note the new entry in apps, and the first outdir pointing to "dist/browser" )

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "mathrix-v4-desktop"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/browser",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "platform": "server",
      "root": "src",
      "outDir": "dist/server",
      "assets": [],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}

This is my tsconfig.server.ts

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    // Set the module format to "commonjs":
    "module": "commonjs",
    "types": [
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "server.ts"
  ],
  // Add "angularCompilerOptions" with the AppServerModule you wrote
  // set as the "entryModule".
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

[KamranKawish]

Unfortunately they haven't updated the documentation. and this is not the only problem I had to face while building my app which could have avoided if it was there

[VernonGrant]

I spent hours trying to get this ** working, the below guide helped me solve the problem and I was able to get the demo up and running.

Angular Universal Integration, and checkout the Universal Starter Kit too.

[rajeevp]

Working sample:
https://github.com/rajeevp/angular_universalapp

download the source code and run
npm install
npm run build:universal
npm run serve:universal

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}