Cannot import a module above the `src/app` folder

[silenceisgolden]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.2
node: 8.1.4
os: darwin x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.2
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

Repro steps.

1. clone https://github.com/silenceisgolden/angular-cli-module-import-issue.
2. install latest global @angular/cli.
3. run ng serve --aot.

Notice that there are modules in a lib/ directory that is even with the generated src/ directory. This contains 2 modules and 2 components to reproduce the issue.

The log given by the failure.

> ng serve --aot
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 178d829ae638b28ca8b6                                                              
Time: 4870ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 15.1 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.15 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in ~/.../new-app/src/$$_gendir/app/app.component.ngfactory.ts (11,21): Cannot find module '../../../lib/component-b.component.ngfactory'.

ERROR in ~/.../new-app/src/$$_gendir/lib/component-a.component.ngfactory.ts (10,21): Cannot find module './component-a.component'.

ERROR in ~/.../new-app/src/$$_gendir/lib/module-a.module.ngfactory.ts (10,21): Cannot find module './module-a.module'.

ERROR in ~/.../new-app/src/$$_gendir/lib/component-b.component.ngfactory.ts (11,21): Cannot find module './component-a.component'.

ERROR in ~/.../new-app/src/$$_gendir/lib/component-b.component.ngfactory.ts (12,21): Cannot find module './component-b.component'.

ERROR in ~/.../new-app/src/$$_gendir/lib/module-b.module.ngfactory.ts (10,21): Cannot find module './module-b.module'.

ERROR in ~/.../new-app/src/$$_gendir/lib/module-b.module.ngfactory.ts (11,21): Cannot find module './module-a.module'.

ERROR in ./src/$$_gendir/app/app.component.ngfactory.ts
Module not found: Error: Can't resolve '../../../lib/component-b.component.ngfactory' in '~/.../new-app/src/$$_gendir/app'
 @ ./src/$$_gendir/app/app.component.ngfactory.ts 9:0-67
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

Desired functionality.

ng serve --aot should not error when importing a module outside of the generated source code from angular cli's new command.

Mention any other details that might be useful.

Please let me know if you need any other info.

Also please note the file paths in the error output have been stripped a bit to preserve some other requirements.

My intent is to create an angular app that will serve as documentation and at the same time have a compile step to build a library of components, but manage it all in one repository.

If this is a duplicate I apologize, but please explain what the current status is with this issue before closing if you can. Thanks!

[elliotaplant]

Possibly related to #7113.
TL;DR: Lock the dependency of "enhanced-resolve" to 3.3.0 by running:
npm i -DE enhanced-resolve@3.3.0
Though keep in mind that this is a workaround, and should be removed once "enhanced-resolve" fixes its bugs.

[silenceisgolden]

@elliotIndex @filipesilva I thought this was directly related to #7113 and/or #7136 but it seems like even with yarn@0.24.6 and @angular/cli@1.2.5 this is still an issue.

[filipesilva]

As far as I can tell, this is a different problem than the enhanced-resolve thing. This has to do with what the app root actually means, and how things are resolved relative to it.

AOT generates imports and whatnot, and because of the process paths the things it's trying to import don't really make sense because they are outside the project root:

ERROR in ~/.../new-app/src/$$_gendir/app/app.component.ngfactory.ts (11,21): Cannot find module '../../../lib/component-b.component.ngfactory'.

ERROR in ~/.../new-app/src/$$_gendir/lib/module-a.module.ngfactory.ts (10,21): Cannot find module './module-a.module'.

This is a bug and the fix might be a trivial fix, or it might not not.

But it's not something we consider very high priority to fix right now since the usecase (pretend library) is sort of a hack. Your app shouldn't be building an external library, but rather consuming it.

There's some guidance about linking libraries in https://github.com/angular/angular-cli/wiki/stories-linked-library but I understand that overall library guidance is scarce.

[silenceisgolden]

@filipesilva I would agree on the scarcity and I do think it is something @angular/cli can help with at some point. I would imagine that your base app would be generated by ng new <app-name> but inside of that generated app you could run ng g library or outside of an app maybe ng new <library-name> --library. Thanks for taking a quick look at it!

[intellix]

According to the issue #7333, it's not just about going above src/app but when you reference upwards of the root property inside .angular-cli.json.

I was waiting for the TypeScript node_modules issue to be fixed/merged but have since found an issue with doing that for our Core components.

We want to be able to replace SCSS variables and images referenced inside the core components. An example would be a HeaderComponent that references a logo.png and uses a $brand-primary for the background colour. Using different apps the stylePreprocessorOptions.includePaths and images are relative to the application that uses the Core.

An example would be a Coca Cola and Pepsi app which change logos and colours as shown here: https://github.com/intellix/angular-cli-library

If we were to import our Core through node_modules then we couldn't use different images/SCSS variables and the problem gets much more complex. It almost works but it's just AOT that's griefing me :)

We used to achieve this through SCSS entirely. We'd create a my-bootstrap-theme repository and you just import variables before to change colours. But that's global and goes against Components and ViewEncapsulation that have become generally available since Angular

[playground]

I have some private share modules that are installed in node_modules/@my
"ng build" works fine
but "ng build -prod" is giving errors "cannot find module"

running cli v1.4.0