1

While there is a lot of questions and documentation on SystemJS, I still don't understand the import syntax. Specifically, why can typescript not find ng-boostrap.js using this code:

import { createPlatform } from '../../node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap',

which is directly importing the file, but this code works:

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js';

where my map in systemjs.config.js contains the line:

'@angular/core': 'npm:@angular/core/bundles/core.umd.js'.

Why I can not import directly from node_modules using systemJS?

0

1 Answer 1

2

Note: Though the solution below works, some of the information is incorrect. Please see discussion below in comments.

First of all, TypeScript doesn't know anything about JS files. It knows how to produce them, but doesn't know how to compile against them. So I am not sure how you actually got

import {createPlatform } from './node_modules/@angular/core/bundles/core.umd.js';

to compile in your TypeScript code.

We are able to do

import {createPlatform } from '@angular/core';

in TypeScript, because TypeScript is already looking in the node_modules. And @angular/core, if you look inside your node_module, has the directory @angular/core, with an index.d.ts file. This is the file that our TypeScript code compiles against, not the JS file. The JS file (the one in the above first code snippet) is only used at runtime. TypeScript should know nothing about that file.

Using the second snippet above, when the TypeScript is compiled to JS, it looks like

var createPlatform = require('@angular/core').createPlatform;

As runtime, SystemJS see's this, then looks at the map configuration, and maps the @angular/core to the absolute file location, and is able to load that file

'@angular/core': 'npm:@angular/core/bundles/core.umd.js'

This is the pattern that you should follow with the ng-bootstrap. Use the import that points to the TypeScript definition file, so that it can compile

import { ... } from '@ng-bootstrap/ng-bootstrap';

If you look in the node_modules/@ng-bootstrap/ng-bootstrap directory, you should see the index.d.ts file. This is what TypeScript will use to compile against. When it is compiled to JS, it is compiled the following

var something = require('@ng-bootstrap/ng-bootstrap').something;

And in the SystemJS config, we need to map @ng-bootstrap/ng-bootstrap to the absolute path of the module file, otherwise SystemJS won't know how to resolve it.

'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'

One of the key take-aways from this, is to understand the difference between compile-time and runtime. Compile type is TypeScript, which doesn't know anything about JS files, as those are runtime files. SystemJS is the one that needs to know about the runtime (JS) files.

Sign up to request clarification or add additional context in comments.

6 Comments

Your answer is almost correct except the beginning and end. If you specify "allowJs": true typescript will resolve such imports directly to JavaScript files but it will prefer .d.ts and .ts files if present.
@AluanHaddad Guess I don't know everything :-)
@AluanHaddad I'm assuming though that if you import JS files, you lose compile-time typing. Is that correct?
No that is not correct. The JavaScript files will be parsed by the same language service and type inference will be in full effect as well as supplemented by applicable JSDoc comments to provide as much type information as possible. The primary difference is that within the JS files, inference failures will not result in type errors. It is perfectly viable to have mixed JS and TS projects.
I'd like to vote for this answer, you got the problem right, but the issue isn't that TypeScript understands one kind of file and SystemJS understands another, actually both tools understand both types of files. The issue is that TypeScript and SystemJS use different resolution algorithms.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.