feature modules (#636)

* permission manager module * permissions module * common module * layout and search modules * trashcan module, lazy load * fix context menu module * lint fix * recent files module * favorites module (lazy) * shared files module (lazy) * shared link module (lazy) * lazy loaading fixes
2025-07-24 17:31:52 +00:00 · 2018-09-17 04:57:56 +01:00
parent f44838ac42
commit eb97b18f95
32 changed files with 2113 additions and 1666 deletions
--- a/docs/extending.md
+++ b/docs/extending.md
@@ -18,23 +18,23 @@ already preconfigured to store external files.

 You can create plugins that change, toggle or extend the following areas:

-* Navigation sidebar links and groups
-* Context Menu
-* Sidebar (aka Info Drawer)
-* Toolbar entries
-  * buttons
-  * menu buttons
-  * separators
-* Viewer actions
-  * "Open With" entries
-  * "More actions" toolbar entries
+- Navigation sidebar links and groups
+- Context Menu
+- Sidebar (aka Info Drawer)
+- Toolbar entries
+  - buttons
+  - menu buttons
+  - separators
+- Viewer actions
+  - "Open With" entries
+  - "More actions" toolbar entries

 Extensions can also:

-* Overwrite or disable extension points of the main application or other plugins
-* Change rules, actions or any visual element
-* Register new application routes based on empty pages or layouts
-* Register new rule evaluators, components, guards, etc.
+- Overwrite or disable extension points of the main application or other plugins
+- Change rules, actions or any visual element
+- Register new application routes based on empty pages or layouts
+- Register new rule evaluators, components, guards, etc.

 ## Format

@@ -64,7 +64,7 @@ Schema allows validating extension files, provides code completion and documenta
 {
  "$schema": "../../extension.schema.json",
  "$name": "app",
-    "$version": "1.0.0",
+  "$version": "1.0.0"
 }
 ```

@@ -79,10 +79,7 @@ the order of declaration defines also the order of loading.
  "$schema": "../../extension.schema.json",
  "$name": "app",
  "$version": "1.0.0",
-    "$references": [
-        "plugin1.json",
-        "plugin2.json"
-    ]
+  "$references": ["plugin1.json", "plugin2.json"]
 }
 ```

@@ -371,7 +368,7 @@ To create a new route, populate the `routes` section with the corresponding entr
      "id": "plugin1.routes.bin",
      "path": "ext/bin",
      "layout": "app.layout.main",
-            "component": "app.components.trashcan"
+      "component": "your.component.id"
    }
  ]
 }
@@ -380,7 +377,7 @@ To create a new route, populate the `routes` section with the corresponding entr
 ### Route properties

 | Name          | Description                                                                            |
