Changing lite server to use dist directory

Question

I have set up an Angular 2 project using the starter sample. Code is placed under the apps directory, ts compiles to js in the same structure and lite-server serves files correctly. All works correctly.

I'd like to move the ts output to a dist directory as I don't like js & map files in the same structure (this is pretty common in other environments).

Adding

"outDir": "dist"

to the tsconfig.json file does cause the ts to be compiled into .js under the dist/app/app directory. Not sure why this adds a second app to the structure.

Through trial and error testing, seems basedir = "./" works for the old structure. Not sure why this works but it does.

Using bs-config.js

module.exports = {
  port: 3000,
  server: {
    // old structure, this works
    baseDir: "./"
    // new structure commented out, does not work
    //baseDir: "./dist"
  }
};

Have played with this a while but can't get the dist structure to serve files.

Always get a "Cannot GET /" response.

My tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist"
  }
}

Would appreciate if someone could explain my findings and what I am missing.

can you share your `tsconfig.json` file ? – ranakrunal9 Nov 18 '16 at 05:35 — ranakrunal9, Nov 18 '16 at 05:35
@ranakrunal9 Added. Thanks. – GregHouse Nov 18 '16 at 05:51 — GregHouse, Nov 18 '16 at 05:51

score 0 · Answer 1 · answered Nov 18 '16 at 06:12

0

Because of your dist folder structure like dist/app/app may be lite-server is not able to server your files. So you can try by defining your base path in your tsconfig.json as per your folder structure so your dist folder will have correct folder structure, not strcture like dist/app/app and after it define correct server.baseDir in your bs-config.js :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "baseUrl": "./app",
    "outDir": "./dist"
  }
}

answered Nov 18 '16 at 06:12

ranakrunal9

13,320
3
42
43

Thanks. After that tsconfig.json change, the structure under /dist looks correct (an apps folder along with the source structure). I have tried the following bs-config.js settings, both yield the same "Cannot GET /" ` module.exports = { port: 3000, server: { // does not work //baseDir: "./dist/app" // does not work //baseDir: "./dist" } }; ` – GregHouse Nov 19 '16 at 17:19
Sorry about the formatting of the code. After 10 unsuccessful attempts to format, reading the docs, google search etc. still a mystery how to get linefeeds in the code comment (` only seems to work when used on each line and double-space ENTER or
does not work for me. – GregHouse Nov 19 '16 at 17:25

Changing lite server to use dist directory

1 Answers1