{"record":{"id":"005e78a57ebaaee8","repo":"angular/angular-cli","slug":"prerequisite-for-application-shell-is-to-define-a","errorCode":null,"errorMessage":"Prerequisite for application shell is to define a router-outlet in your root component.","messagePattern":"Prerequisite for application shell is to define a router-outlet in your root component\\.","errorType":"exception","errorClass":"SchematicsException","httpStatus":null,"severity":"error","filePath":"packages/schematics/angular/app-shell/index.ts","lineNumber":131,"sourceCode":"    .map((imp) => {\n      const pathStringLiteral = imp.moduleSpecifier as ts.StringLiteral;\n\n      return pathStringLiteral.text;\n    })[0];\n\n  return join(dirname(bootstrappingFilePath), componentRelativeFilePath + '.ts');\n}\n// end helper functions.\n\nfunction validateProject(mainPath: string): Rule {\n  return (host: Tree) => {\n    const routerOutletCheckRegex = /<router-outlet.*?>([\\s\\S]*?)(?:<\\/router-outlet>)?/;\n\n    const componentPath = getBootstrapComponentPath(host, mainPath);\n    const tmpl = getComponentTemplateInfo(host, componentPath);\n    const template = getComponentTemplate(host, componentPath, tmpl);\n    if (!routerOutletCheckRegex.test(template)) {\n      throw new SchematicsException(\n        `Prerequisite for application shell is to define a router-outlet in your root component.`,\n      );\n    }\n  };\n}\n\nfunction getMetadataProperty(metadata: ts.Node, propertyName: string): ts.PropertyAssignment {\n  const properties = (metadata as ts.ObjectLiteralExpression).properties;\n  const property = properties.filter(ts.isPropertyAssignment).filter((prop) => {\n    const name = prop.name;\n    switch (name.kind) {\n      case ts.SyntaxKind.Identifier:\n        return name.getText() === propertyName;\n      case ts.SyntaxKind.StringLiteral:\n        return name.text === propertyName;\n    }\n\n    return false;","sourceCodeStart":113,"sourceCodeEnd":149,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/schematics/angular/app-shell/index.ts#L113-L149","documentation":"The app-shell schematic requires the root (bootstrap) component's template to contain a `<router-outlet>` because the generated application shell renders routes through the router. `validateProject` checks the template with a regex and throws a SchematicsException if no router-outlet exists.","triggerScenarios":"Running `ng add @angular/... app-shell` (or `ng generate app-shell`) on a project whose bootstrap AppComponent template has no `<router-outlet>` element (including self-closing or unclosed forms matched by the regex).","commonSituations":"Minimal starter apps that render plain content without routing; projects where routing was added to a child component but not the root component; templates built dynamically or split so router-outlet isn't in the root template literal.","solutions":["Add `<router-outlet></router-outlet>` to the root component's template (found via getBootstrapComponentPath from the main entry)","Run `ng add @angular/router` / set up routing first, then re-run the app-shell schematic","Ensure the bootstrap component path resolves to the component you expect (check `main.ts` bootstrapModule/AppComponent)"],"exampleFix":"// before\n@Component({ selector: 'app-root', template: '<h1>Hello</h1>' })\n// after\n@Component({ selector: 'app-root', template: '<h1>Hello</h1><router-outlet></router-outlet>' })","handlingStrategy":"validation","validationCode":"const template = fs.readFileSync(rootComponentTemplatePath, 'utf8');\nif (!/<router-outlet.*?>/.test(template)) {\n  throw new Error('Add <router-outlet> to the root component template before running app-shell');\n}","typeGuard":null,"tryCatchPattern":"try {\n  await ngGenerate('app-shell', options);\n} catch (e) {\n  if (e.message.includes('router-outlet')) {\n    console.error('Root component needs <router-outlet> in its template');\n  } else throw e;\n}","preventionTips":["Set up Angular Router and add router-outlet to the root component before adding an app shell","Run `ng add @angular/router` first in fresh projects","Confirm the bootstrap component resolved from main.ts is the one containing the outlet"],"tags":["angular","schematics","router","app-shell"],"backgroundTag":"missing-router-outlet","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}