Angular-cli: TypeScript files added to `scripts` in .angular-cli.json aren't transpiled to target ES version.

[pietmichal]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.0.4 (e)
node: 6.10.0
os: win32 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.4
@angular/compiler-cli: 4.1.3

Repro steps.

1. Create example.ts file in src directory.

// example.ts
import 'rxjs/add/operator/map';

1. Add example.ts to scripts array in .angular-cli.json.

// ...
"scripts": [ "example.ts" ],
// ...

1. Run ng serve command.
2. Check browser's console.

The log given by the failure.

Uncaught SyntaxError: Unexpected token import
    at eval (<anonymous>)
    at webpackJsonp.116.module.exports (addScript.js:9)
    at Object.107 (example.ts?91e1:1)
    at __webpack_require__ (bootstrap 2885b1c…:52)
    at Object.247 (addScript.js:10)
    at __webpack_require__ (bootstrap 2885b1c…:52)
    at webpackJsonpCallback (bootstrap 2885b1c…:23)
    at scripts.bundle.js:1

Desired functionality.

TypeScript files added to scripts in .angular-cli.json are transpiled to target ES version.

[clydin]

The "scripts" option is roughly the equivalent of adding the file via a script element in "index.html" (i.e., no processing occurs on the content of the script).

[Meligy]

For TypeScript, you are supposed to just import these.

I've had the same use case as you, shared place for RxJS operators. I created a new file, and imported it from both environment files (base and production) and imported environment in test.ts (it's already imported in main.ts). That guaranteed it got called in normal build and tests.

[Brocco]

Correct, follow the advice provided by @clydin & @Meligy, closing this issue as the appropriate workaround is above.

[adamdport]

@Brocco I was hoping to load Google Analytics with scripts. However, I need to have access to environments.ts to set my tracking ID. GA needs to load first (before Angular) so that app loading time can be properly tracked. If scripts is JS only, I can't import from environments.

Can this be reconsidered?

[t-ricci-enhancers]

@adamdport I need to do the same thing... How did you do it?

[adamdport]

@t-ricci-molecle get your barf bag ready.

I made a file next to index.html called google-analytics.js. It's loaded by .angular-cli.json:

"assets": ["assets", "google-analytics.js"],
"scripts": ["google-analytics.js"],

Here is a gist of its contents:

switch(document.location.host){ //TODO: would LOVE to find a way to reference environments.ts, but this doesn't seem possible today
  case 'www.my-production-domain.com':
    tracking.googleAnalyticsId = 'UA-1234';
    break;
  case 'www.my-staging-domain.com':
    tracking.googleAnalyticsId = 'UA-2345';
    break;
  case 'localhost':
  default:
    tracking.googleAnalyticsId =  'UA-3456';
    break;
}

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', tracking.googleAnalyticsId, 'auto');

It's not ideal but that's what I ended up with. Looking back on it, I wonder if you could just set a global variable (eg. on window) inside your environments.ts file and reference that from google-analytics.js?

[t-ricci-enhancers]

@adamdport I'm using the gtag.js new tracking, and in the example gets the UA in a GET query parameter of the script src. But after some tests I figured that it could be omitted and specified in the gtag config call.

Anyway I'm using a similar approach.

[andreluisce]

just import your file from main.ts

Like so:

import 'example.ts';

[NKjoep]

@andreluisce yes that would work for sure, but that way your users will have to download inline, polyfills, scripts, and main script before executing the code :) which doesn't sound optimal in the exposed use-cases.

@adamdport 's example is the best solution at the moment, good balance between complexity and flexibility.

Still, I'd love to have a basic TS support for the scripts declared in the .angular-cli.json.

[kylietmo]

I would also appreciate TS support for the scripts declared in the angular.json, as I am currently trying to stand up a hybrid frontend application with Angular 8 and legacy AngularJS code that consists of both JS and TS files and that has no exportable modules, and so simply importing the TS files is not possible without significant preprocessing that is not yet desired.

[angular-automatic-lock-bot[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._}