-| --- | --- |
+| ------------- | -------------------------------------------------------------------------------------- |
 | **id**        | Unique identifier.                                                                     |
 | **path**      | Runtime path of the route.                                                             |
 | **component** | The main [component](#components) to use for the route.                                |
@@ -409,7 +406,7 @@ You can define the full route schema like in the next example:
    {
      "id": "plugin1.routes.bin",
      "path": "ext/bin",
-            "component": "app.components.trashcan",
+      "component": "your.component.id",
      "layout": "app.layout.main",
      "auth": ["app.auth"],
      "data": {
@@ -430,7 +427,7 @@ Defaults to the `['app.auth']` value.
 Below is the list of the authentication guards main application registers on startup.

 | Key      | Type         | Description                                                               |
-| --- | --- | --- |
+| -------- | ------------ | ------------------------------------------------------------------------- |
 | app.auth | AuthGuardEcm | ADF guard, validates ACS authentication and redirects to Login if needed. |

 You can refer those guards from within your custom extensions,
@@ -442,14 +439,13 @@ You can register any Angular component to participate in extensibility.

 The components are used to create custom:

-* routes and pages
-* toolbar buttons
-* menu items
+- routes and pages
+- toolbar buttons
+- menu items

 | Key                          | Type                      | Description                                                                                                     |
-| --- | --- | --- |
+| ---------------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------- |
 | app.layout.main              | LayoutComponent           | Main application layout with the menu bar, navigation sidebar and main content area to project your components. |
-| app.components.trashcan | TrashcanComponent | Trashcan component, used for demo purposes. |
 | app.toolbar.toggleInfoDrawer | ToggleInfoDrawerComponent | The toolbar button component that toggles Info Drawer for the selection.                                        |
 | app.toolbar.toggleFavorite   | ToggleFavoriteComponent   | The toolbar button component that toggles Favorite state for the selection.                                     |

@@ -464,10 +460,10 @@ besides registering a new one.
 ## Actions

 | Name      | Description                                                                    |
-| --- | --- |
+| --------- | ------------------------------------------------------------------------------ |
 | **id**    | Unique identifier.                                                             |
 | **type**  | Action type, see [Application Actions](#application-actions) for more details. |
-| *payload* | Action payload, a string containing value or expression. |
+| _payload_ | Action payload, a string containing value or expression.                       |

 ```json
 {
@@ -519,20 +515,18 @@ $([1, 2, 1 + 2])                //  [1, 2, 3]
 Application is using NgRx (Reactive libraries for Angular, inspired by Redux).
 To get more information on NxRx please refer to the following resources:

-* [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
+- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)

 Most of the application features are already exposed in the form of NgRx Actions and corresponding Effects.
 You can invoke any action via a single `Store` dispatcher, similar to the following:

 ```typescript
 export class MyComponent {
-
  constructor(private store: Store<AppStore>) {}

  onClick() {
    this.store.dispatch(new SearchByTermAction('*'));
  }
-
 }
 ```

@@ -543,7 +537,6 @@ Another example demonstrates viewing a node from a custom application service AP

 ```typescript
 export class MyService {
-
  constructor(private store: Store<AppStore>) {}

  viewFile(node: MinimalNodeEntity) {
@@ -592,7 +585,7 @@ and perform document list reload if needed.
 Below is the list of public actions types you can use in the plugin definitions as a reference to the action:

 | Name                   | Payload             | Description                                                                                     |
-| --- | --- | --- |
+| ---------------------- | ------------------- | ----------------------------------------------------------------------------------------------- |
 | SET_CURRENT_FOLDER     | Node                | Notify components about currently opened folder.                                                |
 | SET_CURRENT_URL        | string              | Notify components about current browser URL.                                                    |
 | SET_USER_PROFILE       | Person              | Assign current user profile.                                                                    |
@@ -685,15 +678,15 @@ in case you do not need providing extra parameters, or chaining multiple rules t
 You can create new rules by chaining other rules and evaluators.

 | Key        | Description                                                                   |
-| --- | --- |
+| ---------- | ----------------------------------------------------------------------------- |
 | core.every | Evaluates to `true` if all chained rules evaluate to `true`.                  |
 | core.some  | Evaluates to `true` if at least one of the chained rules evaluates to `true`. |
 | core.not   | Evaluates to `true` if all chained rules evaluate to `false`.                 |

 Below is an example of the composite rule definition that combines the following conditions:

-* user has selected a single file
-* user is not using **Trashcan** page
+- user has selected a single file
+- user is not using **Trashcan** page

 ```json
 {
@@ -747,7 +740,7 @@ You can now declare a toolbar button action that is based on the rule above.
        "rules": {
          "visible": "app.toolbar.canViewFile"
        }
-            },
+      }
    ]
  }
 }
@@ -758,7 +751,7 @@ The button will be visible only when the linked rule evaluates to `true`.
 ### Application Evaluators

 | Key                             | Description                                                  |
-| --- | --- |
+| ------------------------------- | ------------------------------------------------------------ |
 | app.selection.canDelete         | User has permission to delete selected node(s).              |
 | app.selection.canDownload       | User can download selected node(s).                          |
 | app.selection.notEmpty          | At least one node is selected.                               |
@@ -787,7 +780,7 @@ You can also negate any rule by utilizing a `!` prefix:
 </p>

 | Key                               | Description                                             |
-| --- | --- |
+| --------------------------------- | ------------------------------------------------------- |
 | app.navigation.folder.canCreate   | User can create content in the currently opened folder. |
 | app.navigation.folder.canUpload   | User can upload content to the currently opened folder. |
 | app.navigation.isTrashcan         | User is using **Trashcan** page.                        |
@@ -812,9 +805,9 @@ on how to register your own entries to be re-used at runtime.

 The rule in the example below evaluates to `true` if all the conditions are met:

-* user has selected node(s)
-* user is not using **Trashcan** page
-* user is not using **Libraries** page
+- user has selected node(s)
+- user is not using **Trashcan** page
+- user is not using **Libraries** page

 ```json
 {
@@ -842,12 +835,12 @@ This section contains application-specific features that may vary depending on t

 The ACA supports the following set of extension points:

-* Create menu
-* Navigation Bar
-* Toolbar
-* Context Menu
-* Viewer
-* Sidebar (aka Info Drawer)
+- Create menu
+- Navigation Bar
+- Toolbar
+- Context Menu
+- Viewer
+- Sidebar (aka Info Drawer)

 All the customisations are stored in the `features` section of the configuration file:

@@ -981,10 +974,10 @@ export interface NavBarLinkRef {

 You extensions can perform the following actions at runtime:

-* Register new groups with links
-* Insert new links into existing groups
-* Update properties of the existing links
-* Disable existing links or entire groups
+- Register new groups with links
+- Insert new links into existing groups
+- Update properties of the existing links
+- Disable existing links or entire groups

 ```json
 {
@@ -1031,9 +1024,9 @@ You extensions can perform the following actions at runtime:

 You can provide the following customisations for the Sidebar (aka Info Drawer) component:

-* Add extra tabs with custom components
-* Disable tabs from the main application or extensions
-* Replace content or properties of existing tabs
+- Add extra tabs with custom components
+- Disable tabs from the main application or extensions
+- Replace content or properties of existing tabs

 ```json
 {
@@ -1062,8 +1055,8 @@ You can provide the following customisations for the Sidebar (aka Info Drawer) c

 The example above renders two tabs:

-* `Properties` tab that references `app.components.tabs.metadata` component
-* `Comments` tab that references `app.components.tabs.comments` component
+- `Properties` tab that references `app.components.tabs.metadata` component
+- `Comments` tab that references `app.components.tabs.comments` component

 All corresponding components must be registered for runtime use.

@@ -1075,7 +1068,7 @@ on how to register your own entries to be re-used at runtime.
 #### Tab properties

 | Name          | Description                                                 |
-| --- | --- |
+| ------------- | ----------------------------------------------------------- |
 | **id**        | Unique identifier.                                          |
 | **component** | The main [component](#components) to use for the route.     |
 | **title**     | Tab title or resource key.                                  |
@@ -1088,7 +1081,7 @@ on how to register your own entries to be re-used at runtime.
 Every component you assign for the tab content receives the following additional properties at runtime:

 | Name | Type                   | Description                 |
-| --- | --- | --- |
+| ---- | ---------------------- | --------------------------- |
 | node | MinimalNodeEntryEntity | Node entry to be displayed. |

 ### Toolbar
@@ -1132,13 +1125,13 @@ The toolbar extension point is represented by an array of Content Action referen

 The content actions are applied to the toolbars for the following Views:

-* Personal Files
-* Libraries
-* Shared
-* Recent Files
-* Favorites
-* Trash
-* Search Results
+- Personal Files
+- Libraries
+- Shared
+- Recent Files
+- Favorites
+- Trash
+- Search Results

 ### Context Menu

@@ -1164,7 +1157,7 @@ You may want to define a list of content actions backed by Rules and wired with
        "rules": {
          "visible": "app.toolbar.canDownload"
        }
-            },
+      }
    ]
  }
 }
@@ -1194,9 +1187,9 @@ declared in the `rules` section:

 Viewer component in ACA supports the following extension points:

-* Content Viewers
-* `More` toolbar actions
-* `Open With` actions
+- Content Viewers
+- `More` toolbar actions
+- `Open With` actions

 ```json
 {
@@ -1249,7 +1242,7 @@ and `DOCX` view with the `comments` tab.
 Every custom component receives the following properties at runtime:

 | Name      | Type                   | Description                 |
-| --- | --- | --- |
+| --------- | ---------------------- | --------------------------- |
 | node      | MinimalNodeEntryEntity | Node entry to be displayed. |
 | url       | string                 | File content URL.           |
 | extension | string                 | File name extension.        |
@@ -1304,7 +1297,7 @@ and invoke it from the custom `Open With` menu entry called `Snackbar`.
      "id": "plugin1.actions.info",
      "type": "SNACKBAR_INFO",
      "payload": "I'm a nice little popup raised by extension."
-        },
+    }
  ],

  "features": {
@@ -1451,10 +1444,10 @@ on how to register your own entries to be re-used at runtime.

 In this tutorial, we are going to implement the following features:

-* update the **Trashcan** component to receive and log route parameters
-* create a new route that points to the **Trashcan** component and uses main layout
-* create an action reference that allows redirecting to the new route
-* create a button in the **New** menu that invokes an action
+- update the **Trashcan** component to receive and log route parameters
+- create a new route that points to the **Trashcan** component and uses main layout
+- create an action reference that allows redirecting to the new route
+- create a button in the **New** menu that invokes an action

 Update `src/app/components/trashcan/trashcan.component.ts` and append the following code to the `ngOnInit` body:

@@ -1495,7 +1488,7 @@ Next, add a new route definition as in the example below:
    {
      "id": "custom.routes.trashcan",
      "path": "ext/trashcan/:nodeId",
-            "component": "app.components.trashcan",
+      "component": "your.component.id",
      "layout": "app.layout.main",
      "auth": ["app.auth"]
    }
@@ -1587,9 +1580,9 @@ ng generate library my-extension
 You will get a new project in the `projects/my-extensions` folder.
 By default, the project contains at least the following content:

-* Example component `my-extension.component.ts`
-* Example service `my-extension.service.ts`
-* Angular Module example `my-extension.module.ts`
+- Example component `my-extension.component.ts`
+- Example service `my-extension.service.ts`
+- Angular Module example `my-extension.module.ts`

 Next, build the project with the following command:

--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -39,26 +39,13 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';

-import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 import { FilesComponent } from './components/files/files.component';
-import { FavoritesComponent } from './components/favorites/favorites.component';
 import { LibrariesComponent } from './components/libraries/libraries.component';
-import { RecentFilesComponent } from './components/recent-files/recent-files.component';
-import { SharedFilesComponent } from './components/shared-files/shared-files.component';
-import { TrashcanComponent } from './components/trashcan/trashcan.component';
-import { LayoutComponent } from './components/layout/layout.component';
-import { SidenavViewsManagerDirective } from './components/layout/sidenav-views-manager.directive';
-import { CurrentUserComponent } from './components/current-user/current-user.component';
-import { SearchInputComponent } from './components/search/search-input/search-input.component';
-import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component';
-import { LocationLinkComponent } from './components/location-link/location-link.component';
-import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
 import { LibraryDialogComponent } from './dialogs/library/library.dialog';
 import { ContentManagementService } from './services/content-management.service';
 import { NodeActionsService } from './services/node-actions.service';
 import { NodePermissionService } from './services/node-permission.service';
-import { SearchResultsComponent } from './components/search/search-results/search-results.component';
 import { ProfileResolver } from './services/profile.resolver';
 import { ExperimentalGuard } from './services/experimental-guard.service';

@@ -67,9 +54,6 @@ import { MaterialModule } from './material.module';
 import { ContentApiService } from './services/content-api.service';
 import { AppExtensionsModule } from './extensions.module';
 import { CoreExtensionsModule } from './extensions/core.extensions.module';
-import { SearchResultsRowComponent } from './components/search/search-results-row/search-results-row.component';
-import { NodePermissionsDialogComponent } from './dialogs/node-permissions/node-permissions.dialog';
-import { PermissionsManagerComponent } from './components/permission-manager/permissions-manager.component';
 import { AppRouteReuseStrategy } from './app.routes.strategy';
 import { AppInfoDrawerModule } from './components/info-drawer/info.drawer.module';
 import { DirectivesModule } from './directives/directives.module';
@@ -78,6 +62,13 @@ import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { AppToolbarModule } from './components/toolbar/toolbar.module';
 import { AppCreateMenuModule } from './components/create-menu/create-menu.module';
 import { AppSidenavModule } from './components/sidenav/sidenav.module';
+import { AppPermissionsModule } from './components/permissions/permissions.module';
+import { AppCommonModule } from './components/common/common.module';
+import { AppLayoutModule } from './components/layout/layout.module';
+import { AppCurrentUserModule } from './components/current-user/current-user.module';
+import { AppSearchInputModule } from './components/search/search-input.module';
+import { AppSearchResultsModule } from './components/search/search-results.module';
+import { AppLoginModule } from './components/login/login.module';

@NgModule({
  imports: [
@@ -96,36 +87,26 @@ import { AppSidenavModule } from './components/sidenav/sidenav.module';
    CoreExtensionsModule.forRoot(),
    ExtensionsModule.forRoot(),
    AppExtensionsModule,
-
+    AppLoginModule,
+    AppCommonModule,
+    AppLayoutModule,
+    AppCurrentUserModule,
    DirectivesModule,
    ContextMenuModule.forRoot(),
    AppInfoDrawerModule,
    AppToolbarModule,
    AppSidenavModule,
-    AppCreateMenuModule
+    AppCreateMenuModule,
+    AppPermissionsModule,
+    AppSearchInputModule,
+    AppSearchResultsModule
  ],
  declarations: [
    AppComponent,
-    GenericErrorComponent,
-    LayoutComponent,
-    SidenavViewsManagerDirective,
-    CurrentUserComponent,
-    SearchInputComponent,
-    SearchInputControlComponent,
    FilesComponent,
-    FavoritesComponent,
    LibrariesComponent,
-    RecentFilesComponent,
-    SharedFilesComponent,
-    TrashcanComponent,
-    LocationLinkComponent,
-    SearchResultsRowComponent,
    NodeVersionsDialogComponent,
-    LibraryDialogComponent,
-    NodePermissionsDialogComponent,
-    PermissionsManagerComponent,
-    SearchResultsComponent,
-    SharedLinkViewComponent
+    LibraryDialogComponent
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },
@@ -145,11 +126,7 @@ import { AppSidenavModule } from './components/sidenav/sidenav.module';
    ExperimentalGuard,
    ContentApiService
  ],
-  entryComponents: [
-    LibraryDialogComponent,
-    NodeVersionsDialogComponent,
-    NodePermissionsDialogComponent
-  ],
+  entryComponents: [LibraryDialogComponent, NodeVersionsDialogComponent],
  bootstrap: [AppComponent]
 })
 export class AppModule {}
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -25,26 +25,18 @@

 import { Routes } from '@angular/router';
 import { AuthGuardEcm } from '@alfresco/adf-core';
-import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
-
 import { LayoutComponent } from './components/layout/layout.component';
-
 import { FilesComponent } from './components/files/files.component';
-import { FavoritesComponent } from './components/favorites/favorites.component';
 import { LibrariesComponent } from './components/libraries/libraries.component';
-import { RecentFilesComponent } from './components/recent-files/recent-files.component';
-import { SharedFilesComponent } from './components/shared-files/shared-files.component';
-import { TrashcanComponent } from './components/trashcan/trashcan.component';
-
-import { GenericErrorComponent } from './components/generic-error/generic-error.component';
+import { GenericErrorComponent } from './components/common/generic-error/generic-error.component';
 import { SearchResultsComponent } from './components/search/search-results/search-results.component';
-
 import { ProfileResolver } from './services/profile.resolver';
+import { LoginComponent } from './components/login/login.component';

 export const APP_ROUTES: Routes = [
  {
    path: 'login',
-    loadChildren: 'src/app/components/login/login.module#AppLoginModule',
+    component: LoginComponent,
    data: {
      title: 'APP.SIGN_IN'
    }
@@ -52,17 +44,12 @@ export const APP_ROUTES: Routes = [
  {
    path: 'settings',
    loadChildren:
-      'src/app/components/settings/settings.module#AppSettingsModule',
-    data: {
-      title: 'Settings'
-    }
+      'src/app/components/settings/settings.module#AppSettingsModule'
  },
  {
    path: 'preview/s/:id',
-    component: SharedLinkViewComponent,
-    data: {
-      title: 'APP.PREVIEW.TITLE'
-    }
+    loadChildren:
+      'src/app/components/shared-link-view/shared-link-view.module#AppSharedLinkViewModule'
  },
  {
    path: '',
@@ -76,16 +63,11 @@ export const APP_ROUTES: Routes = [
      },
      {
        path: 'favorites',
-        data: {
-          sortingPreferenceKey: 'favorites'
-        },
        children: [
          {
            path: '',
-            component: FavoritesComponent,
-            data: {
-              title: 'APP.BROWSE.FAVORITES.TITLE'
-            }
+            loadChildren:
+              'src/app/components/favorites/favorites.module#AppFavoritesModule'
          },
          {
            path: 'preview/:nodeId',
@@ -101,15 +83,13 @@ export const APP_ROUTES: Routes = [
      },
      {
        path: 'libraries',
-        data: {
-          sortingPreferenceKey: 'libraries'
-        },
        children: [
          {
            path: '',
            component: LibrariesComponent,
            data: {
-              title: 'APP.BROWSE.LIBRARIES.TITLE'
+              title: 'APP.BROWSE.LIBRARIES.TITLE',
+              sortingPreferenceKey: 'libraries'
            }
          },
          {
@@ -183,10 +163,8 @@ export const APP_ROUTES: Routes = [
        children: [
          {
            path: '',
-            component: RecentFilesComponent,
-            data: {
-              title: 'APP.BROWSE.RECENT.TITLE'
-            }
+            loadChildren:
+              'src/app/components/recent-files/recent-files.module#AppRecentFilesModule'
          },
          {
            path: 'preview/:nodeId',
@@ -202,16 +180,11 @@ export const APP_ROUTES: Routes = [
      },
      {
        path: 'shared',
-        data: {
-          sortingPreferenceKey: 'shared-files'
-        },
        children: [
          {
            path: '',
-            component: SharedFilesComponent,
-            data: {
-              title: 'APP.BROWSE.SHARED.TITLE'
-            }
+            loadChildren:
+              'src/app/components/shared-files/shared-files.module#AppSharedFilesModule'
          },
          {
            path: 'preview/:nodeId',
@@ -227,18 +200,12 @@ export const APP_ROUTES: Routes = [
      },
      {
        path: 'trashcan',
-        component: TrashcanComponent,
-        data: {
-          title: 'APP.BROWSE.TRASHCAN.TITLE',
-          sortingPreferenceKey: 'trashcan'
-        }
+        loadChildren:
+          'src/app/components/trashcan/trashcan.module#AppTrashcanModule'
      },
      {
        path: 'about',
-        loadChildren: 'src/app/components/about/about.module#AboutModule',
-        data: {
-          title: 'APP.BROWSE.ABOUT.TITLE'
-        }
+        loadChildren: 'src/app/components/about/about.module#AboutModule'
      },
      {
        path: 'search',
--- a/src/app/components/about/about.module.ts
+++ b/src/app/components/about/about.module.ts
@@ -32,7 +32,10 @@ import { CoreModule } from '@alfresco/adf-core';
 const routes: Routes = [
  {
    path: '',
-    component: AboutComponent
+    component: AboutComponent,
+    data: {
+      title: 'APP.BROWSE.ABOUT.TITLE'
+    }
  }
 ];

--- a/src/app/components/common/common.module.ts
+++ b/src/app/components/common/common.module.ts
@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GenericErrorComponent } from './generic-error/generic-error.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { LocationLinkComponent } from './location-link/location-link.component';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild()],
+  declarations: [GenericErrorComponent, LocationLinkComponent],
+  exports: [GenericErrorComponent, LocationLinkComponent]
+})
+export class AppCommonModule {}
--- a/src/app/components/common/generic-error/generic-error.component.html
+++ b/src/app/components/common/generic-error/generic-error.component.html
--- a/src/app/components/common/generic-error/generic-error.component.theme.scss
+++ b/src/app/components/common/generic-error/generic-error.component.theme.scss
--- a/src/app/components/common/generic-error/generic-error.component.ts
+++ b/src/app/components/common/generic-error/generic-error.component.ts
--- a/src/app/components/common/location-link/location-link.component.ts
+++ b/src/app/components/common/location-link/location-link.component.ts
@@ -35,9 +35,9 @@ import { PathInfo, MinimalNodeEntity } from 'alfresco-js-api';
 import { Observable, BehaviorSubject, of } from 'rxjs';

 import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
-import { NavigateToParentFolder } from '../../store/actions';
-import { ContentApiService } from '../../services/content-api.service';
+import { AppStore } from '../../../store/states/app.state';
+import { NavigateToParentFolder } from '../../../store/actions';
+import { ContentApiService } from '../../../services/content-api.service';

@Component({
  selector: 'aca-location-link',
--- a/src/app/components/context-menu/context-menu.module.ts
+++ b/src/app/components/context-menu/context-menu.module.ts
@@ -30,7 +30,6 @@ import {
  MatIconModule,
  MatButtonModule
 } from '@angular/material';
-import { BrowserModule } from '@angular/platform-browser';
 import { CoreModule } from '@alfresco/adf-core';
 import { CoreExtensionsModule } from '../../extensions/core.extensions.module';

@@ -47,7 +46,6 @@ import { OutsideEventDirective } from './context-menu-outside-event.directive';
    MatListModule,
    MatIconModule,
    MatButtonModule,
-    BrowserModule,
    CoreExtensionsModule.forChild(),
    CoreModule.forChild(),
    ExtensionsModule.forChild()
--- a/src/app/components/current-user/current-user.module.ts
+++ b/src/app/components/current-user/current-user.module.ts
@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { CurrentUserComponent } from './current-user.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), RouterModule],
+  declarations: [CurrentUserComponent],
+  exports: [CurrentUserComponent]
+})
+export class AppCurrentUserModule {}
--- a/src/app/components/favorites/favorites.module.ts
+++ b/src/app/components/favorites/favorites.module.ts
@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { FavoritesComponent } from './favorites.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { ContextMenuModule } from '../context-menu/context-menu.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FavoritesComponent,
+    data: {
+      title: 'APP.BROWSE.FAVORITES.TITLE',
+      sortingPreferenceKey: 'favorites'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    ContentModule.forChild(),
+    DirectivesModule,
+    AppCommonModule,
+    AppToolbarModule,
+    ContextMenuModule.forChild(),
+    AppInfoDrawerModule
+  ],
+  declarations: [FavoritesComponent],
+  exports: [FavoritesComponent]
+})
+export class AppFavoritesModule {}
--- a/src/app/components/layout/layout.module.ts
+++ b/src/app/components/layout/layout.module.ts
@@ -0,0 +1,52 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { LayoutComponent } from './layout.component';
+import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { RouterModule } from '@angular/router';
+import { AppSidenavModule } from '../sidenav/sidenav.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppCurrentUserModule } from '../current-user/current-user.module';
+import { AppSearchInputModule } from '../search/search-input.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    AppCommonModule,
+    AppSidenavModule,
+    AppCurrentUserModule,
+    AppSearchInputModule
+  ],
+  declarations: [LayoutComponent, SidenavViewsManagerDirective],
+  exports: [LayoutComponent]
+})
+export class AppLayoutModule {}
--- a/src/app/components/login/login.module.ts
+++ b/src/app/components/login/login.module.ts
@@ -27,17 +27,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
 import { LoginComponent } from './login.component';
-import { Routes, RouterModule } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LoginComponent
-  }
-];

@NgModule({
-  imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)],
+  imports: [CommonModule, CoreModule.forChild()],
  declarations: [LoginComponent]
 })
 export class AppLoginModule {}
--- a/src/app/components/permissions/permission-dialog/node-permissions.dialog.html
+++ b/src/app/components/permissions/permission-dialog/node-permissions.dialog.html
@@ -1,6 +1,6 @@
 <header mat-dialog-title>{{'PERMISSIONS.DIALOG.TITLE' | translate}}</header>
 <section mat-dialog-content>
-    <aca-permissions-manager [nodeId]="nodeId"></aca-permissions-manager>
+    <app-permission-manager [nodeId]="nodeId"></app-permission-manager>
 </section>
 <footer mat-dialog-actions>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{'PERMISSIONS.DIALOG.CLOSE' | translate}}</button>
--- a/src/app/components/permissions/permission-dialog/node-permissions.dialog.ts
+++ b/src/app/components/permissions/permission-dialog/node-permissions.dialog.ts
--- a/src/app/components/permissions/permission-manager/permission-manager.component.html
+++ b/src/app/components/permissions/permission-manager/permission-manager.component.html
--- a/src/app/components/permissions/permission-manager/permission-manager.component.theme.scss
+++ b/src/app/components/permissions/permission-manager/permission-manager.component.theme.scss
@@ -1,4 +1,4 @@
-@mixin aca-permissions-manager-theme($theme) {
+@mixin app-permission-manager-theme($theme) {
  $foreground: map-get($theme, foreground);
  $accent: map-get($theme, accent);

--- a/src/app/components/permissions/permission-manager/permission-manager.component.ts
+++ b/src/app/components/permissions/permission-manager/permission-manager.component.ts
@@ -23,22 +23,22 @@
 * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
 */

-import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import {
  NodePermissionDialogService,
  PermissionListComponent
 } from '@alfresco/adf-content-services';
-import { MinimalNodeEntryEntity } from 'alfresco-js-api';
-import { Store } from '@ngrx/store';
-import { AppStore } from '../../store/states/app.state';
-import { SnackbarErrorAction } from '../../store/actions/snackbar.actions';
-import { NodePermissionsDialogComponent } from '../../dialogs/node-permissions/node-permissions.dialog';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material';
-import { ContentApiService } from '../../services/content-api.service';
+import { Store } from '@ngrx/store';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+import { ContentApiService } from '../../../services/content-api.service';
+import { SnackbarErrorAction } from '../../../store/actions/snackbar.actions';
+import { AppStore } from '../../../store/states/app.state';
+import { NodePermissionsDialogComponent } from '../permission-dialog/node-permissions.dialog';

@Component({
-  selector: 'aca-permissions-manager',
-  templateUrl: './permissions-manager.component.html'
+  selector: 'app-permission-manager',
+  templateUrl: './permission-manager.component.html'
 })
 export class PermissionsManagerComponent implements OnInit {
  @ViewChild('permissionList')
--- a/src/app/components/permissions/permissions.module.ts
+++ b/src/app/components/permissions/permissions.module.ts
@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { NodePermissionsDialogComponent } from './permission-dialog/node-permissions.dialog';
+import { PermissionsManagerComponent } from './permission-manager/permission-manager.component';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild()],
+  declarations: [PermissionsManagerComponent, NodePermissionsDialogComponent],
+  exports: [PermissionsManagerComponent, NodePermissionsDialogComponent],
+  entryComponents: [NodePermissionsDialogComponent]
+})
+export class AppPermissionsModule {}
--- a/src/app/components/recent-files/recent-files.module.ts
+++ b/src/app/components/recent-files/recent-files.module.ts
@@ -0,0 +1,63 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { ContextMenuModule } from '../context-menu/context-menu.module';
+import { RecentFilesComponent } from './recent-files.component';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RecentFilesComponent,
+    data: {
+      title: 'APP.BROWSE.RECENT.TITLE'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    ContentModule.forChild(),
+    DirectivesModule,
+    AppCommonModule,
+    AppToolbarModule,
+    ContextMenuModule.forChild(),
+    AppInfoDrawerModule
+  ],
+  declarations: [RecentFilesComponent],
+  exports: [RecentFilesComponent]
+})
+export class AppRecentFilesModule {}
--- a/src/app/components/search/search-input.module.ts
+++ b/src/app/components/search/search-input.module.ts
@@ -0,0 +1,38 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { SearchInputComponent } from './search-input/search-input.component';
+import { SearchInputControlComponent } from './search-input-control/search-input-control.component';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), ContentModule.forChild()],
+  declarations: [SearchInputComponent, SearchInputControlComponent],
+  exports: [SearchInputComponent, SearchInputControlComponent]
+})
+export class AppSearchInputModule {}
--- a/src/app/components/search/search-results.module.ts
+++ b/src/app/components/search/search-results.module.ts
@@ -0,0 +1,48 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { SearchResultsComponent } from './search-results/search-results.component';
+import { SearchResultsRowComponent } from './search-results-row/search-results-row.component';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { AppCommonModule } from '../common/common.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    ContentModule.forChild(),
+    AppCommonModule,
+    AppInfoDrawerModule,
+    AppToolbarModule
+  ],
+  declarations: [SearchResultsComponent, SearchResultsRowComponent],
+  exports: [SearchResultsComponent, SearchResultsRowComponent]
+})
+export class AppSearchResultsModule {}
--- a/src/app/components/settings/settings.module.ts
+++ b/src/app/components/settings/settings.module.ts
@@ -32,7 +32,10 @@ import { CoreModule } from '@alfresco/adf-core';
 const routes: Routes = [
  {
    path: '',
-    component: SettingsComponent
+    component: SettingsComponent,
+    data: {
+      title: 'Settings'
+    }
  }
 ];

--- a/src/app/components/shared-files/shared-files.module.ts
+++ b/src/app/components/shared-files/shared-files.module.ts
@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { SharedFilesComponent } from './shared-files.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { ContextMenuModule } from '../context-menu/context-menu.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SharedFilesComponent,
+    data: {
+      title: 'APP.BROWSE.SHARED.TITLE',
+      sortingPreferenceKey: 'shared-files'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    ContentModule.forChild(),
+    DirectivesModule,
+    AppCommonModule,
+    AppToolbarModule,
+    ContextMenuModule.forChild(),
+    AppInfoDrawerModule
+  ],
+  declarations: [SharedFilesComponent],
+  exports: [SharedFilesComponent]
+})
+export class AppSharedFilesModule {}
--- a/src/app/components/shared-link-view/shared-link-view.module.ts
+++ b/src/app/components/shared-link-view/shared-link-view.module.ts
@@ -0,0 +1,59 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { SharedLinkViewComponent } from './shared-link-view.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule, Routes } from '@angular/router';
+import { DirectivesModule } from '../../directives/directives.module';
+import { AppCommonModule } from '../common/common.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { AppInfoDrawerModule } from '../info-drawer/info.drawer.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SharedLinkViewComponent,
+    data: {
+      title: 'APP.PREVIEW.TITLE'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    DirectivesModule,
+    AppCommonModule,
+    AppToolbarModule,
+    AppInfoDrawerModule
+  ],
+  declarations: [SharedLinkViewComponent],
+  exports: [SharedLinkViewComponent]
+})
+export class AppSharedLinkViewModule {}
--- a/src/app/components/trashcan/trashcan.module.ts
+++ b/src/app/components/trashcan/trashcan.module.ts
@@ -0,0 +1,62 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { TrashcanComponent } from './trashcan.component';
+import { Routes, RouterModule } from '@angular/router';
+import { ContentModule } from '@alfresco/adf-content-services';
+import { AppCommonModule } from '../common/common.module';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+import { DirectivesModule } from '../../directives/directives.module';
+import { ContextMenuModule } from '../context-menu/context-menu.module';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TrashcanComponent,
+    data: {
+      title: 'APP.BROWSE.TRASHCAN.TITLE',
+      sortingPreferenceKey: 'trashcan'
+    }
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule.forChild(routes),
+    ContentModule.forChild(),
+    DirectivesModule,
+    AppCommonModule,
+    AppToolbarModule,
+    ContextMenuModule.forChild()
+  ],
+  declarations: [TrashcanComponent],
+  exports: [TrashcanComponent]
+})
+export class AppTrashcanModule {}
--- a/src/app/extensions/core.extensions.module.ts
+++ b/src/app/extensions/core.extensions.module.ts
@@ -27,7 +27,6 @@ import { AuthGuardEcm, CoreModule } from '@alfresco/adf-core';
 import { CommonModule } from '@angular/common';
 import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { LayoutComponent } from '../components/layout/layout.component';
-import { TrashcanComponent } from '../components/trashcan/trashcan.component';
 import * as app from './evaluators/app.evaluators';
 import * as nav from './evaluators/navigation.evaluators';
 import { AppExtensionService } from './extension.service';
@@ -70,7 +69,6 @@ export class CoreExtensionsModule {
  constructor(extensions: ExtensionService) {
    extensions.setComponents({
      'app.layout.main': LayoutComponent,
-      'app.components.trashcan': TrashcanComponent,
      'app.components.tabs.metadata': MetadataTabComponent,
      'app.components.tabs.comments': CommentsTabComponent,
      'app.components.tabs.versions': VersionsTabComponent,
--- a/src/app/services/content-management.service.ts
+++ b/src/app/services/content-management.service.ts
@@ -58,9 +58,9 @@ import { ContentApiService } from './content-api.service';
 import { sharedUrl } from '../store/selectors/app.selectors';
 import { NodeActionsService } from './node-actions.service';
 import { TranslationService } from '@alfresco/adf-core';
-import { NodePermissionsDialogComponent } from '../dialogs/node-permissions/node-permissions.dialog';
 import { NodeVersionsDialogComponent } from '../dialogs/node-versions/node-versions.dialog';
 import { take, map, tap, mergeMap, catchError } from 'rxjs/operators';
+import { NodePermissionsDialogComponent } from '../components/permissions/permission-dialog/node-permissions.dialog';

 interface RestoredNode {
  status: number;
--- a/src/app/ui/custom-theme.scss
+++ b/src/app/ui/custom-theme.scss
@@ -3,11 +3,11 @@

@import '../components/sidenav/sidenav.component.theme';
@import '../components/about/about.component.theme';
-@import '../components/generic-error/generic-error.component.theme';
+@import '../components/common/generic-error/generic-error.component.theme';
@import '../components/search/search-input/search-input.component.theme';
@import '../components/settings/settings.component.theme';
@import '../components/current-user/current-user.component.theme';
-@import '../components/permission-manager/permissions-manager.component.theme';
+@import '../components/permissions/permission-manager/permission-manager.component.theme';
@import '../components/context-menu/context-menu.component.theme';
@import '../dialogs/node-versions/node-versions.dialog.theme';

@@ -87,7 +87,7 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
  @include aca-layout-theme($theme);
  @include aca-search-input-theme($theme);
  @include aca-generic-error-theme($theme);
-  @include aca-permissions-manager-theme($theme);
+  @include app-permission-manager-theme($theme);
  @include aca-node-versions-dialog-theme($theme);
  @include aca-settings-theme($theme);
  @include snackbar-theme($theme);
--- a/src/assets/app.extensions.json
+++ b/src/assets/app.extensions.json
@@ -2,12 +2,7 @@
  "$schema": "../../extension.schema.json",
  "$name": "app",
  "$version": "1.0.0",
-    "$references": [
-        "plugin1.json",
-        "plugin2.json",
-        "dev.tools.json",
-        "my-extension.json"
-    ],
+  "$references": ["plugin1.json", "dev.tools.json", "my-extension.json"],

  "rules": [
    {
--- a/src/assets/plugins/plugin2.json
+++ b/src/assets/plugins/plugin2.json
@@ -1,42 +0,0 @@
-{
-    "$schema": "../../../extension.schema.json",
-    "$version": "1.0.0",
-    "$name": "plugin2",
-    "$description": "demo plugin",
-
-    "routes": [
-        {
-            "id": "plugin2.routes.about",
-            "path": "ext/bin",
-            "component": "app.components.trashcan",
-            "data": {
-                "title": "Custom Trashcan"
-            }
-        }
-    ],
-
-    "features": {
-        "navbar": [
-            {
-                "id": "plugin2.navbar.group1",
-                "disabled": true,
-                "items": [
-                    {
-                        "id": "plugin2.navbar.group1.link1",
-                        "icon": "build",
-                        "title": "Trashcan (native)",
-                        "description": "Uses native application route",
-                        "route": "trashcan"
-                    },
-                    {
-                        "id": "plugin2.navbar.group1.link2",
-                        "icon": "build",
-                        "title": "Trashcan (custom)",
-                        "description": "Uses custom defined route",
-                        "route": "plugin2.routes.about"
-                    }
-                ]
-            }
-        ]
-    }
-}