3

goal

With one unified code base, I want to be able to...

  1. compile with CLI and serve the entire app with the resulting bundled files
  2. use JIT compilation and serve the app with each file having it's own network request (no bundling)

current attempt

So far, I have created separate tsconfig files for each build.

My primary difficulty is setting paths for templateUrl in components.

CLI uses relative paths for templateUrl by default, while JIT needs the moduleId set on the component to use relative paths.

e.g.

@Component({
  selector: 'app-root',
  moduleId : module.id,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

... works for dev mode (commonjs), but fails for prod mode (CLI) with the following error:

Cannot find name 'module'. Do you need to install type definitions for node? Try npm i @types/node.

While removing the module.id works with the CLI, but not the commonjs. In that case, the browser can not find the html file because it is looking in the source root.

I have tried..

  • (with reservations) installing node type
  • casting "module" as any
  • ambient declaration of "module",
    • declare const module: {id: any};
  • wrapping module in a function that conditionally evaluates only in the commonjs scenario
    • i.e. moduleId : environment.bundled ? undefined : (() => module.id)()

and all have failed for different reasons.

Any suggestion on this approach or a new approach will be most appreciated.

bnieland
  • 6,047
  • 4
  • 40
  • 66
  • this question is very unclear, the angular cli natively provides a dev server... you simply do ng serve? for prod you do ng build --prod... that's all there is to it, if your prod builds are failing there is a reason for that. – bryan60 Apr 25 '19 at 20:09
  • The commonjs version is served with a simple node http-server, but that does not bear on the issue. – bnieland Apr 25 '19 at 22:07
  • Your question doesn’t make any sense. Why aren’t you using the inbuilt tools in the cli? What’s the point of building your own odd infrastructure? – bryan60 Apr 25 '19 at 22:58
  • I have edited the question to make it more clear, I hope. As for why, we just like to have the files unbundled during development so that we can easily modify js/css/html files without recompiling. – bnieland Apr 26 '19 at 01:00
  • 1
    the angular dev environment literally handles all of that for you... you change a file, it recompiles that chunk and restarts your dev server.... have you read any of the docs on the angular cli at all? Your stated 2 goals are ALREADY SOLVED – bryan60 Apr 26 '19 at 12:50
  • @bryan60 Your comments are not answering my question, only disagreeing with my goals and being rude. – bnieland Apr 26 '19 at 14:12
  • they are answering your question. I'm not disagreeing with your goals, they're so common that they've already been thought of by the team that built the CLI, you clearly haven't read any angular CLI documentation. the sequence of events is incredibly simple. You run `ng serve` for your dev environment, where angular handles detecting changes and recompiling and running your dev server. `ng build --prod` creates your distribution package. You need to research your tools better as this is all on the homepage of the angular CLI site. – bryan60 Apr 26 '19 at 14:15
  • My 2nd goal is not use bundling or the CLI at all in dev mode. – bnieland Apr 26 '19 at 14:23
  • 3
    Then best of luck to you. There is no benefit from such a scheme but hey, have fun. – bryan60 Apr 26 '19 at 14:26

1 Answers1

-2

In the end, I found that vsCode was being more restrictive than tsc or CLI for that matter, and I was able to just

  1. declare module in a .d.ts file,
  2. add it to the to my types in the tsconfig for the CLI (prod) version and
  3. exclude it in the tsconfig for the JIT (dev) version..

src/ambient.d.ts

declare var module: {id: string};

tsconfig-cli.json

{
    "compileOnSave": false,
    "compilerOptions": {
        ...
        "module": "es2015",
        "moduleResolution": "node",
        ...
        "types": [
            "src/ambient.d.ts"
        ]
    }
}

tsconfig-dev.json

{
    "compilerOptions": {
        ...
        "module": "commonjs",
        "moduleResolution": "node",
        ...
    },
    ...
    "exclude":[
      "src/main/main.ts",
            "src/ambient.d.ts"
    ]
}
bnieland
  • 6,047
  • 4
  • 40
  • 66