ismaestro/angular-example-app

Angular 17 Example App + Standalone Components + i18n + EsBuild

Angular Example App

Example app with Angular 17 + i18n + Standalone Components and Es-Build Enabled

👏👏🎉🎉🎉🎉👏👏

Real World App made with much ❤️. Contains CRUD, advanced patterns and much more!



DEMO HERE

Setup

npm i
npm start

Status

Server

This project is using a real app deployed in fly.io, which you can see here. The server is using NestJS, Prisma, Postgres and GraphQL. Please check it out and also feel free to contribute or give me your thoughts.

What's included

• Standalone components
• Functional Guards
• CRUD: create, update and remove heroes with this project!
• Authentication with JWT tokens (Interceptor and Guard)
• Internationalization with the official i18n. English and Spanish available.
• Lazy loading modules
• Amazing reactive functionalities with elf
• More logical directory structure
• Following the best practices!
• Responsive layout with Bootstrap 5
• Use of NgOptimizedImage
• SASS with BEM styles
• Example tests for: Component, Service, Interceptor, Directive and Guard
• End-to-end tests configuration with Playwright
• Very strict ESLint rules

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!

Creators

Ismael Ramos

• https://github.com/ismaestro

Thanks

I´m developing this project in my free time, but also thanks to all contributors!

Copyright and license

Code and documentation copyright 2023 the authors. Code released under the MIT License.

Enjoy 🤘

angular-example-app's Issues

FirebaseError: "Missing or insufficient permissions."

Is there something wrong with Firebase ? I just followed the instructions, which is basically pulling the project, installing (npm install) and running ( npm start ), but the app won't load.

Not able to run this application

Hi I am new to angular , downloaded this source code, then installed cli using npm install -g @angular/cli and then try to use ng command serve, getting build error angular-modules not found.. do i need to install npm in the same project folder? any suggestion how to make run this application

Angular styleguide

Hi!

I bumped into this project while I was looking for an example app that is following the official Angular styleguide.

I see that you are trying to follow the guidelines, but there is one thing, which is against it. Specifically against this point:
Avoid providing services in shared modules. Services are usually singletons that are provided once for the entire application or in a particular feature module.

Is it intentional that you have the src/app/shared/services/ folder, and services in it, which are used throughout the app?

According to the Angular styleguide, it should be placed under src/app/core.

Thanks,
Norbert

sidebar with submenu and profile details

Hi Team,

Really very helpful your code, can you help please how to create in sidebar with sub menu and profile details as like material design theme .
And is there any grid system for material design like bootstrap have col-sm-1 to 12. I tried to understand the grid and structure in material but unable to create proper structure please suggest the webside how to develop the project and best practice structure.

Hero Details Page route is not working properly

Describe the bug
When hero details page is entered directly in the browser the page is breaking in multiple places.
Moreover javascript is not working in entire page

To Reproduce
Steps to reproduce the behavior:

1. run the project with npm run build:ssr and npm run serve:ssr
2. Copy and hero details page link by copy link address
3. Open that in a new tab
4. Now do a empty cache and hard reload
5. Page will break

Expected behavior
It should load the page just like when it is open from the home page. On performing hard reload in every page application should work as expected but in this page hard reload is breaking its layout and functionality

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser :Chrome, Mozilla
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

ng build schema validation with following errors required property outputPath

Could someone help me out as i was stocked here for lots of time. Thanks.

Administrator@Jacob MINGW64 /d/源代码/angular8-example
$ ng build
Your global Angular CLI version (8.3.2) is greater than your local
version (8.0.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Schema validation failed with the following errors:
Data path "" should have required property 'outputPath'.
Error: Schema validation failed with the following errors:

Data path "" should have required property 'outputPath'.
at MapSubscriber.registry.compile.pipe.operators_1.map [as project] (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\src\architect.js:39:27)
    at MapSubscriber._next (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\operators\map.js:49:35)
    at MapSubscriber.Subscriber.next (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:207:16)
    at SafeSubscriber.next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:145:22)
    at Subscriber._next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:89:26)
    at Subscriber.next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:207:16)
    at SafeSubscriber.next (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:145:22)
    at MergeMapSubscriber.notifyNext (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (D:\源代码\angular8-example\node_modules\@angular-devkit\architect\node_modules\rxjs\internal\Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:207:16)
    at SafeSubscriber.next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:145:22)
    at Subscriber._next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:89:26)
    at Subscriber.next (D:\源代码\angular8-example\node_modules\@angular\cli\node_modules\rxjs\internal\Subscriber.js:66:18)

New Logo/Icon Proposal

Good day sir. I am a graphic designer and i am interested in designing a logo for your good project. I will be doing it as a gift for free. I just need your permission first before I begin my design. Hoping for your positive feedback. Thanks

