I was having some problems with some node dependencies, so I deleted the whole node_modules folder, after that running ng serve will lead to the mentioned error
This is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NavComponent } from './shared/nav/nav.component';
import { FooterComponent } from './shared/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
NavComponent,
FooterComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And my 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)
.catch(err => console.log(err));
Please go through this link.
The issue is fixed only when manually re installed angular/cli. The webpack should come as a part of #angular/cli.
npm remove webpack
npm install --save-dev #angular/cli#latest
.
This should fix your issue.
If this didn't, clear the whole node_modules folder
then
npm cache clean --force
npm install
npm install --save-dev #angular/cli#latest
If #angular/cli install fails
Retry npm install --save-dev #angular/cli#latest again.
I got the same error because of a typo in loadChildren when trying to lazy load a module.
Related
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
Index html page don't show anything, not event "App works" like a simples initial project
ng --version
Angular CLI: 1.6.0
Node: 8.9.1
OS: darwin x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.0
: 0.0.35
: 0.0.22
: 0.0.41
: 1.1.0
: 1.9.0
: 0.1.10
: 0.0.10
typescript: 2.4.2
webpack: 3.10.0
Mac OS Sierra
Repro steps
app-routing-module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{path:'home', component: HomeComponent},
{path:'about', component: AboutComponent},
{path:'', redirectTo: '/home', pathMatch: 'full'}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
index.html
AngularProjeto
After all this i don't get anything when a run "ng serve --open", not even an error
this is the link for pra project
https://github.com/afabricioa/startAngular
someone to help?
tried again just cloning my repository, then i ran "ng completion --bash", "npm install" and "ng serve --open" and the index page is still blank it appears that angular can't render nothing from components, i ran "ng completion --bash" just in case, but even without this command i still get the same thing
When I downloaded your project, it is displaying the app root component HTML. So i'm not sure why you're having this issue. I am not able to reproduce.
Someone deleted my previous post but I can deduct some possible reasons for your problem.
It cannot be because of the hardware because I have had the same problem before even on windows 10 and 7 both on desktop and laptop and Linux 16.04 lots.
I've tested both on chrome and firefox and the same problems are there.
I suggest you have a look at this https://github.com/Ismaestro/angular5-example-app.
It is the angular 5 example app and it is fully functioning. Also, you can try the demo here https://angularexampleapp.com/
I am a complete newbie to anything related Javascript, but I need to develop a rich webapp and I trying to learn Angular2 with Typescript.
I am using Angular 2 (version 2.4.2)
I am attempting to use the angular2-grid plugin
When I try to install it, I get this worrying result:
$ npm install angular2-grid
first-app#0.0.0 /home/nick/dev/angular2/first-app
├── UNMET PEER DEPENDENCY #angular/core#2.4.2
└── angular2-grid#0.11.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN angular2-grid#0.11.2 requires a peer of #angular/core#2.0.0 but none was installed.
If I ignore the warmings and then try and use it anyway, I get this error in the browser log:
Can't bind to 'ngGrid' since it isn't a known property of 'div'.
Here is my component:
import { Component } from '#angular/core';
import { NgGridModule } from 'angular2-grid';
#Component({
selector: 'app-mygrid',
template: `
<h1>My First Angular 2 App</h1>
<div class="grid" [ngGrid]="{\'max_cols\': 6, \'auto_resize\': true}">
<div class="grid-item" [ngGridItem]="{\'sizex\': 2, \'sizey\': 3}">
</div>
</div>
`,
styles: []
})
export class MygridComponent implements OnInit {}
Is the error in the log related to the warning when I tried to install the angular2-grid? Did it not install? How can I correct this?
Here is a workaround until the problem is fixed:
We inject the components in our src folder like it is our components (look like vendoring).
Create an angular2-grid folder somewhere in your src folder (for example, I placed it in src/app) and copy paste NgGrid.css, main.ts + components / directives / modules / interfaces folders
Import it in your app module : import { NgGridModule } from './angular2-grid/modules/NgGrid.module'; (The path is relative of where you put your angular2grid, here is on the root of app folder)
Use this lib as described in the repo's readme but adapt your dependency path (example in app.component.ts: import { NgGridConfig, NgGridItemConfig } from "./angular2-grid/interfaces/INgGrid";
We do it for the project: project with angular2-grid
Did you import the "NgGridModule" in your root module like below example?
//Root module
import { NgModule, enableProdMode } from '#angular/core'
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic'
import { BrowserModule } from '#angular/platform-browser'
import { MygridComponent } from './mygridcomponent'
import { NgGridModule } from 'angular2-grid';
#NgModule({
imports: [ BrowserModule, NgGridModule ],
declarations: [ MygridComponent ],
providers: [],
bootstrap: [ MygridComponent ]
})
export class AppModule { }
// main entry point
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
I am trying to use the List module from immutable.js on a new Angular 2 project. When I do that, the browser tries to GET http://localhost:3000/immutable and fails with a 404 Not Found error.
Here is what I did:
I cloned the Angular 2 quickstart
repo from Github (https://github.com/angular/quickstart)
I ran npm install and npm install -D immutable
I then modified app.module.ts as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { List } from 'immutable';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor() {
let list = List.of(1,2,3);
}
}
When I npm start the project, I get the 404 error.
Am I missing something obvious?
After more googling, I found that the answer was pretty easy. I just needed to add a new element to the map in systemjs.config.js:
// other libraries
[...]
'immutable': 'node_modules/immutable/dist/immutable.js'
I'm ramping up on Angular 2 and have created my project using Angular 2 CLI's
ng new <my project name>
However, I noticed that this project doesn't include an app.module.ts file by default.
When I try creating my own file and setting it up with my default settings
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I get a build error saying
... #angular/core has no exported member 'NgModule'.
Any ideas on how to get the module file to work with Angular CLI?
Thanks
May be due to reasons please make sure
please update all your #angular dependencies in package.json to at least "2.0.0-rc.5"
check this property in tsconfig.json file
moduleResolution": "node", // <-----
like here https://stackoverflow.com/a/38900745/5043867