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.

Improve this question
9
  • 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. Commented Apr 25, 2019 at 20:09
  • The commonjs version is served with a simple node http-server, but that does not bear on the issue. Commented Apr 25, 2019 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? Commented Apr 25, 2019 at 22:58
  • 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 Commented Apr 26, 2019 at 12:50
  • 3
    Then best of luck to you. There is no benefit from such a scheme but hey, have fun. Commented Apr 26, 2019 at 14:26

1 Answer 1

Reset to default
-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"
    ]
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.