Angular-cli: Module resolution fails in v1.7.0 when "baseUrl" is set in tsconfig

[mprahl]

Versions

Angular CLI: 1.7.0
Node: 8.9.4
OS: linux x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.11.0

Repro steps

• Run git clone https://github.com/mprahl/angular-cli-9671-reproducer.git
• Run cd angular-cli-9671-reproducer && npm install && ng serve

Observed behavior

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'reproducer/hello/hello.component' in '/path/to/angular-cli-9671-reproducer/src/app'

Desired behavior

The imports should work as they did in v1.6.x.

Mention any other details that might be useful (optional)

The following commit broke this functionality: https://github.com/angular/angular-cli/commit/29aa274b6721c1399ca2baca18565b21254fb3f0

Running angular-cli with commit https://github.com/angular/angular-cli/commit/29aa274b6721c1399ca2baca18565b21254fb3f0 reverted works as expected.

[athulreji]

Don't do theimport { AppRoutingModule } from 'app/app-routing.module' thing.

In file: tsconfig.json, set "baseUrl": "src"

In file: tsconfig.app.json, set "baseUrl": "."

[mprahl]

@athulreji my team and I like that import style and it should be supported since it used to work in prior versions of angular-cli. I submitted PR #9673 which resolves this issue on my end.

[clydin]

With a new CLI v1.7 project the following app/app.module.ts compiles successfully:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from 'app/app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note the import { AppComponent } from 'app/app.component'; line.

Most editors will complain though, as they typically only support looking for the exact filename of tsconfig.json (there are/were open issues with vscode for configurable options in this regard). Regardless, to alleviate this, set the baseUrl in the root tsconfig.json to src.

[mprahl]

@clydin my example wasn't quite clear. Here is the app I can't compile with v1.7.0:
https://github.com/release-engineering/mbs-ui

Here are the errors I get:

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'app-routing.module' in '/home/mprahl/git/mbs-ui/src/app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'app.component' in '/home/mprahl/git/mbs-ui/src/app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'mbs/module-components/module-components.component' in '/home/mprahl/git/mbs-ui/src/app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'mbs/module-detail/module-detail.component' in '/home/mprahl/git/mbs-ui/src/app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'mbs/modules/modules.component' in '/home/mprahl/git/mbs-ui/src/app'
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'mbs/services/module.service' in '/home/mprahl/git/mbs-ui/src/app'

[TheLegion]

We ejected webpack config, in our case I was able to solve this problem by adding "./src" to resolve.modules:

resolve: {
    ...
    modules: ["./node_modules", "./src"],
    ....
}

[Akimi]

Can I ask, when this will be fixed please?

[BBaysinger]

@athulreji

Don't do the import { AppRoutingModule } from 'app/app-routing.module' thing.

Are you saying to not do root-relative imports?

[BBaysinger]

Is this issue resolved? I'm unclear on what is going on here. What solution can I use for now?

[mprahl]

@BBaysinger the issue is not resolved. I've created a git repo https://github.com/mprahl/angular-cli-9671-reproducer that reproduces this issue.

You can see that commit https://github.com/mprahl/angular-cli-9671-reproducer/commit/1917838bef92a6be21ff06d424729867aba7ac6e works but when updating to v1.7.3 in commit https://github.com/mprahl/angular-cli-9671-reproducer/commit/675a4631caaa19559df16b5944f06e7dc8e2dff5 it breaks.

[FDIM]

I am having the same issue as well, but in my case we have one app (styleguide) that is outside of the src folder and building that app fails with cli 1.7.3, while it works with 1.6.x.
Seems like baseUrl option in tsconfig.json is partly respected? And yes, almost all our paths are relative to root directory.

EDIT:
I've got it to work for js/ts files with this:

...
"baseUrl" : ".",
"paths": {
  "*": [ "node_modules/*", "source/*", "styleguide/*"]
}
...

But now it breaks for html files which we are still requiring in older angularjs files (we are in a process of upgrading).

[Akimi]

Is this issue still present in angular cli 6.0.0? Or there is some new solution? What is the correct way to have imports like import { } from "shared" instead of import { } from "../../../../../shared"?

I tried angular cli 6.0.0 and it seems the problem is still here.

EDIT:

I was mistaken, after upgrade to angular-cli 6.0.0 everything works OK now.

[BBaysinger]

@Akimi It's seriously fixed? My mind was about ready to blow, as I thought it was still an issue. Wheeeeewww.

[Akimi]

@BBaysinger I am using "@angular/cli": "6.0.5" without any problems now.

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