[#REQ] Angular Material Table implementation: pagination, sorting, filtering...

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Implementation of an Angular Material table schematics with pagination, sort by column and name query filter from server and client side.
$ ng generate @angular/material:table heroes-mat-table

Mention any other details that might be useful.

Nice job.
I am currently studying web development and I wanted to tell you that your project for me is very useful. It inspires me and teaches good practices. Thanks for share it.

virus spread

#

Bug Report or Feature Request (mark with an x)

• [x ] bug report -> please search issues before submitting
• feature request

Versions.

windows 10
node 6.10.3

npm 3.10.10

Repro steps.

npm start

The log given by the failure.

$ npm start

[email protected] start C:\angularjs\angular5-example-app
ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-03-03T12:29:32.210Z
Hash: 678c342888cbe58f6e53
Time: 149419ms
chunk {heroes.module} heroes.module.chunk.js () 55.4 kB [rendered]
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 183 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.63 MB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 2.38 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 184 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 18.6 MB [initial] [rendered]

webpack: Compiled successfully.

Desired functionality.

npm start of the example angular js 5 project from git repo https://github.com/Ismaestro/angular5-example-app
After that when you open localhost:4200 it start down download virus file which is prevented by my local Norton antivirus ( most probably from image file) Even in

Mention any other details that might be useful.

Issue on Deploy

Hi, its working nicely but i got some issue after deploying through.

npm deploy

I got error like this after updating npm version to 5.3.0

`npm ERR! Invalid version: "1.0"

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Brain\AppData\Roaming\npm-cache_logs\2017-08-25T05_13_32_295Z-debug.log
`
where my npm version is 5.3.0 and node 6.9.4

I appreciate your help.

Add pre-rendering feature

It would be useful to show how you would approach pre-rendering.

Thank you

running this project using ng command

Hi ,
if i would like to use ng command by installing npm install -g and using ng command ng serve to run this project. when i install the above command it install with different version node-modules in appdata folder. then how do I resolve dependency to this project running ng

appreciated for your help

Failed to compile. node-sass is not being found

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                            Version
------------------------------------------------------------

@angular-devkit/architect          0.6.0
@angular-devkit/build-angular      0.6.0
@angular-devkit/build-ng-packagr   0.6.1
@angular-devkit/build-optimizer    0.6.0
@angular-devkit/core               0.6.0
@angular-devkit/schematics         0.6.0
@angular/cdk                       6.0.1
@angular/flex-layout               5.0.0-beta.14
@angular/material                  6.0.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.0
@schematics/angular                0.6.0
@schematics/update                 0.6.0
ng-packagr                         3.0.0-rc.5
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.6.0

npm list node-sass shows :

[email protected] G:\DevLearn\angular6-example-app
+-- @angular-devkit/[email protected]
| `-- [email protected]  deduped
+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

Repro steps.

npm start or ng serve

The log given by the failure.

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/heroes/hero-top/hero-top.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/core/error404/error-404.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/core/nav/nav.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/core/footer/footer.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/core/search-bar/search-bar.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/heroes/hero-list/hero-list.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/heroes/hero-detail/hero-detail.component.scss
Module build failed: Error: sass-loader requires node-sass >=4. Please install a compatible version.
at Object.sassLoader (G:\DevLearn\angular6-example-app\node_modules\sass-loader\lib\loader.js:31:19)

Desired functionality.

Should compile without errors

Mention any other details that might be useful.

After a fresh git clone followed by npm install, upon doing npm install, I got the above messages. I have checked the node_modules folder and node-sass exists. I have also checked via npm list node-sass and have attached the output above.

zone.js/dist/zone-node.js creates Error listen EADDRINUSE: address already in use :::8080 - on firebase

Describe the bug

zone.js/dist/zone-node.js creates Error listen EADDRINUSE: address already in use :::8080 - on firebase

Function execution started
Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions
Node Express server listening on port 8080
/srv/functions/node_modules/zone.js/dist/zone-node.js:199

throw error;
ssr
^

 Error: listen EADDRINUSE: address already in use :::8080
    at Server.setupListenHandle [as _listen2] (net.js:1270:14)
    at listenInCluster (net.js:1318:12)
    at Server.listen (net.js:1405:7)
    at Object.<anonymous> (/srv/node_modules/@google-cloud/functions-framework/build/src/index.js:56:8)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Emitted 'error' event at:
at emitErrorNT (net.js:1297:8)
at ZoneDelegate.invokeTask (/srv/functions/node_modules/zone.js/dist/zone-node.js:423:31)
at Zone.runTask (/srv/functions/node_modules/zone.js/dist/zone-node.js:195:47)
at ZoneTask.invokeTask (/srv/functions/node_modules/zone.js/dist/zone-node.js:498:34)
at ZoneTask.invoke (/srv/functions/node_modules/zone.js/dist/zone-node.js:487:48)
at data.args.(anonymous function) (/srv/functions/node_modules/zone.js/dist/zone-node.js:1421:25)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Error: cannot communicate with function. Function invocation was interrupted.

To Reproduce

npm run build:ssr
npm run deploy

Expected behavior

Avoid the EADDRINUSE error

Screenshots
NONE

Desktop (please complete the following information):

• OS: Ubuntu 19.04
• Browser: firefox
• Version: 67

Smartphone (please complete the following information):

NONE

Additional context

After building the application with npm run build:ssr, the application is working locally (through the command firebase serve) with the EADDRINUSE error but without stop the server.

(base) amine@amine-X580VD:~/Documents/docker-projects/angular7-example-app/functions$ firebase serve

=== Serving from '/home/amine/Documents/docker-projects/angular7-example-app'...

⚠  Your requested "node" version "10" doesn't match your global version "11"
✔  functions: Emulator started at http://localhost:5001
i  functions: Watching "/home/amine/Documents/docker-projects/angular7-example-app/functions" for Cloud Functions...
i  hosting: Serving hosting files from: functions/dist
✔  hosting: Local server: http://localhost:5000
>  Node Express server listening on port 4000
i  functions: HTTP trigger initialized at http://localhost:5001/mohamed-amine-jallouli/us-central1/ssr
[hosting] Rewriting / to http://localhost:5001/mohamed-amine-jallouli/us-central1/ssr for local Function ssr
i  functions: Beginning execution of "ssr"
>  /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:199
>                          throw error;
>                          ^
>  
>  Error: listen EADDRINUSE: address already in use :::4000
>      at Server.setupListenHandle [as _listen2] (net.js:1259:14)
>      at listenInCluster (net.js:1307:12)
>      at Server.listen (net.js:1395:7)
>      at Function.listen (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/express/lib/application.js:618:24)
>      at Object.<anonymous> (/home/amine/Documents/docker-projects/angular7-example-app/functions/index.js:51:5)
>      at Module._compile (internal/modules/cjs/loader.js:816:30)
>      at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
>      at Module.load (internal/modules/cjs/loader.js:685:32)
>      at Function.Module._load (internal/modules/cjs/loader.js:620:12)
>      at Module.require (internal/modules/cjs/loader.js:723:19)
>      at require (internal/modules/cjs/helpers.js:14:16)
>      at /usr/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:459:29
>      at Generator.next (<anonymous>)
>      at /usr/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:7:71
>      at new Promise (<anonymous>)
>      at __awaiter (/usr/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:3:12)
>      at main (/usr/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:421:12)
>      at Object.<anonymous> (/usr/lib/node_modules/firebase-tools/lib/emulator/functionsEmulatorRuntime.js:511:5)
>      at Module._compile (internal/modules/cjs/loader.js:816:30)
>      at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
>      at Module.load (internal/modules/cjs/loader.js:685:32)
>      at Function.Module._load (internal/modules/cjs/loader.js:620:12)
>      at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
>      at internal/main/run_main_module.js:21:11
>  Emitted 'error' event at:
>      at emitErrorNT (net.js:1286:8)
>      at ZoneDelegate.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:423:31)
>      at Zone.runTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:195:47)
>      at ZoneTask.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:498:34)
>      at ZoneTask.invoke (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:487:48)
>      at data.args.(anonymous function) (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:1421:25)
>      at processTicksAndRejections (internal/process/task_queues.js:81:17)
>      at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:56:3)
>      at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
>      at internal/main/run_main_module.js:21:11
>  Angular library has started with this options:  { config: { say: 'hello' } }
>  (node:4826) DeprecationWarning: grpc.load: Use the @grpc/proto-loader module with grpc.loadPackageDefinition instead
>  { Error [FirebaseError]: The query requires an index. You can create it here: https://console.firebase.google.com/project/mohamed-amine-jallouli/database/firestore/indexes?create_composite=ClVwcm9qZWN0cy9tb2hhbWVkLWFtaW5lLWphbGxvdWxpL2RhdGFiYXNlcy8oZGVmYXVsdCkvY29sbGVjdGlvbkdyb3Vwcy9oZXJvZXMvaW5kZXhlcy9fEAEaCwoHZGVmYXVsdBACGgkKBWxpa2VzEAIaDAoIX19uYW1lX18QAg
>      at new FirestoreError (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:353:28)
>      at JsonProtoSerializer.fromRpcStatus (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:5579:16)
>      at JsonProtoSerializer.fromWatchChange (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:6076:44)
>      at PersistentListenStream.onMessage (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14286:43)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14215:30
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14255:28
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:7343:20
>      at ZoneDelegate.invoke (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:391:26)
>      at Zone.run (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:150:43)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:889:34
>      at ZoneDelegate.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:423:31)
>      at Zone.runTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:195:47)
>      at drainMicroTaskQueue (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:601:35)
>      at ZoneTask.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:502:21)
>      at ClientDuplexStream.ZoneTask.invoke (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:487:48)
>      at ClientDuplexStream.emit (events.js:193:13)
>      at ClientDuplexStream.EventEmitter.emit (domain.js:481:20)
>      at addChunk (_stream_readable.js:295:12)
>      at readableAddChunk (_stream_readable.js:276:11)
>      at ClientDuplexStream.Readable.push (_stream_readable.js:231:10)
>      at Object.onReceiveMessage (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:1292:19)
>      at InterceptingListener.recvMessageWithContext (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:607:19)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:706:14
>    code: 'failed-precondition',
>    name: 'FirebaseError',
>    toString: [Function] }
>  { Error [FirebaseError]: The query requires an index. You can create it here: https://console.firebase.google.com/project/mohamed-amine-jallouli/database/firestore/indexes?create_composite=ClVwcm9qZWN0cy9tb2hhbWVkLWFtaW5lLWphbGxvdWxpL2RhdGFiYXNlcy8oZGVmYXVsdCkvY29sbGVjdGlvbkdyb3Vwcy9oZXJvZXMvaW5kZXhlcy9fEAEaCwoHZGVmYXVsdBACGgkKBWxpa2VzEAIaDAoIX19uYW1lX18QAg
>      at new FirestoreError (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:353:28)
>      at JsonProtoSerializer.fromRpcStatus (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:5579:16)
>      at JsonProtoSerializer.fromWatchChange (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:6076:44)
>      at PersistentListenStream.onMessage (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14286:43)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14215:30
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:14255:28
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/@firebase/firestore/dist/index.node.cjs.js:7343:20
>      at ZoneDelegate.invoke (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:391:26)
>      at Zone.run (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:150:43)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:889:34
>      at ZoneDelegate.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:423:31)
>      at Zone.runTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:195:47)
>      at drainMicroTaskQueue (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:601:35)
>      at ZoneTask.invokeTask (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:502:21)
>      at ClientDuplexStream.ZoneTask.invoke (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/zone.js/dist/zone-node.js:487:48)
>      at ClientDuplexStream.emit (events.js:193:13)
>      at ClientDuplexStream.EventEmitter.emit (domain.js:481:20)
>      at addChunk (_stream_readable.js:295:12)
>      at readableAddChunk (_stream_readable.js:276:11)
>      at ClientDuplexStream.Readable.push (_stream_readable.js:231:10)
>      at Object.onReceiveMessage (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:1292:19)
>      at InterceptingListener.recvMessageWithContext (/home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:607:19)
>      at /home/amine/Documents/docker-projects/angular7-example-app/functions/node_modules/grpc/src/client_interceptors.js:706:14
>    code: 'failed-precondition',
>    name: 'FirebaseError',
>    toString: [Function] }
>  getHeroes failed: The query requires an index. You can create it here: https://console.firebase.google.com/project/mohamed-amine-jallouli/database/firestore/indexes?create_composite=ClVwcm9qZWN0cy9tb2hhbWVkLWFtaW5lLWphbGxvdWxpL2RhdGFiYXNlcy8oZGVmYXVsdCkvY29sbGVjdGlvbkdyb3Vwcy9oZXJvZXMvaW5kZXhlcy9fEAEaCwoHZGVmYXVsdBACGgkKBWxpa2VzEAIaDAoIX19uYW1lX18QAg
>  getHeroes failed: The query requires an index. You can create it here: https://console.firebase.google.com/project/mohamed-amine-jallouli/database/firestore/indexes?create_composite=ClVwcm9qZWN0cy9tb2hhbWVkLWFtaW5lLWphbGxvdWxpL2RhdGFiYXNlcy8oZGVmYXVsdCkvY29sbGVjdGlvbkdyb3Vwcy9oZXJvZXMvaW5kZXhlcy9fEAEaCwoHZGVmYXVsdBACGgkKBWxpa2VzEAIaDAoIX19uYW1lX18QAg
127.0.0.1 - - [05/Jun/2019:04:51:42 +0000] "GET / HTTP/1.1" 504 - "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0"
^CShutting down...

Issue in localhost

Hi Ismael,

first of all compliments for your project!
I have an issue that prefer ask here because I think there is a problem in my configuration...

below the steps:

1. clone angular8-example-app project;
2. execute npm install;
3. execute the build npm run build:ssr
4. execute the server npm run serve:ssr
5. navigating on localhost:4000, the site works fine
6. when switch on ES language (localhost:4000/es) i see a 404 not found page! Why? Seems that angular routing has a priority on express

please help me
thanks!

How did you implement require funcionality in your server.ts file?

First i want to say thank you for a great angular starter project.

Hi. Sorry, this is not a bug. I just want to know, how next pease of code works?

bundle: require(join(DIST_FOLDER, 'server', 'es', 'main')

I exported it to my project and get an error:

Do I have to add something to make it works?

Can you give us the firebase project login ?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

All component's html show in a page

Hello everyone,

I just add {{abc.xyz}} in hero-list.component.html. And the page show:

How can I do to fixed it without delete {{abc.xyz}} . Because in the future, I can't sure I don't have error somewhere in html.

Breaks when npm install , cant locate the source of error

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Output from: ng --version.
Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular: 6.1.2
output from: node --version and npm --version.
npm = 6.4.1
node =8.11.3
Windows 10

Repro steps.

npm install

The log given by the failure.

Date: 2018-10-10T15:00:38.758Z
Hash: 29fd539ef710f98a8ee4
Time: 24279ms
chunk {main} main.js, main.js.map (main) 126 kB [initial] [rendered]
chunk {modules-heroes-heroes-module} modules-heroes-heroes-module.js, modules-heroes-heroes-module.js.map (modules-heroes-heroes-module) 32 kB [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 555 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.02 kB [entry] [rendered]
chunk {4} 4.js, 4.js.map () 2.15 kB [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 2.5 kB [rendered]
chunk {styles} styles.js, styles.js.map (styles) 144 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.95 MB [initial] [rendered]
chunk {0} 0.js, 0.js.map () 2.74 kB [rendered]
chunk {1} 1.js, 1.js.map () 2.89 kB [rendered]
chunk {2} 2.js, 2.js.map () 2.7 kB [rendered]
chunk {3} 3.js, 3.js.map () 2.18 kB [rendered]
chunk {5} 5.js, 5.js.map () 352 kB [rendered]
i ｢wdm｣: Compiled successfully.
(node:15672) UnhandledPromiseRejectionWarning: Error: spawn cmd ENOENT
at _errnoException (util.js:992:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:190:19)
at onErrorNT (internal/child_process.js:372:16)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
(node:15672) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 13)
(node:15672) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Desired functionality.

Mention any other details that might be useful.

Possible Memory Leak

Bug Report or Feature Request (mark with an x)

• [x ] bug report -> please search issues before submitting
• feature request

Versions.

This report is based on the View Demo link (http://angularexampleapp.com/) in Chrome 68 on Windows 10 Pro 1803

Repro steps.

1. In a fresh Chrome browser, open the Live Demo link - http://angularexampleapp.com/

2. Open Developer tools

3. Click on the Memory tab

4. Click Collect Garbage

5. Check the figures for angularexampleapp.com
   In my case, this reads 15.6/23.3 MB

6. Click on Heroes List

7. Click on first Hero (Iron Man)

8. Click on Heroes List

9. Click on second Hero

10. Click on Heroes List

11. Repeat for a total of 5 Heroes

12. Collect Garbage

13. Check the figures for angularexampleapp.com
    Now reads 21.7/29.8

14. Repeat the process of clicking on 5 heroes and clicking back to the list each time
    Collect Garbage
    Memory for angularexampleapp.com now reads 22.9/30.3 MB

15. Repeat the process of clicking on 5 heroes and clicking back to the list each time
    Collect Garbage
    Memory for angularexampleapp.com now reads 23.5/31.3 MB

Note: after 10 minutes, memory figures are the same.

The log given by the failure.

Desired functionality.

After steps 14 and 15, I don't think the amount of memory used should keep going up.

Mention any other details that might be useful.

Demo app is SSR but repo isn't

Demo app is rendered on server and page source shows it too. It is not just
<app-root>...spinner</app-root> and kinda runs with JS disabled
But I cloned the repo, ran npm install and npm run deploy , deployed page is just a normal SPR.

Importing Material Module

I want to know why import the MateriaModule module both into CoreModule and into AppModule? Why not add it to the CoreBundle module exports and remove it from AppBundle?
Thanks

Firebase deployed app not converting to SSR

Describe the bug
Firebase deployed app in not converting to SSR on public website.

Local works, but when I depoly the project via firebase deploy, the public website is not SEO friendly. I checked the view source, but no dice

Expected behavior
public website view source should be in raw HTML, not angular rendered.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
mac

npm-debug.log

I tried to install your version in my terminal, but it keeps saying I need "npm-debug.log" every time. And, I installed the latest versions of nodeJS and npm.

`> [email protected] start /Users/AndrewMcCurtis/Desktop/angular2-heroes

npm run server | npm run ng

[email protected] ng /Users/AndrewMcCurtis/Desktop/angular2-heroes
ng serve --proxy-config proxy.conf.json

No errors
Error: No errors
at validate (/Users/name/Desktop/angular2-heroes/node_modules/extract-text-webpack-plugin/schema/validator.js:10:9)
at Function.ExtractTextPlugin.extract (/Users/name/Desktop/angular2-heroes/node_modules/extract-text-webpack-plugin/index.js:188:3)
at /Users/name/Desktop/angular2-heroes/node_modules/angular-cli/models/webpack-build-utils.js:72:77
at Array.map (native)
at Object.makeCssLoaders (/Users/name/Desktop/angular2-heroes/node_modules/angular-cli/models/webpack-build-utils.js:69:53)
at Object.getWebpackCommonConfig (/Users/name/Desktop/angular2-heroes/node_modules/angular-cli/models/webpack-build-common.js:77:65)
at new NgCliWebpackConfig (/Users/name/Desktop/angular2-heroes/node_modules/angular-cli/models/webpack-config.js:22:49)
at Class.run (/Users/name/Desktop/angular2-heroes/node_modules/angular-cli/tasks/serve-webpack.js:20:22)
at /Users/name/Desktop/angular2-heroes/node_modules/angular-cli/commands/serve.js:108:26
at process._tickCallback (internal/process/next_tick.js:103:7)

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ng"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] ng: ng serve --proxy-config proxy.conf.json
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] ng script 'ng serve --proxy-config proxy.conf.json'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-hero-cli package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng serve --proxy-config proxy.conf.json
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-hero-cli
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-hero-cli
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/name/Desktop/angular2-heroes/npm-debug.log`

Thanks

I am trying to add my firebase account, but the image files are not available in it and hence the app does not work properly. Please suggest how do I upload the files in my firebase account.

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

\angular8-example-app-master\node_modules\.staging\@angular\core-9df594b5\fesm5\core.js.map

npm ERR! path F:\angular8-example-app-master\node_modules.staging@angular\core-9df594b5\fesm5\core.js.map
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'F:\angular8-example-app-master\node_modules.staging@angular\core-9df594b5\fesm5\core.js.map'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'F:\angular8-example-app-master\node_modules.staging@angular\core-9df594b5\fesm5\core.js.map'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'F:\angular8-example-app-master\node_modules.staging@angular\core-9df594b5\fesm5\core.js.map'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'F:\angular8-example-app-master\node_modules\.staging\@angular\core-9df594b5\fesm5\core.js.map'
npm ERR! },
npm ERR! stack: 'Error: EPERM: operation not permitted, unlink ' +
npm ERR! "'F:\angular8-example-app-master\node_modules\.staging\@angular\core-9df594b5\fesm5\core.js.map'",
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'F:\angular8-example-app-master\node_modules\.staging\@angular\core-9df594b5\fesm5\core.js.map',
npm ERR! parent: 'angular8-example-app-master'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

What does CoinHive do? is it mining cryptocurrencies?

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

PathLocationStrategy not working

After ng build PathLocationStrategy not working. Page reload redirected to 404. Could you please help me?

If want to display hero having votes between some range of values(For ex. vote between 1000 to 1500). How can I do it or implement it?

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

ReferenceError: window is not defined

Describe the bug
When installing any plugin, which is accessing window object directly the SSR bundle breaks with an error ReferenceError: window is not defined. I've installed Agastya, an accessibility plugin.

To Reproduce
Steps to reproduce the behavior:

1. Clone this repository
2. npm install
3. npm install agastya --save
4. Add those 2 lines in app.module.ts

import Agastya from 'agastya';
new Agastya('ditectrev-70d3b');

5. npm run dev:ssr
6. ReferenceError: window is not defined will pop up

Expected behavior
Mocking window should make a real impact on the SSR bundle.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser: All
• Version: All

Additional context

The 'ditectrev-70d3b' API key will stop working after a few days, that's just to make you easier. You can generate your own API key for Agastya here, or try a different plugin accessing window directly. Looks like the introduction of CLI Builders to build & server SSR apps in Angular 9 broke the domino. I'm having the problem actually in NestJS (issue #451), tried to run it here and the same problem. Unfortunately, even the author of NestJS doesn't know how to fix it.

Heroes list reloads after voting

When you vote, the list reloads and it makes the page scroll to top.

advice on how to run with volumes for data and code

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request
• [ x ] support request!

Versions.

question: how do i get versions for these from command line. dont see to be on universal paths....

Repro steps.

The log given by the failure.

n/a

Desired functionality.

i would like to run the app and access both code and superhero data from my docker host. please can you identify file structure for the app so i can set up correct volumes.

Mention any other details that might be useful.

node should only require > v10 instead

According to the migration guide they just updated lately

https://update.angular.io/#7.0:8.0

Make sure you are using Node 10 or later.

Upgrade to new version

Hi
I installed node 8.2.1.. I need and installed @angular/cli 1.2.2. npm -v = 5.3.0 but after installation this in global module.. I would like to run this project with current version, would you like help what are steps need to do to run this application with current version

appreciated for the same...
Thanks
Bichitra

@sadsadsdasdas

sdsaddadad

Is it possible to post from Angular to Twitter?

Hi all
I want to post to twitter from Angular I don't know is this possible or not, I seen requests from node to Twitter but not from Angular,
if anyone knows please help me.

Versions.

angular version: 6.
node version: 8.11.2

npm version: 5.6.
Windows 10

i want to convert my existing angular 2 project into angular 6. Is it possible to convert angular 2 to 6 directly?

Bug Report or Feature Request (mark with an x)

• bug report -> please search issues before submitting
• feature request

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Image out of mat-card element

Description
Image out of mat-card element

To Reproduce
Steps to reproduce the behavior:

1. Go to the Homepage
2. Click on any of the images of heroes
3. You will be linked to the page 'hero detail'
4. See error

Expected behavior
The image would look nice if inside the mat-card

Screenshots
Please look at the following screenshot

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser Opera
• Version 62.0.3331.72
  

Firebase credentials are not working

firebase: {
apiKey: 'AIzaSyC4RNNlqXSwTM1Kt6Pbgutq2yuavSQ9WnU',
authDomain: 'ismaestro-angularexampleapp.firebaseapp.com',
databaseURL: 'https://ismaestro-angularexampleapp.firebaseio.com',
projectId: 'ismaestro-angularexampleapp',
storageBucket: 'ismaestro-angularexampleapp.appspot.com',
messagingSenderId: '965114235515',
},
I tried to generate a new private kay, on my Account, but the parameters are different.
Please give us instructions how to get the same .. working.

Angular 9 update

Please upgrade the starter to angular 9

npm run extract-i18n is not working

Describe the bug
Running the npm run extract-i18n command throws an error:

Error: Schema validation failed with the following errors:
  Data path "" should have required property 'outputPath'.
    at SwitchMapSubscriber.registry.compile.pipe.operators_1.switchMap [as project] (projects/angular8-example-app/node_modules/@angular-devkit/architect/src/architect.js:206:19)
    at SwitchMapSubscriber._next (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/operators/switchMap.js:49:27)
    at SwitchMapSubscriber.Subscriber.next (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:207:16)
    at SafeSubscriber.next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:145:22)
    at Subscriber._next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:89:26)
    at Subscriber.next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:207:16)
    at SafeSubscriber.next (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:145:22)
    at MergeMapSubscriber.notifyNext (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
    at InnerSubscriber._next (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (projects/angular8-example-app/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:66:18)
    at SafeSubscriber.__tryOrUnsub (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:207:16)
    at SafeSubscriber.next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:145:22)
    at Subscriber._next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:89:26)
    at Subscriber.next (projects/angular8-example-app/node_modules/@angular/cli/node_modules/rxjs/internal/Subscriber.js:66:18)

To Reproduce
Steps to reproduce the behavior:
Run npm run extract-i18n command

Expected behavior
Expect to extract i18n file

Desktop (please complete the following information):

• OS: iOS

strange output and CORS issues on docker image

Bug Report or Feature Request (mark with an x)

• [x ] bug report -> please search issues before submitting
• feature request

Versions.

I DONT KNOW HOW TO OBTAIN THIS INFORMATION I HAVE LOGGED INTO DOCKER CONTAINER BUT NG NODE AND NPM ARE NOT ON A KNOWN PATH

Repro steps.

i followed steps to build and run in docker and the app loads but the loader is running perpetually and also making a circular path on the screen itself....

The log given by the failure.

Angular library has started with this options:
Object { config: {…} }
main.6013eb5415a5fdb20c8b.bundle.js:1:1128809
Request for /assets/i18n/en.json took 242 ms.
main.6013eb5415a5fdb20c8b.bundle.js:1:117590
ERROR
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: error }
main.6013eb5415a5fdb20c8b.bundle.js:1:434568
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://nodejs-example-app.herokuapp.com/heroes. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
ERROR
Object { headers: {…}, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown url): 0 Unknown Error", error: error }

Desired functionality.

Mention any other details that might be useful.

http://localhost:4200

I'm trying to make your project run with Spring Boot API Madly, but I'm getting this error. Do you think it's CORS?

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CompanyComponent -> CompanyService]:
StaticInjectorError(Platform: core)[CompanyComponent -> CompanyService]:
NullInjectorError: No provider for CompanyService!
Error: StaticInjectorError(AppModule)[CompanyComponent -> CompanyService]:
StaticInjectorError(Platform: core)[CompanyComponent -> CompanyService]:
NullInjectorError: No provider for CompanyService!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
at resolveToken (core.js:1232)
at tryResolveToken (core.js:1182)
at

Configuration 'production' is not set in the workspace.

lack of configuration for production build

To Reproduce
ng build --prod

Content Security Policy (CSP) not correct

Describe the bug
Content Security Policy is not implemented properly due to many things, e.g. usage of 'unsafe-inline' for CSS & scripts.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://observatory.mozilla.org/analyze/angularexampleapp.com

Expected behavior
Some of the CSP things could be added, examples would include frameAncestors: ["'self'"],, removing "'unsafe-infline'" from scriptSrc, setting upgradeInsecureRequests: true for blocking loading of active/passive content over insecure FTP/HTTP.

Desktop (please complete the following information):

• OS: any
• Browser: any

Additional context
Due to Angular's Universal inline CSS rendering we actually can't achieve 100% CSP, so the "'unsafe-inline'" for CSS must be there, but others could be improved based on the Mozilla Observatory scan.

installation failure

Bug Report or Feature Request (mark with an x)

• [x ] bug report -> please search issues before submitting
• feature request

Versions.

node->
v11.1.0

ng->
@angular-devkit/architect 0.10.4
@angular-devkit/build-angular 0.10.4
@angular-devkit/build-ng-packagr 0.10.4
@angular-devkit/build-optimizer 0.10.4
@angular-devkit/build-webpack 0.10.4
@angular-devkit/core 7.0.4
@angular-devkit/schematics 7.0.4
@angular/cli 7.0.4
@angular/fire 5.1.0
@angular/flex-layout 7.0.0-beta.19
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.0.4
@schematics/angular 7.0.4
@schematics/update 0.10.4
ng-packagr 4.4.0
rxjs 6.3.3
typescript 3.1.3
webpack 4.19.1

Repro steps.

install as per instructions on gh homepage.

The log given by the failure.

npm install

> [email protected] install /app/ng7-example/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp WARN Tried to download(403): https://storage.googleapis.com/grpc-precompiled-binaries/node/grpc/v1.13.1/node-v67-linux-x64-musl.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v67 ABI, musl) (falling back to source compile with node-gyp)
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v67 ABI, musl) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error Connection closed while downloading tarball file
gypgyp ERR! configure error
gyp  ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:484:19)
ERR!gyp ERR! stack      at PythonFinder.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:406:16)
configure errorgyp
ERR! stackgyp     at F (/usr/local/lib/node_modules/npm/node_modules/which/which.js:68:16)
gyp ERR! stack      at E (/usr/local/lib/node_modules/npm/node_modules/which/which.js:80:29)
gypERR!  stackERR! Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp stack      at /usr/local/lib/node_modules/npm/node_modules/which/which.js:89:16
ERR! stack     at PythonFinder.failNoPython (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:484:19)
gypgyp  ERR!ERR! stack      at /usr/local/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gypstack     at PythonFinder.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:406:16)
gyp ERR! ERR!  stackstack     at /usr/local/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp     at F (/usr/local/lib/node_modules/npm/node_modules/which/which.js:68:16)
gyp  ERR!ERR!  stackstack     at FSReqCallback.oncomplete (fs.js:161:21)
gyp     at E (/usr/local/lib/node_modules/npm/node_modules/which/which.js:80:29)
gyp ERR! stack     at /usr/local/lib/node_modules/npm/node_modules/which/which.js:89:16
gyp  ERR!ERR! stack      at /usr/local/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gypSystem Linux 4.9.0-7-amd64
 ERR!gyp stack     at /usr/local/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp ERR!  stackERR!     at FSReqCallback.oncomplete (fs.js:161:21)
gyp command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--library=static_library" "--module=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl/grpc_node.node" "--module_name=grpc_node" "--module_path=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl" "--napi_version=3" "--node_abi_napi=napi"
gyp ERR!  cwdERR! /app/ng7-example/node_modules/grpc
gyp System  Linux 4.9.0-7-amd64
gypERR! node -v v11.1.0
gyp ERR!  ERR!node-gyp -v  v3.8.0
gypcommand "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--library=static_library" "--module=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl/grpc_node.node" "--module_name=grpc_node" "--module_path=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl" "--napi_version=3" "--node_abi_napi=napi"
gyp ERR!  not ok
ERR! cwd /app/ng7-example/node_modules/grpc
gyp ERR! node -v v11.1.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --library=static_library --module=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl/grpc_node.node --module_name=grpc_node --module_path=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl --napi_version=3 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/app/ng7-example/node_modules/grpc/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:970:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:257:5)
node-pre-gyp ERR! System Linux 4.9.0-7-amd64
node-pre-gyp ERR! command "/usr/local/bin/node" "/app/ng7-example/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /app/ng7-example/node_modules/grpc
node-pre-gyp ERR! node -v v11.1.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.3
node-pre-gyp ERR! not ok
Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --library=static_library --module=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl/grpc_node.node --module_name=grpc_node --module_path=/app/ng7-example/node_modules/grpc/src/node/extension_binary/node-v67-linux-x64-musl --napi_version=3 --node_abi_napi=napi' (1)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build --library=static_library`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-11-07T14_10_39_944Z-debug.log

