docs(router): Move ActivatedRoute example to mini-app (#29755)

PR Close #29755

packages/examples/router/activated-route/BUILD.bazel

@@ -0,0 +1,35 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_devserver")
+
+ng_module(
+    name = "router_activated_route_examples",
+    srcs = glob(
+        ["**/*.ts"],
+    ),
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//packages/core",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+        "//packages/router",
+        "@npm//rxjs",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "@angular/examples/router/activated-route/main",
+    index_html = "//packages/examples:index.html",
+    port = 4200,
+    scripts = [
+        "@npm//node_modules/tslib:tslib.js",
+        "//tools/rxjs:rxjs_umd_modules",
+    ],
+    static_files = [
+        "@npm//node_modules/zone.js:dist/zone.js",
+    ],
+    deps = [":router_activated_route_examples"],
+)

packages/examples/router/activated-route/main.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModuleNgFactory} from './module.ngfactory';
+
+platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);

packages/examples/router/activated-route/module.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+// tslint:disable: no-duplicate-imports
+import {NgModule} from '@angular/core';
+// #docregion activated-route
+import {Component} from '@angular/core';
+// #enddocregion activated-route
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+
+// #docregion activated-route
+import {ActivatedRoute} from '@angular/router';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+// #enddocregion activated-route
+// tslint:enable: no-duplicate-imports
+// #docregion activated-route
+
+@Component({
+  // #enddocregion activated-route
+  selector: 'example-app',
+  template: '...'
+  // #docregion activated-route
+})
+export class ActivatedRouteComponent {
+  constructor(route: ActivatedRoute) {
+    const id: Observable<string> = route.params.pipe(map(p => p.id));
+    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
+    // route.data includes both `data` and `resolve`
+    const user = route.data.pipe(map(d => d.user));
+  }
+}
+// #enddocregion activated-route
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([])],
+  declarations: [ActivatedRouteComponent],
+  bootstrap: [ActivatedRouteComponent]
+})
+export class AppModule {
+}

packages/router/src/router_state.ts

@@ -91,17 +91,8 @@ export function createEmptyStateSnapshot(
  * Contains the information about a route associated with a component loaded in an
  * outlet.  An `ActivatedRoute` can also be used to traverse the router state tree.
  *
- * ```
+ * {@example router/activated-route/module.ts region="activated-route"
- * @Component({...})
+ *     header="activated-route.component.ts" linenums="false"}
- * class MyComponent {
- *   constructor(route: ActivatedRoute) {
- *     const id: Observable<string> = route.params.pipe(map(p => p.id));
- *     const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
- *     // route.data includes both `data` and `resolve`
- *     const user = route.data.pipe(map(d => d.user));
- *   }
- * }
- * ```
  *
  * @publicApi
  */