"Please add a #NgModule annotation" Error on Angular2 - javascript

I have made a custom angular2(5.0.x) module that looks like this :
import { GuageService } from './services/guage.service';
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { GuageComponent } from './guage/guage.component';
#NgModule({
declarations: [GuageComponent],
imports: [
CommonModule
],
providers : [GuageService],
exports : [GuageComponent]
})
export class GuageModule {}
I use it in my app modules like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { DxButtonModule, DxCircularGaugeModule } from 'devextreme-angular';
import { GuageModule } from '#kronsbi/bi-module-template';
import { HttpClientModule } from '#angular/common/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxButtonModule,
DxCircularGaugeModule,
HttpClientModule,
GuageModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
When I try to start my app I get the following error.
Unexpected value 'GuageModule' imported by the module 'AppModule'. Please add a #NgModule annotation.
UPDATE
tsconfig for the main app:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
ts config for the GuageModule package:
{
"compilerOptions": {
"baseUrl": ".",
"declaration": true,
"stripInternal": true,
"experimentalDecorators": true,
"strictNullChecks": true,
"noImplicitAny": true,
"module": "es2015",
"moduleResolution": "node",
"paths": {
"#angular/core": ["node_modules/#angular/core"],
"rxjs/*": ["node_modules/rxjs/*"]
},
"rootDir": ".",
"outDir": "dist",
"sourceMap": true,
"inlineSources": true,
"target": "es5",
"skipLibCheck": true,
"lib": [
"es2017",
"dom"
]
},
"files": [
"index.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true
}
}

If you are using Angular 5.0 you need to add "annotationsAs": "decorators" to the "angularCompilerOptions" for your package.
Angular 5 introduced new optimizations and by default the decorators are removed on compile because they are not needed at runtime. This does not work for packages as you already discovered. You can read about this in the Angular 5 announcement blog the "Build Optimizer" paragraph mentions this. Version 5.0.0 of Angular Now Available
I use this settings in my angular packages:
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"skipMetadataEmit": false,
"strictMetadataEmit": true,
"annotationsAs": "decorators"
}

I had the same problem. With angular 5+ and angular cli 1.5 it says that your code is not compatible and also your library is scoped package. I have managed to fix it with adding
export * from './your-path'
In all my files (exporting everything from my library).
As i understood its you import as 3 party library You can try to run the application with
ng serve --preserve-symlinks
also add flatModuleId in src/tsconfig.es5.json accordingly:
"flatModuleId": "#scope/library-name"
Link to github here
There is issue on github for more information

This is most likely an issue with the way your npm package is being created. In your package.json for your GuageModule are you defining a main? This should point to the entry point to your npm package. Here is an example of mine.
"main": "./dist/module.js",
Then if you want typings from GuageModule in your main app you'll need to go to your tsconfig.json and under compilerOptions set declaration to be true to generate the typings files.
"compilerOptions": {
...
"declaration": true
...
},
Then finally in your package.json you will need to point to the entry point for your typings file.
"types": "./src/app/layout.module.d.ts"
Now you should be able to import your module and have typings on the module that you imported. Hope this helps!

Please add "emitDecoratorMetadata": true in the compilerOptions of tsconfig.json of your gauge module

Related

[ERR_MODULE_NOT_FOUND]: Cannot find package imported

I would like to change import from ../../../db/index.js to db/index.js
I have already added this setting in my jsconfig.json but I still got this error.
{
"compilerOptions": {
"module": "commonjs",
"baseUrl": "src"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
Finally found the right answer after trying different kinds of approaches.
Eslint import resolver and babel import resolver seem to be not working.
Add the ff:
package.json
"imports": {
"#root/*": {
"default": "./src/*"
}
},
If you want to access that import directy via ctr+click/left click create jsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"baseUrl": "./src",
"paths": {
"#root/*": ["./*"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
Usage in your index.js:
import level1 from '#root/level1/index.js';
instead of:
import level1 from './level1/index.js';
https://marian-caikovski.medium.com/4-ways-to-avoid-double-dots-in-module-specifiers-f5b6086cd9d1
These are two very different things:
import { something } from '../../something' - local import (file you've created)
import { something } from 'something' - import from a package (e.g. installed with yarn add something
If you'd like to clean up your imports and be able to do something like:
import { something } from '#components/something' then you need additional plugins/setup. It's worth looking into babel-plugin-root-import for example.
There might be other plugins/tools to do that but I've never had the need do do that so I don't know.

TypeScript import

I have the next import statement in my .ts file:
import { IRemoteAudioSource } from "js/Abstractions/Interfaces/AudioSource/IRemoteAudioSource";
Visual studio finds such file, no problems. But when i run my solution i get the error in console:
Uncaught TypeError: Failed to resolve module specifier "js/Abstractions/AbstractClasses/AudioModel". Relative references must start with either "/", "./", or "../".
And when I try to specify the relative path(import { IRemoteAudioSource } from "/js/Abstractions/Interfaces/AudioSource/IRemoteAudioSource";), visual studio does not find such a file.
What am i doing wrong?
tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"sourceMap": false,
"watch": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true
},
"plugins": [ { "name": "tslint-language-service" } ]
}
You have to import starting with "/".
Always do a import with folders way.
Like you have to do as -
import { IRemoteAudioSource } from "./js/Abstractions/Interfaces/AudioSource/IRemoteAudioSource";
as error says.
I added this to compiler option
"paths": {
"/*": [ "./*" ]
},
and used relative path for import. These actions solved the problem

Typescript shared path, unable to export const

I'm working on a project where the front-end and the back-end reside in the same directory and both use TypeScript.
I am using a shared path to store some interfaces and constants between the two projects.
But, when I try to export a constant from any file in /shared, I get a :
Error: Cannot find module '#shared/test'
server-config.ts:
"compilerOptions": {
"baseUrl": "./src/server/",
"sourceMap": false,
"module": "commonjs",
"moduleResolution": "node",
"target": "ES2017",
"types": ["node"],
"outDir": "./dist/",
"allowJs": true,
"typeRoots": [
"node_modules/#types"
],
"paths": {
"#shared/*": ["../shared/*"]
},
/shared/test.ts:
// If I remove the following line, no compile error, even finds TheTest
export const TEST = 'test';
export class TheTest {
}
import
// << Module not found (only if I import TEST)
import { TEST, TheTest } from '#shared/test';
export function Foo() {
console.log(TEST);
}

how could I define a global module by typescript and not add to compiled file?

If a have a global module in a.ts:
export = class A(){
}
I want to import this module into a lot of .ts file, but when I do this, the module A will be compile to every file that I import module A.
So how can I define a global module, when I import it, this module will not be add to the compiled file.
my tsconfig.json :
{
"compilerOptions": {
"module": "amd",
"target": "es5",
"sourceMap": false,
"outFile": "index.js",
"moduleResolution": "classic",
"baseUrl": "./",
"paths": {
"jQuery": ["types/jquery.d.ts"],
}
},
"exclude": [
"node_modules"
]
}

Cannot find namespace 'ng'

I am rewriting simple angular 1.6 project to typescript. I have declared typings dependencies and they are compiled and installed. Despite that there is compilation error "Cannot find namespace 'ng'" in my service.
Angular name is also not recognized.
Screenshot
tsconfig.json
{
"files": [
"app/**/*.ts",
"app/**/*.js",
"main.js",
"renderer.js"
],
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"declaration": false,
"noImplicitAny": false,
"allowJs": false,
"rootDir": ".",
"typeRoots": ["./typings"]
}
}
typings.json
{
"dependencies": {
"angular": "registry:dt/angular#1.6.0+20170321201455"
},
"globalDependencies": {
"jquery": "registry:dt/jquery#1.10.0+20170310222111"
}
}
service.ts
module Services {
export interface IMyService {
}
export class MyService {
http: ng.IHttpService;
location: ng.ILocationService;
constructor($http: ng.IHttpService, $location: ng.ILocationService) {
this.http = $http;
this.location = $location;
}
}
}
Maybe you should add angular types to tsconfig.json as following:
{
...
"compilerOptions":
...
"types": [
"angular"
],
}
If that won't work, since typings are deprecated, I suggest you to install #types/angular with npm:
npm install --save-dev #types/angular
and include it as above.
Cheers.
Add below package npm.
npm install --save-dev #types/angular
then include the following line on top of the .ts file:
import * as angular from "angular".
It will solve error. thanks.

Categories

Resources