HOWTO compile with untyped global object?

[andrewconnell]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.2
node: 7.7.3
os: darwin x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.3

Repro steps / Question

I'm referencing an external JS file via CDN in index.html. This has an associated type definition (@types/office-js), but it isn't a module and it can't be included using the standard import syntax.

Within the main.ts I need to reference the Office object in order to bootstrap the application, but while I can compile the app with TypeScript, Webpack keeps giving me an error that the object can't be found. Tried referencing it within the tsconfig.app.json but no luck.

There is already a discussion about this issue on this specific library here: microsoft/TypeScript#11420. They recommend using the /// <reference> syntax... but that isn't working for me either.

At this point I'm happy if I can just globally mark Office as an any so I can at least (1) get the app to compile & (2) run... because at this point I can't do either. Adding typing will be an added benefit. I can do that by adding declare let Office: any; to the top of the file, but that's losing all benefits of typings.

[Brocco]

Do you happen to have a repo with this setup?

[andrewconnell]

Yup: https://github.com/andrewconnell/minicrm-addin-ng

The file in question is the main.ts... you won't be able successfully run the app as it has to run from within the Outlook web client... but just getting the CLI to compile it (with webpack) & having types working is what I'm trying to get work.

I've got it "working" with a bad workaround as I said above (adding declare let Office: any = {}; before using Office in the file), but that's not an ideal solution. Open to ideas...

[dave11mj]

@andrewconnell if it has a types definition like @types/office-js you might be able to include them on src/tsconfig.app.json. This wiki entry on 3rd Party Library Installation has some great steps on how to do it.

[hongbo-miao]

If need a simple repo to reproduce, I have one here
https://github.com/Hongbo-Miao/office-addin-angular

[andrewconnell]

@dave11mj yeah, I've tried that but it hasn't worked for me.

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}