I am having angular 12 in my local and building project which runs fine without any error.
My local setup:
Angular CLI: 12.0.5
Node: 12.16.3
Package Manager: npm 6.14.4
OS: win32 x64
Angular: 12.0.5
But while building my project on the linux server it is giving this error with nothing much to work with.
Server setup:
Angular CLI: 12.0.5
Node: 14.18.1
Package Manager: npm 6.14.15
OS: linux x64
Angular: 12.0.5
Error: src/app/app-routing.module.ts:34:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors
34 export class AppRoutingModule { }
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NotifyFormComponent } from './notify-form/notify-form.component';
import { LoginComponent } from './login/login.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
HeaderComponent,
FooterComponent,
NotifyFormComponent,
LoginComponent
],
imports: [
AppRoutingModule,
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { LoginComponent } from './login/login.component';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { NotifyFormComponent } from './notify-form/notify-form.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path:'',redirectTo:'/',pathMatch: 'full'},
{
path:'',
component: HomeComponent,
children:[
]
},
{
path:'notify',
component: NotifyFormComponent
},
{
path:'login',
component: LoginComponent
}
// {
// path:'**',
// component: HomeComponent
// }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
Please help me if I am doing anything horribly wrong here. It is just a simple project to test with. Thanks a lot in advance.
I went on a bit of a research spree and here's an official issue for it https://github.com/angular/angular/issues/35399. Also here's another question for it error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. But I'll go ahead and summarize things I've found anyways.
For many people it worked simply restarting and rebuilding the project, or doing a full forced npm cache clear and reinstalling node_modules and rebuilding it.
People have suggested disabling "ivy" in tsconfig works, however it's also been mentioned that while it works it's not the recommended way of fixing it.
This can apparently also happen if you've added components to imports instead of declarations.
This can apparently also happen if you've installed some packages as root or if you for some reason don't have permissions on all the packages. Which was fixed with doing a chown on the directory, however the real solution is to install packages correctly in the first place and configuring the npm config so you don't ever install packages with root permissions. So essentially if you installed packages with root and try and run the project as non root, it will give this issue.
Some people got the error when they added a service to imports instead of providers.
People also get this error if they name the package incorrectly i.e. SomeComponent instead of SomeComponentModule.
In your specific case, you've imported the app router before browser module, I have no idea if that could cause an issue but everywhere I've seen the browser module is added before the app, so swap them around if nothing else work and see if that works.
That's about everything I could find.
you have to check whether you import everything needed into the app.module.ts and then check the linux maybe there is any other component you need to add but it should work fine this way
Try npm version should be > 8.1.0 and node version should be > v16.13.0
I had this issue when I transferred a project from Windows to Linux.
The paths on the imports for my modules had capital letters and this failed in linux and worked in windows.
For example either of the following will work on Windows:
import { switchMap, tap } from 'rxjs/operators';
import { switchMap, tap } from 'rxjs/Operators';
On Linux only the lower case version will work:
import { switchMap, tap } from 'rxjs/operators';
check if the paths mentioned in 'templateUrl' and 'styleUrls' are correct in the components wich are related to this module who has a problem,
#Component({
selector: 'app-navigation-menu-item',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss']
})
in my case, this was the bug.
In my case problem was the incompatible version of Nodejs.
Run ng version to see if the installed node version is compatible with angular version. If not supported node installed out will be like Node: 16.x.x (Not Supported)
Uninstalling and installing compatible version of node solved the problem.
I fixed the problem with ng serve command .When you change configurations in angular.json file you faces this problem.
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
I am a newbie in Angular4
I want to integrate CKeditor in Angular4
As i follow this url but it's for Angular 2 not working in Angular 4.
As i have check there
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js",
},
}
});
but there is no any option for System.config in Angular 4
Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting
How can i integrate CKeditor in Angular4?
I assume you use angular-cli to create your angular 4 project , you dont need system.config in angular-clli, that only used in system.js, and the code you have there is telling system.js where to find the ckeditor module.
in case you not clear, just check whether your project have an 'angular-cli.json' file, if there is, then you can follow the below steps:
use npm install ng2-ckeditor to install the ng2-ckeditor
in your app.module.ts, you should have something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CKEditorModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and then
in your index.html add
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
inside head section. alternatively, you can save the js file inside your project, then insde .angular-cli.json file, add the file of that file into scripts array
then you are good to use ckeditor in your angular 4 project
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