Angular-cli: Can't include file from outside the cli root directory

[alexkibler]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.3
node: 6.10.3
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Repro steps.

This repo. In this solution, I have two projects, BuildSystemTest which is the cli project, and CommonFrontEnd, which is a project that will hold reusable angular services and components to be imported into the modules in BuildSystemTest. So in this example, I've created a service called TestService that gets imported into BuildSystemTest's app module.

The log given by the failure.

ERROR in C:/Users/akibler/Documents/Visual Studio 2017/Projects/BuildSystemTest/CommonFrontEnd/angular/test.service.ts (1,28): Cannot find module '@angular/core'.

Desired functionality.

As mentioned above, I want to be able to host angular components and services in a separate visual studio project, import it into a module within my main project.

Mention any other details that might be useful.

[alexkibler]

If I try to compile with ng build --aot I get

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:/Users/akibler/Documents/Visual Studio 2017/Projects/BuildSystemTest/CommonFrontEnd/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Users/akibler/Documents/Visual Studio 2017/Projects/BuildSystemTest/CommonFrontEnd/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in C:/Users/akibler/Documents/Visual Studio 2017/Projects/BuildSystemTest/CommonFrontEnd/node_modules/@angular/core/core.d.ts

[alexkibler]

It works just fine when I build with ng build but if I add --aot or --prod, it starts blowing up

[filipesilva]

Heya, the 'right' way of doing that is by actually making a library instead of just importing TS files from another project.

You can find a similar issue in https://github.com/angular/angular-cli/issues/6228, and a detailed explanation in https://github.com/angular/angular-cli/issues/6228#issuecomment-301024884.

[alexkibler]

Hmm, thanks for the information. Is there no "wrong" way of getting this to work without making a library? Although I guess it's not that big of a deal since this is all theoretical right now anyway

Wait, nevermind, I just read the explanation you linked. Thanks!

[alexkibler]

Hey @filipesilva I think that might not have been the issue. I went to your demo lib repo and basically cloned it inside of my project. I copied the demo entirely (except I added a package.json to get the angular stuff, because it's in an entirely separate folder from the CLI project), but it's still getting

Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported.

I've updated my repo here for you to check out.

[filipesilva]

Heya, I had a go at your setup and as far as I can tell the bit that you're missing is building the library, and then linking it. That's why webpack isn't correctly finding the dependencies (the error message you get means it's using the wrong dependencies).

[alexkibler]

@filipesilva Oh, interesting, I didn't realize that was something I needed to do. If you don't mind, how do I go about doing that? This step is totally new to me

[filipesilva]

Well, it really depends on your setup. If you're using my starter then you need to run the npm build script.

[rojasjandro89]

@filipesilva I have a question. If you want to create (and maintain) a component library what would be the best project structure then? One tends to go with separation of concerns and separate the library (modules) in a different folder than the demo app but then we have the problem with the dependencies. Can you point me in the right direction?

[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._}