Compiled Single output file typescript is trying to load node modules in browser

Question

I have a tsconfig file which builds a frontend typescript application to a single output:

{
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "lib": [
            "es2015",
            "es2015.iterable",
            "dom"
        ],
        "sourceMap": true,
        "outFile": "output.js",
        "strict": true
    }
}

I am loading the output in the browser using the <script> tags and i am using systemjs [https://jspm.io/system@0.19.34.js] with the snippet to bootstrap the application:

SystemJS.import("Application")
    .then((module) => {
        console.log(module);
    })
    .catch((error) => {
        console.error(error);
    });

My understanding of how i've compiled the application is that all npm dependencies should be built into the output.js file. However this is not the case I in the inspector that the browser is trying to load the lodash module at https://registry.jspm.io/lodash.js

Answer 1

all npm dependencies should be built into the output.js file

No it is not. Typescript compile's output file only affects code for project, not for any modules imported in those code. If you'd like to have bundle for browser you should use bundler like webpack, etcs.