Desired functionality.

error free install

Mention any other details that might be useful.

Firebase - Quota Exceeded

npm install not working

This is what i tried
dev@dev-VirtualBox:~/Documents/angular-material-ui$ docker build -t angular . Sending build context to Docker daemon 292.9MB Step 1/12 : FROM node:8-alpine as builder 8-alpine: Pulling from library/node 4fe2ade4980c: Already exists 9c94b1665db9: Pull complete 9b413d1ce95e: Pull complete Digest: sha256:dfc36646eddf67cb2e18d9be1cdecb5ead4907b0593297bdc471f4e90d698d89 Status: Downloaded newer image for node:8-alpine ---> 9395a05e4ef9 Step 2/12 : COPY package.json package-lock.json ./ ---> 3e7444a0471e Step 3/12 : RUN npm set progress=false && npm config set depth 0 && npm cache clean --force ---> Running in ef7d026b5463 npm WARN using --force I sure hope you know what you are doing. Removing intermediate container ef7d026b5463 ---> ae16923b0e75 Step 4/12 : RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app ---> Running in e5641a0d21f5

my docker not proceeding after this.

May I update lang of Chinese about zh.json?

es/heros routing not working

Hi All

Thanks for this excellent sample application

It is working fine with en locale but when i select spain (es) from drop down , it is redirecting to 404 error page . please help me to fix this one, Thanks. it seems npm start:es also not working