4 |
5 | # Angular 2 RxJS Chat [](https://gitter.im/ng-book/ng-book?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
6 |
7 | > An Angular 2 chat app using [Angular 2](https://angular.io/), [RxJS](https://github.com/Reactive-Extensions/RxJS), [Angular CLI](https://github.com/angular/angular-cli), [Webpack](https://webpack.github.io/), [TypeScript](http://www.typescriptlang.org/), Services, Injectables, [Karma](http://karma-runner.github.io/), Forms, and [tslint](http://palantir.github.io/tslint/) by the [ng-book 2 team](https://ng-book.com/2)
8 |
9 | This repo shows an example chat application using RxJS and Angular 2. The goal is to show how to use the Observables data architecture pattern within Angular 2. It also features:
10 |
11 | * Angular CLI, which configures Webpack with TypeScript, Karma, and tslint
12 | * Writing async components that work with RxJS
13 | * How to write injectable services in Angular 2
14 | * And much more
15 |
16 |
17 |
18 |
19 |
20 | > Try the live [demo here](http://rxjs.ng-book.com)
21 |
22 | ## Quick start
23 |
24 | ```bash
25 | # clone the repo
26 | git clone https://github.com/ng-book/angular2-rxjs-chat.git
27 |
28 | # change into the repo directory
29 | cd angular2-rxjs-chat
30 |
31 | # install
32 | npm install
33 |
34 | # run
35 | npm start
36 | ```
37 |
38 | Then visit [http://localhost:4200](http://localhost:4200) in your browser.
39 |
40 | ## Architecture
41 |
42 | The app has three models:
43 |
44 | * [`Message`](src/app/message/message.model.ts) - holds individual chat messages
45 | * [`Thread`](src/app/thread/thread.model.ts) - holds metadata for a group of `Message`s
46 | * [`User`](src/app/user/user.model.ts) - holds data about an individual user
47 |
48 |
49 |
50 |
51 |
52 | And there are three services, one for each model:
53 |
54 | * [`MessagesService`](src/app/message/messages.service.ts) - manages streams of `Message`s
55 | * [`ThreadsService`](src/app/thread/threads.service.ts) - manages streams of `Thread`s
56 | * [`UserService`](src/app/user/users.service.ts) - manages a stream of the current `User`
57 |
58 | There are also three top-level components:
59 |
60 | * [`ChatNavBar`](src/app/chat-nav-bar/chat-nav-bar.component.ts) - for the top navigation bar and unread messages count
61 | * [`ChatThreads`](src/app/chat-threads/chat-threads.component.ts) - for our clickable list of threads
62 | * [`ChatWindow`](src/app/chat-window/chat-window.component.ts) - where we hold our current conversation
63 |
64 |
65 |
66 |
67 |
68 | ## Services Manage Observables
69 |
70 | Each service publishes data as RxJS streams. The service clients subscribe to these streams to be notified of changes.
71 |
72 | The `MessagesService` is the backbone of the application. All new messages are added to the `newMessages` stream and, more or less, all streams are derived from listening to `newMessages`. Even the `Thread`s exposed by the `ThreadsService` are created by listening to the stream of `Message`s.
73 |
74 | There are several other helpful streams that the services expose:
75 |
76 | For example, the `MessagesService` exposes the `messages` stream which is a stream of _the list of the all current messages_. That is, `messages` emits an array for each record.
77 |
78 | Similarly, the `ThreadsService` exposes a list of the chronologically-ordered threads in `orderedThreads` and so on.
79 |
80 | Understanding how RxJS streams can be tricky, but this code is heavily commented. One strategy to grokking this code is to start at the components and see how they use the services. The other strategy is to get a copy of [ng-book 2](https://ng-book.com/2) where we explain each line in detail over ~60 pages.
81 |
82 | ## Bots
83 |
84 | This app implements a few simple chat bots. For instance:
85 |
86 | * Echo bot
87 | * Reversing bot
88 | * Waiting bot
89 |
90 |
91 |
92 |
93 |
94 | ## Detailed Installation
95 |
96 | **Step 1: Install Node.js from the [Node Website](http://nodejs.org/).**
97 |
98 | We recommend Node version 4.1 or above. You can check your node version by running this:
99 |
100 | ```bash
101 | $ node -v
102 | vv4.1...
103 | ```
104 |
105 | **Step 2: Install Dependencies**
106 |
107 | ```bash
108 | npm install
109 | ```
110 |
111 | ## Running the App
112 |
113 | ```bash
114 | npm run go
115 | ```
116 |
117 | Then visit [http://localhost:4200](http://localhost:4200) in your browser.
118 |
119 | ## Running the Tests
120 |
121 | You can run the unit tests with:
122 |
123 | ```bash
124 | npm run test
125 | ```
126 |
127 | ## Future Plans
128 |
129 | There are two big changes we plan to make to this repo:
130 |
131 | ### 1. Add HTTP Requests
132 |
133 | Currently the bots are all client-side and there are no HTTP requests involved in the chats.
134 |
135 | We will move the chat bots to a server and integrate API requests into this project once the Angular 2 HTTP client development has settled down.
136 |
137 | ### 2. `ON_PUSH` change detection
138 |
139 | Because we're using observables, we can improve the performance of these components by using `ON_PUSH` change detection. Again, once Angular 2 development stabilizes, we'll be making this change.
140 |
141 | ## Contributing
142 |
143 | There are lots of other little things that need cleaned up such as:
144 |
145 | - More tests
146 | - Cleaning up the vendor scripts / typings
147 | - Simplifying the unread messages count
148 |
149 | If you'd like to contribute, feel free to submit a pull request and we'll likely merge it in.
150 |
151 | ## Getting Help
152 |
153 | If you're having trouble getting this project running, feel free to [open an issue](https://github.com/ng-book/angular2-rxjs-chat/issues), join us on [Gitter](https://gitter.im/ng-book/ng-book?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge), or [email us](mailto:us@fullstack.io)!
154 |
155 | ___
156 |
157 | # ng-book 2
158 |
159 |
160 |
161 |
162 |
163 | This repo was written and is maintained by the [ng-book 2](https://ng-book.com/2) team. In the book we talk about each line of code in this app and explain why it's there and how it works.
164 |
165 | This app is only one of several apps we have in the book. If you're looking to learn Angular 2, there's no faster way than by spending a few hours with ng-book 2.
166 |
167 |
168 |
169 | ## License
170 | [MIT](/LICENSE.md)
171 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularChatPage } from './app.po';
2 | import { browser } from 'protractor';
3 |
4 | describe('angular-rxjs-chat App', () => {
5 | let page: AngularChatPage;
6 |
7 | beforeEach(() => {
8 | page = new AngularChatPage();
9 | });
10 |
11 | it('should load the page', () => {
12 | page.navigateTo();
13 |
14 | expect(page.unreadCount()).toMatch(`4`);
15 |
16 | page.clickThread(1);
17 | expect(page.unreadCount()).toMatch(`3`);
18 |
19 | page.clickThread(2);
20 | expect(page.unreadCount()).toMatch(`2`);
21 | page.sendMessage('3');
22 |
23 | page.clickThread(3);
24 | expect(page.unreadCount()).toMatch(`0`);
25 |
26 | page.clickThread(0);
27 | // expect(page.unreadCount()).toMatch(`1`);
28 | // expect(page.getConversationText(3)).toContain(`I waited 3 seconds`);
29 |
30 | browser.sleep(5000).then(function() {
31 | expect(page.getConversationText(0)).toContain(`I waited 3 seconds`);
32 | });
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class AngularChatPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 |
12 | getHeaderText() {
13 | return element(by.css('h1')).getText();
14 | }
15 |
16 | unreadCount() {
17 | return element(by.css('.badge')).getText();
18 | }
19 |
20 | clickThread(i) {
21 | return element.all(by.css('chat-thread')).get(i).click();
22 | }
23 |
24 | sendMessage(msg) {
25 | element(by.css('.chat-input')).sendKeys(msg);
26 | return element(by.buttonText('Send')).click();
27 | }
28 |
29 | getConversationText(i) {
30 | return element.all(by.css('.conversation')).get(i).getText();
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "declaration": false,
5 | "moduleResolution": "node",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "lib": [
9 | "es2016"
10 | ],
11 | "outDir": "../dist/out-tsc-e2e",
12 | "module": "commonjs",
13 | "target": "es6",
14 | "types":[
15 | "jasmine",
16 | "node"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | files: [
19 | { pattern: './src/test.ts', watched: false }
20 | ],
21 | preprocessors: {
22 | './src/test.ts': ['@angular/cli']
23 | },
24 | mime: {
25 | 'text/x-typescript': ['ts','tsx']
26 | },
27 | coverageIstanbulReporter: {
28 | reports: [ 'html', 'lcovonly' ],
29 | fixWebpackSourcePaths: true
30 | },
31 | angularCli: {
32 | environment: 'dev'
33 | },
34 | reporters: config.angularCli && config.angularCli.codeCoverage
35 | ? ['progress', 'coverage-istanbul']
36 | : ['progress', 'kjhtml'],
37 | port: 9876,
38 | colors: true,
39 | logLevel: config.LOG_INFO,
40 | autoWatch: true,
41 | browsers: ['Chrome'],
42 | singleRun: false
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-redux-chat",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/common": "4.2.0",
16 | "@angular/compiler": "4.2.0",
17 | "@angular/core": "4.2.0",
18 | "@angular/forms": "4.2.0",
19 | "@angular/http": "4.2.0",
20 | "@angular/platform-browser": "4.2.0",
21 | "@angular/platform-browser-dynamic": "4.2.0",
22 | "@angular/router": "4.2.0",
23 | "@types/lodash": "4.14.55",
24 | "core-js": "2.4.1",
25 | "lodash": "4.17.4",
26 | "moment": "2.18.0",
27 | "redux": "3.6.0",
28 | "reselect": "2.5.4",
29 | "rxjs": "5.0.1",
30 | "zone.js": "0.8.10",
31 | "reflect-metadata": "0.1.3",
32 | "@types/jasmine": "2.5.40"
33 | },
34 | "devDependencies": {
35 | "@angular/cli": "1.2.0-beta.1",
36 | "@angular/compiler-cli": "4.2.0",
37 | "@types/jasmine": "2.5.38",
38 | "@types/node": "~6.0.60",
39 | "codelyzer": "~2.0.0",
40 | "jasmine-core": "~2.5.2",
41 | "jasmine-spec-reporter": "~3.2.0",
42 | "karma": "~1.4.1",
43 | "karma-chrome-launcher": "~2.0.0",
44 | "karma-cli": "~1.0.1",
45 | "karma-jasmine": "~1.1.0",
46 | "karma-jasmine-html-reporter": "0.2.2",
47 | "karma-coverage-istanbul-reporter": "0.2.0",
48 | "protractor": "~5.1.0",
49 | "ts-node": "~2.0.0",
50 | "tslint": "~4.4.2",
51 | "typescript": "2.3.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | beforeLaunch: function() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | },
27 | onPrepare() {
28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ng-book/angular2-rxjs-chat/d5e84a9e13548ff4a32e986cf6d9b3fd41a1fc45/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
3 | 
18 | 
50 | 
66 | 
91 |
92 |
93 |
94 | ## Detailed Installation
95 |
96 | **Step 1: Install Node.js from the [Node Website](http://nodejs.org/).**
97 |
98 | We recommend Node version 4.1 or above. You can check your node version by running this:
99 |
100 | ```bash
101 | $ node -v
102 | vv4.1...
103 | ```
104 |
105 | **Step 2: Install Dependencies**
106 |
107 | ```bash
108 | npm install
109 | ```
110 |
111 | ## Running the App
112 |
113 | ```bash
114 | npm run go
115 | ```
116 |
117 | Then visit [http://localhost:4200](http://localhost:4200) in your browser.
118 |
119 | ## Running the Tests
120 |
121 | You can run the unit tests with:
122 |
123 | ```bash
124 | npm run test
125 | ```
126 |
127 | ## Future Plans
128 |
129 | There are two big changes we plan to make to this repo:
130 |
131 | ### 1. Add HTTP Requests
132 |
133 | Currently the bots are all client-side and there are no HTTP requests involved in the chats.
134 |
135 | We will move the chat bots to a server and integrate API requests into this project once the Angular 2 HTTP client development has settled down.
136 |
137 | ### 2. `ON_PUSH` change detection
138 |
139 | Because we're using observables, we can improve the performance of these components by using `ON_PUSH` change detection. Again, once Angular 2 development stabilizes, we'll be making this change.
140 |
141 | ## Contributing
142 |
143 | There are lots of other little things that need cleaned up such as:
144 |
145 | - More tests
146 | - Cleaning up the vendor scripts / typings
147 | - Simplifying the unread messages count
148 |
149 | If you'd like to contribute, feel free to submit a pull request and we'll likely merge it in.
150 |
151 | ## Getting Help
152 |
153 | If you're having trouble getting this project running, feel free to [open an issue](https://github.com/ng-book/angular2-rxjs-chat/issues), join us on [Gitter](https://gitter.im/ng-book/ng-book?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge), or [email us](mailto:us@fullstack.io)!
154 |
155 | ___
156 |
157 | # ng-book 2
158 |
159 |
160 | 
161 |
162 |
163 | This repo was written and is maintained by the [ng-book 2](https://ng-book.com/2) team. In the book we talk about each line of code in this app and explain why it's there and how it works.
164 |
165 | This app is only one of several apps we have in the book. If you're looking to learn Angular 2, there's no faster way than by spending a few hours with ng-book 2.
166 |
167 |
168 |
169 | ## License
170 | [MIT](/LICENSE.md)
171 |
--------------------------------------------------------------------------------
/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AngularChatPage } from './app.po';
2 | import { browser } from 'protractor';
3 |
4 | describe('angular-rxjs-chat App', () => {
5 | let page: AngularChatPage;
6 |
7 | beforeEach(() => {
8 | page = new AngularChatPage();
9 | });
10 |
11 | it('should load the page', () => {
12 | page.navigateTo();
13 |
14 | expect(page.unreadCount()).toMatch(`4`);
15 |
16 | page.clickThread(1);
17 | expect(page.unreadCount()).toMatch(`3`);
18 |
19 | page.clickThread(2);
20 | expect(page.unreadCount()).toMatch(`2`);
21 | page.sendMessage('3');
22 |
23 | page.clickThread(3);
24 | expect(page.unreadCount()).toMatch(`0`);
25 |
26 | page.clickThread(0);
27 | // expect(page.unreadCount()).toMatch(`1`);
28 | // expect(page.getConversationText(3)).toContain(`I waited 3 seconds`);
29 |
30 | browser.sleep(5000).then(function() {
31 | expect(page.getConversationText(0)).toContain(`I waited 3 seconds`);
32 | });
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, element, by } from 'protractor';
2 |
3 | export class AngularChatPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 |
12 | getHeaderText() {
13 | return element(by.css('h1')).getText();
14 | }
15 |
16 | unreadCount() {
17 | return element(by.css('.badge')).getText();
18 | }
19 |
20 | clickThread(i) {
21 | return element.all(by.css('chat-thread')).get(i).click();
22 | }
23 |
24 | sendMessage(msg) {
25 | element(by.css('.chat-input')).sendKeys(msg);
26 | return element(by.buttonText('Send')).click();
27 | }
28 |
29 | getConversationText(i) {
30 | return element.all(by.css('.conversation')).get(i).getText();
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "sourceMap": true,
4 | "declaration": false,
5 | "moduleResolution": "node",
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "lib": [
9 | "es2016"
10 | ],
11 | "outDir": "../dist/out-tsc-e2e",
12 | "module": "commonjs",
13 | "target": "es6",
14 | "types":[
15 | "jasmine",
16 | "node"
17 | ]
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | files: [
19 | { pattern: './src/test.ts', watched: false }
20 | ],
21 | preprocessors: {
22 | './src/test.ts': ['@angular/cli']
23 | },
24 | mime: {
25 | 'text/x-typescript': ['ts','tsx']
26 | },
27 | coverageIstanbulReporter: {
28 | reports: [ 'html', 'lcovonly' ],
29 | fixWebpackSourcePaths: true
30 | },
31 | angularCli: {
32 | environment: 'dev'
33 | },
34 | reporters: config.angularCli && config.angularCli.codeCoverage
35 | ? ['progress', 'coverage-istanbul']
36 | : ['progress', 'kjhtml'],
37 | port: 9876,
38 | colors: true,
39 | logLevel: config.LOG_INFO,
40 | autoWatch: true,
41 | browsers: ['Chrome'],
42 | singleRun: false
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-redux-chat",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/common": "4.2.0",
16 | "@angular/compiler": "4.2.0",
17 | "@angular/core": "4.2.0",
18 | "@angular/forms": "4.2.0",
19 | "@angular/http": "4.2.0",
20 | "@angular/platform-browser": "4.2.0",
21 | "@angular/platform-browser-dynamic": "4.2.0",
22 | "@angular/router": "4.2.0",
23 | "@types/lodash": "4.14.55",
24 | "core-js": "2.4.1",
25 | "lodash": "4.17.4",
26 | "moment": "2.18.0",
27 | "redux": "3.6.0",
28 | "reselect": "2.5.4",
29 | "rxjs": "5.0.1",
30 | "zone.js": "0.8.10",
31 | "reflect-metadata": "0.1.3",
32 | "@types/jasmine": "2.5.40"
33 | },
34 | "devDependencies": {
35 | "@angular/cli": "1.2.0-beta.1",
36 | "@angular/compiler-cli": "4.2.0",
37 | "@types/jasmine": "2.5.38",
38 | "@types/node": "~6.0.60",
39 | "codelyzer": "~2.0.0",
40 | "jasmine-core": "~2.5.2",
41 | "jasmine-spec-reporter": "~3.2.0",
42 | "karma": "~1.4.1",
43 | "karma-chrome-launcher": "~2.0.0",
44 | "karma-cli": "~1.0.1",
45 | "karma-jasmine": "~1.1.0",
46 | "karma-jasmine-html-reporter": "0.2.2",
47 | "karma-coverage-istanbul-reporter": "0.2.0",
48 | "protractor": "~5.1.0",
49 | "ts-node": "~2.0.0",
50 | "tslint": "~4.4.2",
51 | "typescript": "2.3.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | beforeLaunch: function() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | },
27 | onPrepare() {
28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ng-book/angular2-rxjs-chat/d5e84a9e13548ff4a32e986cf6d9b3fd41a1fc45/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |