bharatraj88/angular2-tooltip

Problems including angular2-tooltip to my project

Closed this issue · 8 comments

Hi there, first, thank for adding the extra functionality. I am following your example in order to use it in my project but I am getting this error when compiling:

Something wrong with my compiler's options?

RROR in .//angular2-tooltip/src/content/options.d.ts
Module build failed: Error: Debug Failure. False expression: Output generation failed
at Object.assert (/Users/agustincelentano/SideProject/StudioWeb/node_modules/typescript/lib/typescript.js:2432:23)
at Object.transpileModule (/Users/agustincelentano/SideProject/StudioWeb/node_modules/typescript/lib/typescript.js:54646:18)
at State.fastEmit (/Users/agustincelentano/SideProject/StudioWeb/node_modules/awesome-typescript-loader/src/host.ts:264:39)
at transform (/Users/agustincelentano/SideProject/StudioWeb/node_modules/awesome-typescript-loader/src/index.ts:164:28)
at transformationFunction (/Users/agustincelentano/SideProject/StudioWeb/node_modules/awesome-typescript-loader/src/index.ts:89:48)
at compiler (/Users/agustincelentano/SideProject/StudioWeb/node_modules/awesome-typescript-loader/src/index.ts:105:34)
at Object.loader (/Users/agustincelentano/SideProject/StudioWeb/node_modules/awesome-typescript-loader/src/index.ts:18:18)
@ ./
/angular2-tooltip/src/tooltip.ts 14:18-48

tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"moduleResolution": "node",
"noImplicitAny": false,
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true

},
"exclude": [
"node_modules",
"dist",
"public/js"
],
"compileOnSave": false,
"buildOnSave": false,
"angularCompilerOptions": {
"skipMetadataEmit" : true
}
}

package.json

"name": "studio-web",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch --display-error-details",
"build:prod": "del-cli public/js/app && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app//*.js' 'public/js/app//.js.map' '!public/js/app/bundle.js' '!public/js/app/.chunk.js' 'assets/app//*.ngfactory.ts' 'assets/app//*.shim.ts' && npm run minify ",
"minify": "uglifyjs public/js/app/bundle.js --screw-ie8 --compress --mangle --output public/js/bundle.min.js"
},
"dependencies": {
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/compiler-cli": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/platform-server": "2.1.2",
"@angular/router": "3.1.2",
"@angular/upgrade": "2.1.2",
"angular2-clipboard": "^1.0.1",
"angular2-tooltip": "^2.2.0",
"async": "^2.1.2",
"bcryptjs": "^2.3.0",
"body-parser": "~1.15.2",
"cookie-parser": "~1.4.3",
"core-js": "^2.4.1",
"debug": "~2.2.0",
"express": "~4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"eyes": "^0.1.8",
"fs": "0.0.1-security",
"hbs": "~4.0.1",
"html-webpack-plugin": "^2.24.1",
"htmlparser2": "^3.9.2",
"jquery": "^3.1.1",
"jsonwebtoken": "^7.1.9",
"mongoose": "^4.4.12",
"mongoose-unique-validator": "^1.0.2",
"morgan": "~1.7.0",
"ng2-select2": "^0.6.0-beta.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-rc.1",
"serve-favicon": "~2.3.0",
"uglifyjs": "^2.4.10",
"xml2js": "^0.4.17",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"angular2-router-loader": "^0.3.2",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^2.2.4",
"del-cli": "^0.2.0",
"html-loader": "^0.4.4",
"raw-loader": "^0.5.1",
"ts-loader": "^1.0.0",
"typescript": "^2.0.3",
"webpack": "^1.13.3",
"webpack-merge": "^0.15.0"
}
}

app.module.ts

@NgModule({
declarations: [
AppComponent,
UrlComponent,
UrlListComponent,
UrlInputComponent,
UrlsComponent,
UrlNightlyComponent,
HeaderComponent,
Select2Component,
UrlNightlyOneComponent,
VersionsComponent

],
imports: [
    BrowserModule,
    FormsModule,
    routing,
    ReactiveFormsModule,
    HttpModule,
    CommonModule,
    ClipboardModule,
    ToolTipModule
],
providers: [UrlService],
bootstrap: [AppComponent]

})
export class AppModule {

}

The Compiler options seems to be fine. Can you help me by sharing your exception stack trace. The above stack trace is not clear. Also, share me the snippet, how you are including tooltip in the template.

I am not able to even to compile, I only wanted to include the "library"ready to use it. But it brakes before calling it. The strage thing is that I had to add it by specifying the whole URL to the module itselft which is weird becuase I am using another third party libraries only calling them by its name

import { ToolTipModule } from '../../node_modules/angular2-tooltip/src/tool-tip.module';

if i do this way: import { ToolTipModule } from '.angular2-tooltip'; it gives me an error. resource not found.

This is the whole stack trace:

ERROR in ./~/angular2-tooltip/src/tool-tip.module.ts
Module parse failed: /Users/agustincelentano/SideProject/StudioWeb/node_modules/angular2-tooltip/src/tool-tip.module.ts Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (6:0)
at Parser.pp$4.raise (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.pp$7.next (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2413:10)
at Parser.pp.eat (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:536:12)
at Parser.pp.semicolon (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:581:15)
at Parser.pp$1.parseImport (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:1243:10)
at Parser.pp$1.parseStatement (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:719:46)
at Parser.pp$1.parseTopLevel (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/agustincelentano/SideProject/StudioWeb/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./assets/app/app.module.ts 29:24-90

@agustincelentano
Currently you can import it as
import { ToolTipModule } from 'angular2-tooltip/src/tool-tip.module';

in the next release i will make ToolTipModule to be available at the root it self. Thanks for pointing this out

It seems work , now I am getting this different error related to the parse:

ERROR in ./~/angular2-tooltip/src/tool-tip.module.ts
Module parse failed: /Users/agustincelentano/SideProject/StudioWeb/node_modules/angular2-tooltip/src/tool-tip.module.ts Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (6:0)
at Parser.pp$4.raise (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2756:10)
at Parser.pp$7.readToken (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2477:17)
at Parser.pp$7.nextToken (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2468:15)
at Parser.pp$7.next (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:2413:10)
at Parser.pp.eat (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:536:12)
at Parser.pp.semicolon (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:581:15)
at Parser.pp$1.parseImport (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:1243:10)
at Parser.pp$1.parseStatement (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:719:46)
at Parser.pp$1.parseTopLevel (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock. (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/agustincelentano/SideProject/StudioWeb/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/agustincelentano/SideProject/StudioWeb/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose as oncomplete
@ ./assets/app/app.module.ts 29:24-71

got same error as @agustincelentano . Do we have any workaround?
angular 2.4.1 here and typescript 2.0

@danailvidev @agustincelentano
Can you try with v2.3.0 and check if this replicates?

Closing this due to inactivity. Please raise a new issue in case you face the same problem after upgrading with v3.0.0

Closing this due to inactivity. Please raise a new issue in case you face the same problem after upgrading with v3.0.0