Workspace and project file structure
You develop applications in the context of an Angular workspace. A workspace contains the files for
one or more projects. A project is the set of files that comprise a standalone application or a
shareable library.
The Angular CLI ng new command creates a workspace.
content_copyng new <my-project>
When you run this command, the CLI installs the necessary Angular npm packages and other
dependencies in a new workspace, with a root-level application named my-project. The workspace
root folder contains various support and configuration files, and a README file with generated
descriptive text that you can customize.
By default, ng new creates an initial skeleton application at the root level of the workspace, along
with its end-to-end tests. The skeleton is for a simple Welcome application that is ready to run and
easy to modify. The root-level application has the same name as the workspace, and the source
files reside in the src/ subfolder of the workspace.
This default behavior is suitable for a typical "multi-repo" development style where each
application resides in its own workspace. Beginners and intermediate users are encouraged to
use ng new to create a separate workspace for each application.
Angular also supports workspaces with multiple projects. This type of development environment is
suitable for advanced users who are developing shareable libraries, and for enterprises that use a
"monorepo" development style, with a single repository and global configuration for all Angular
projects.
To set up a monorepo workspace, you should skip the creating the root application. See Setting up
for a multi-project workspace below.
Workspace configuration files
All projects within a workspace share a CLI configuration context. The top level of the workspace
contains workspace-wide configuration files, configuration files for the root-level application, and
subfolders for the root-level application source and test files.
WORKSPACE
CONFIGURATION PURPOSE
FILES
.editorconfig Configuration for code editors. See EditorConfig.
.gitignore Specifies intentionally untracked files that Git should ignore.
WORKSPACE
CONFIGURATION PURPOSE
FILES
[Link] Introductory documentation for the root application.
CLI configuration defaults for all projects in the workspace, including
configuration options for build, serve, and test tools that the CLI uses,
such as Karma, and Protractor. For details, see Angular Workspace
[Link] Configuration.
Configures npm package dependencies that are available to all projects
in the workspace. See npm documentation for the specific format and
[Link] contents of this file.
Provides version information for all packages installed
into node_modules by the npm client. See npm documentation for
[Link] details. If you use the yarn client, this file will be [Link] instead.
src/ Source files for the root-level application project.
Provides npm packages to the entire workspace. Workspace-
node_modules/ wide node_modules dependencies are visible to all projects.
The base TypeScript configuration for projects in the workspace. All
other configuration files inherit from this base file. For more information,
see the Configuration inheritance with extends section of the TypeScript
[Link] documentation.
Application project files
By default, the CLI command ng new my-app creates a workspace folder named "my-app" and
generates a new application skeleton in a src/ folder at the top level of the workspace. A newly
generated application contains source files for a root module, with a root component and template.
When the workspace file structure is in place, you can use the ng generate command on the
command line to add functionality and data to the application. This initial root-level application is
the default app for CLI commands (unless you change the default after creating additional apps).
Besides using the CLI on the command line, you can also manipulate files directly in the
application's source folder and configuration files.
For a single-application workspace, the src subfolder of the workspace contains the source files
(application logic, data, and assets) for the root application. For a multi-project workspace,
additional projects in the projects folder contain a project-name/src/ subfolder with the same
structure.
Application source files
Files at the top level of src/ support testing and running your application. Subfolders contain the
application source and application-specific configuration.
APPLICATION
PURPOSE
SUPPORT FILES
Contains the component files in which your application logic and data are
app/ defined. See details below.
Contains image and other asset files to be copied as-is when you build your
assets/ application.
[Link] An icon to use for this application in the bookmark bar.
The main HTML page that is served when someone visits your site. The CLI
automatically adds all JavaScript and CSS files when building your app, so
[Link] you typically don't need to add any <script> or <link> tags here manually.
The main entry point for your application. Compiles the application with
the JIT compiler and bootstraps the application's root module (AppModule) to
run in the browser. You can also use the AOT compiler without changing any
[Link] code by appending the --aot flag to the CLI build and serve commands.
[Link]
Lists CSS files that supply styles for a project. The extension reflects the style
APPLICATION
PURPOSE
SUPPORT FILES
preprocessor you have configured for the project.
New Angular projects use strict mode by default. If this is not desired you can opt out when creating
the project. For more information, see Strict mode.
Inside the src folder, the app folder contains your project's logic and data. Angular components,
templates, and styles go here.
SRC/APP/ FILES PURPOSE
Defines the application config logic that tells Angular how to
assemble the application. As you add more providers to the app,
app/[Link] they must be declared here.
Defines the logic for the application's root component,
named AppComponent. The view associated with this root
component becomes the root of the view hierarchy as you add
app/[Link] components and services to your application.
Defines the HTML template associated with the
app/[Link] root AppComponent.
app/[Link] Defines the base CSS stylesheet for the root AppComponent.
app/[Link] Defines a unit test for the root AppComponent.
Defines the root module, named AppModule, that tells Angular how
to assemble the application. Initially declares only
the AppComponent. As you add more components to the app, they
must be declared here.
app/[Link] This file is not generated when using --no-standalone option.
Application configuration files
The application-specific configuration files for the root application reside at the workspace root
level. For a multi-project workspace, project-specific configuration files are in the project root,
under projects/project-name/.
Project-specific TypeScript configuration files inherit from the workspace-wide [Link].
APPLICATION-SPECIFIC
PURPOSE
CONFIGURATION FILES
Application-specific TypeScript configuration, including TypeScript
and Angular template compiler options. See TypeScript
[Link] Configuration and Angular Compiler Options.
TypeScript configuration for the application tests. See TypeScript
[Link] Configuration.
Multiple projects
A multi-project workspace is suitable for an enterprise that uses a single repository and global
configuration for all Angular projects (the "monorepo" model). A multi-project workspace also
supports library development.
Setting up for a multi-project workspace
If you intend to have multiple projects in a workspace, you can skip the initial application
generation when you create the workspace, and give the workspace a unique name. The following
command creates a workspace with all of the workspace-wide configuration files, but no root-level
application.
content_copyng new my-workspace --no-create-application
You can then generate applications and libraries with names that are unique within the workspace.
content_copycd my-workspace
ng generate application my-first-app
Multiple project file structure
The first explicitly generated application goes into the projects folder along with all other projects in
the workspace. Newly generated libraries are also added under projects. When you create projects
this way, the file structure of the workspace is entirely consistent with the structure of
the workspace configuration file, [Link].
my-workspace
… (workspace-wide config files)
projects (generated applications and libraries)
my-first-app --(an explicitly generated application)
… --(application-specific config)
src --(source and support files for application)
my-lib --(a generated library)
… --(library-specific config)
src --(source and support files for library)
Library project files
When you generate a library using the CLI (with a command such as ng generate library my-lib), the
generated files go into the projects/ folder of the workspace. For more information about creating
your own libraries, see Creating Libraries.
Libraries unlike applications have their own [Link] configuration file.
Under the projects/ folder, the my-lib folder contains your library code.
LIBRARY SOURCE
PURPOSE
FILES
Contains your library project's logic and data. Like an application project,
a library project can contain components, services, modules, directives,
src/lib and pipes.
src/[Link] Specifies all files that are exported from your library.
[Link] Configuration file used by ng-packagr for building your library.
[Link] Configures npm package dependencies that are required for this library.
Library-specific TypeScript configuration, including TypeScript and
[Link] Angular template compiler options. See TypeScript Configuration.
LIBRARY SOURCE
PURPOSE
FILES
Library-specific TypeScript configuration that is used when building the
[Link] library in production mode.
TypeScript configuration for the library tests. See TypeScript
[Link] Configuration.
(This article is sourced from: [Link] and the content of the article is
here in case of link breakage.)