introduction-to-angular's Issues
Please provide updated version
I tried node 16, 18, 20 and run always into several update / incompatibilty problems with angular cli and other dependenies. Can't get it to run within a reasonable time range.
Please update tutorial so it is running with current node and angular cli versions!
B.t.w. i run on arm Mac, so this might contribute to the problems...
What worked:
- Using node 16 latest stable
- Install specific version:
npm install -g @angular/[email protected]
instead ofnpm install -g @angular/cli
Page 6, section 4
I believe housing-location.component.html should be replaced with housing-list.component.html
ng generate component housing-list already exists (in src/app/housing-list)
{rpompt}: ~/trng/introduction-to-angular-main$ ng generate component housing-list
A merge conflicted on path "/src/app/housing-list/housing-list.component.css".
Incorrect method name
On https://codelabs.developers.google.com/introduction-to-angular#6, the method name is incorrect.
Update HousingListComponent to add a new method called selectLocation that accepts a value of type housingLocation as a parameter:
selectHousingLocation(location:
HousingLocation) { }`
The method name is selectLocation
but should be selectHousingLocation
.
method name 'updateSelection' in description is wrong (typo)
In step 8 of part 7 is a typo:
- Add a new method called
updateSelection
with a parameter calledlocation
and with a type ofHousingLocation
.updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}
updateSelection
in should be updateSelectedLocation
.
The method in the code is correct (although the code isn't completely correct --> #13), the description before isn't.
To check Version of the angular
It is not "ng -version". please modify it to "ng version". with ng --help, I came to know
minor: command listed as `ng -version`
returns an error
(now) should be ng version
superfluous (wrong!) method in code example
Version check after installation script error
ng -version
doesn't work. It should be
ng version
My OS Windows 10
Typo issue
https://codelabs.developers.google.com/introduction-to-angular#6
7. Display the details
In the second paragraph in french we have to write
Dans Angular, @input() envoie des données du parent à l'enfant
instead of Dans Angular, @input() envoie des données de l'enfant à l'enfant
Missing article element in template.
On the page https://codelabs.developers.google.com/introduction-to-angular#4, the instructions mention
- In housing-list.component.html, update the article element in the template to use *ngFor so that you can display the array entries in the browser:
But, so far, no <article>
element has been defined anywhere. It seems it is missing in step four of https://codelabs.developers.google.com/introduction-to-angular#2
- In your code editor, navigate to housing-list.component.html, remove the existing code, and replace it with:
<label for="location-search">Search for a new place</label>
<input id="location-search" placeholder="Ex: Chicago"><button>Search</button>
Angular is not compatible to Angular CLI
I got the below response when run the server, "ng serve".
"This version of CLI is only compatible with Angular versions ^16.0.0,
but Angular version 14.3.0 was found instead.
Please visit the link below to find instructions on how to update Angular.
https://update.angular.io/"
wrong file name
Step 6: filter search results
4. In housing-location.component.html, replace locationList with results in the ngFor:
SHOULD REPLACE
housing-list.component.html
inconsitent style (typo)
In step 5 there's a space missing at the beginning of the import of HousingLocation
:
import { Component, OnInit, Input } from '@angular/core';
import {HousingLocation } from '../housing-location';
^^^
Wrong method name
In part 7 (Display the details) step 3 it is written "....add a new method called selectLocation..." I believe it should be selectHousingLocation
Also in step 8 it is written "Add a new method called updateSelection..." I believe it should be updateSelectedLocation
Incorrect command
On: https://codelabs.developers.google.com/introduction-to-angular#1
Section: Install the Angular CLI
Issue: The command ng -version is invalid. It should be ng version
Missing promised instructions around deploying Angular App to Firebase Hosting
Typo: housing-list-component.html should be housing-list.component.html
There is a typo in section 7. Display the Details part 5.
The line "In housing-list-component.html update the article element to have a new button child" has a typo.
"housing-list-component.html" should be "housing-list.component.html"
Fix for This version of CLI is only compatible with Angular versions ^17.0.0, but Angular version 13.2.6 was found instead.
Fix for This version of CLI is only compatible with Angular versions ^17.0.0, but Angular version 13.2.6 was found instead.
OR similar version issues.
Once you have cloned the repository to your local directory of angular\introduction-to-angular you will need to run the following installs to support the code that was originally created in Angular 13.2.6
From with the directory 'introduction-to-angular' execute the following commands separately:
npm install @angular/[email protected] @angular/[email protected] @angular-devkit/build-angular
Do not be tempted to update any of the audited packages as this will update your need 13.2.6 components to whatever more recent version of the Angular CLI you are using.
I hope this helps someone : )
In text, reference housing-location.component.html shoud be housing-location.component.html
Hi,
In step 6. Filter search results, item 4 has a reference to a html (housing-LOCATION...)
4. In housing-location.component.html, replace locationList with results in the ngFor:
but the correct name of the file is housing-LIST...
4. In housing-list.component.html, replace locationList with results in the ngFor:
Thanks (^_^)
component name mistake in codelabs?
In the "polish the templates" section, step no.4 mentions updating the code in the housing-location.component.html. I believe this should be housing-list.component.html
Garbage in code sample
On https://codelabs.developers.google.com/introduction-to-angular#6, the code sample has garbage after the method definition.
Add a new method called updateSelection with a parameter called location and with a type of HousingLocation.
updateSelectedLocation(location: HousingLocation) { } searchHousingLocations() {}
This part should not be included --> searchHousingLocations() {}
.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.