Angular-cli: Referring a typescript file outside of project directory is not working

[sugarg]

OS: Windows 10
angular-cli version: 1.0.0-rc.0
Node version: 6.9.5
Npm version: 3.10.10

Following is my directory structure:

├── MainProject
│   ├── package.json
│   ├── .angular.cli.json
│   ├── src (folder)
├── Shared
│   ├── package.json
│   ├── Service
│   │   ├── Service.ts

My angular-cli project is in MainProject directory. In MainProject, I am trying to refer Shared/Service/Service.ts file (file is outside of MainProject folder). Service.ts file has import { Injectable, Injector } from "@angular/core"; and import { Router } from "@angular/router"; in it. I was getting @angular/core and @angule/router not found error while compiling therefore I included package.json in Shared folder which has reference to these packages and did npm install in Shared directory. Developer build of MainProject is working fine but prod build is giving following error. Please if someone can help in resolving it.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Apps/Shared/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Apps/Shared/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/Apps/Shared/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/modules/uci.app.module.ngfactory' in 'C:\Apps\MainProject\src'
 @ ./src/main.ts 4:0-85
 @ multi ./src/main.ts

[hansl]

This is by design, kind of. This is a typescript limitation. You need to change your rootDirs in your tsconfig.json to be able to access files; typescript does not compile typescript files outside the rootDir of your project.

Alternatively, you should build your Shared library and add the output of that in your tsconfig.json under paths. If you're planning to release Shared separately that's how I would do it.

[karanhinduja]

I am also facing the same issue, is there any sample reference

[lukepighetti]

@hansl Looking for some clarification here. I have an interfaces.ts file that is generated external to my project. The location of this file is static, but well outside my src folder. What's the correct method for importing this file for consumption?

[PigBoT]

My nodejs microservices share *.d.ts (actual names are specific, not glob patterns) files outside of the root. The nodejs microservices, also using typescript, have no problem loading this file when specified in the tsconfig.json files array. When the *.d.ts files are added to angular's tsconfig.json files array, Angular fails to server/compile.

[lukepighetti]

For others trying to find a way to share resources between ts projects, the best method I've found is to make symbolic links

[PigBoT]

@lukepighetti that's definitely a good idea. My primary dev environment is windows host for Docker. I'm trying to think through it, and I think it can still be done with a little creativity.

For now, the quick and less desirable solution is to put my shared d.ts files within the Angular src scope and then use the tsconfig files setting in microservices to use the d.ts files from there.

[lukepighetti]

one note about symbolic links, this works well in a monorepo but I would not use it across repos. In that case, I would probably create a package with shared data and depend upon it

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}