We Keep Coding

Angular 2 *ngFor not working as intended even when CommonModule imported

I have one feature module that I created via CLI, so it imports the common module.
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HomeComponent } from './home/home.component';
#NgModule({
declarations: [HomeComponent],
imports: [
CommonModule
]
})
export class HomeModule { }
But when I do this normal paragraph appears but paragraph with *ngFor part doesn't work, it does not display anything.
<p> Some normal paragraph </p>
<p *ngFor = "let i of [1,2,3]" >home works!</p>
I also tried to create a shared module, import and export the common module there, and import that shared module in my feature module but it didn't work.
What could cause the problem?

I have also faced that problem. after looking at my app.module.ts I found that shared my custom module is not imported there. After importing it in app module my problem has been solved

angular 8 crashed when importing OAS generated api

I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }

Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED

How to debug angular-elements?

I built a project using angular-elements and managed to successfully embed a component into another application. What I would like to do now is be able to debug the original component from the application it is included in.
All the logic for the component is in one file, which is a concatenation of 4 files created by Angular during build - runtime.js, polyfills.js, scripts.js, main.js.
The js.map files for those 4 files are also created during build and I can successfully place & hit a breakpoint in the original main.ts file (after including the jsmaps in the directory with the output file for the element). However, I have been unable to find a way to debug the actual component.ts file from the application that is using it. The js.map for that component is also included in the bundle and I can view the component.ts file through Chrome DevTools, but if I put any breakpoints they will never be hit.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injector } from '#angular/core';
import { createCustomElement } from '#angular/elements';
import { FormsModule } from "#angular/forms";
import { FirstWebElementComponent } from './first-web-element/first-web-element.component';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { HttpClientModule } from '#angular/common/http';
import { ScenarioSelectorComponent } from './scenario-selector/scenario-selector.component';
#NgModule({
declarations: [
AppComponent,
ScenarioSelectorComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
HttpClientModule
],
providers: [],
entryComponents: [ScenarioSelectorComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const scenarioSelector = createCustomElement(ScenarioSelectorComponent, {injector: this.injector});
customElements.define('scenario-selector', scenarioSelector);
}
}
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
To the best of my understanding, the component.ts file logic is included in main.js file during build, but there doesn't seem to be a map created describing
the connection between the two.
For reference, here is the stuff I read / watched.
Building Custom Elements / Web Components with Angular 6
Angular Elements – A Practical Introduction To Web Components With Angular 6

Angular CLI doesn't support inline source maps anymore. Your best bet is to replace ng build with ngx build plus - https://github.com/manfredsteyer/ngx-build-plus
Then add a build plugin to replace the devtool with inline-source-map which will inline the sourcemaps into your bundle file enabling you to debug.
See: https://stackoverflow.com/a/54548171/1829251

WebStorm not recognising some Angular components - mat-toolbar unknown element

I am using Angular 5 with Angular material and WebStorm version 2017.3.1
When I try to use the <mat-toolbar> element with the following code
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {MatToolbarModule} from '#angular/material';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatToolbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<mat-toolbar>
<span>Title</span>
</mat-toolbar>
WebStorm gives me an error:
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
However, this renders correctly in the browser:
Because it is included in the module with this line import {MatToolbarModule} from '#angular/material'; and
imports: [
BrowserModule,
MatToolbarModule
],
Is there something I'm missing here? Why does WebStorm (and also when running tests via ng test) give me this error? How can I prevent this error/warning?

This error is generated via TypeScript.
You can see the error in the console if you click on the TypeScript tab at the bottom.
It's possible to make this error go away if you force the TypeScript service to restart by clicking on the arrow in a circle.
This requires a compile first.
So far, I cannot find a way to map this to a shortcut.
Thanks to #lena and #Z.Bagley for helping me figure this out.

The error comes from Angular language service.
Looks related to https://github.com/angular/angular/issues/14961; see if updating Typescript to 2.5.2+ helps

I know this isn't the problem the OP had, but wanted to share this in case someone comes across this post and is still experiencing this problem in WebStorm and are not getting TypeScript compile errors, here's what worked for me: In WebStorm select menu item File > Invalidate Caches / Restart. This problem happened to me in WebStorm 2019.3 .

Bootstrapping hybrid AngularJS & Angular application causing very slow rendering

I'm currently trying to bootstrap a large Angular 1.6.1 app to Angular 4.0.1 using the UpgradeModule. I've managed to successfully get the app to run, but I've noticed a significant slowdown with rendering times - so bad that it completely freezes after triggering a few events.
I suspect that it is an issue with the digest loop, and running the profiler I can see that the zonejs function calls are taking a very long time to process.
It's also unclear whether I should expect significantly slower rendering times whilst running a hybrid app?
I've also noticed some odd behaviour that may be related to the same issue. The promises seem to be working inconsistently. It seems like server responses are successfully returning, but the angular promises doesn't detect that it has returned - resulting in an infinite loading icon (I have a loader component which displays a loading icon until ALL promises have returned).
Is there anything in particular I could check for, that may be causing the slow rendering?
Here is my set up.
app.ts - main entry file
import 'zone.js';
import 'reflect-metadata';
import { NgModule } from '#angular/core';
import { UpgradeModule } from '#angular/upgrade/static';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './main.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['main']);
});
main.module.ajs.ts - my AngularJS module (I've removed all dependencies for readability)
// AngularJS entry
import './exampleDep/exampleDep.module';
import { CONFIGURATION } from '../config';
angular
.module('main', [
'ngRoute',
'exampleDep'
])
.config(applicationRouting)
.run(applicationInit)
.constant('CONFIGURATION', CONFIGURATION);
function applicationInit($rootScope, CONFIGURATION) {
$rootScope.CONFIGURATION = CONFIGURATION;
}
function applicationRouting($routeProvider, $analyticsProvider) {
$analyticsProvider.firstPageview(false);
$analyticsProvider.virtualPageviews(false);
$routeProvider
.when('/?', {
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
main.module.ts - my Angular module
// Angular entry
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
#NgModule({
imports: [
BrowserModule,
UpgradeModule
],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {}
}