Angular-cli: ng serve failed: "Cannot find module ... " for all imports starting with "src/"

[HymanZHAN]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

I am not sure. Up until I ran npm insatll to update some other dependencies other than angular ones, I did not encounter any problem.

Description

The project was running successfully until I ran npm install to update a few dependencies and resolve some vulnerabilities. Then the project just broke and told me that all the imports starting with src/ failed.

🔬 Minimal Reproduction

I have a tutorial project here. You may just clone it and run ng serve.

🔥 Exception or Error

ERROR in src/app/_services/event.service.ts(6,29): error TS2307: Cannot find module 'src/environments/environment'.
src/app/_services/voter.service.ts(4,29): error TS2307: Cannot find module 'src/environments/environment'.
src/app/events/event-card/event-card.component.ts(2,23): error TS2307: Cannot find module 'src/app/_models/event'.
src/app/events/event-detail/event-detail.component.ts(2,30): error TS2307: Cannot find module 'src/app/_services/event.service'.
src/app/events/event-detail/event-detail.component.ts(4,23): error TS2307: Cannot find module 'src/app/_models/event'.
src/app/events/event-detail/event-detail.component.ts(5,25): error TS2307: Cannot find module 'src/app/_models/session'.
src/app/events/event-list/event-list.component.ts(4,23): error TS2307: Cannot find module 'src/app/_models/event'.
src/app/events/event-new/event-new.component.ts(3,30): error TS2307: Cannot find module 'src/app/_services/event.service'.
src/app/events/event-new/event-new.component.ts(5,23): error TS2307: Cannot find module 'src/app/_models/event'.
src/app/events/event-new/event-new.component.ts(6,40): error TS2307: Cannot find module 'src/app/_validators/location-or-url.validators'.
src/app/events/event-new/event-new.component.ts(7,31): error TS2307: Cannot find module 'src/app/_validators/date.validators'.
src/app/events/event-session-new/event-session-new.component.ts(7,33): error TS2307: Cannot find module 'src/app/_validators/restricted-words.validator'.
src/app/events/event-session-new/event-session-new.component.ts(8,25): error TS2307: Cannot find module 'src/app/_models/session'.
src/app/events/event-session/event-session.component.ts(2,25): error TS2307: Cannot find module 'src/app/_models/session'.
src/app/events/event-session/event-session.component.ts(4,29): error TS2307: Cannot find module 'src/app/_services/auth.service'.
src/app/events/event-session/event-session.component.ts(5,30): error TS2307: Cannot find module 'src/app/_services/voter.service'.
src/app/user/login/login.component.ts(2,29): error TS2307: Cannot find module 'src/app/_services/auth.service'.
src/app/user/login/login.component.ts(4,29): error TS2307: Cannot find module 'src/app/_services/noty.service'.
src/app/user/profile/profile.component.ts(3,29): error TS2307: Cannot find module 'src/app/_services/auth.service'.
src/app/user/profile/profile.component.ts(5,29): error TS2307: Cannot find module 'src/app/_services/noty.service'.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.0
Node: 10.14.2
OS: win32 x64
Angular: 7.1.1
... animations, common, compiler, core, forms, language-service
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.0
@angular-devkit/build-angular     0.12.3
@angular-devkit/build-optimizer   0.12.3
@angular-devkit/build-webpack     0.12.3
@angular-devkit/core              7.1.0
@angular-devkit/schematics        7.1.0
@angular/cli                      7.1.0
@angular/compiler-cli             7.1.4
@ngtools/webpack                  7.2.3
@schematics/angular               7.1.0
@schematics/update                0.11.0
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.28.4

Anything else relevant?
I tried to resolve the issue by fixing the version mismatch between @angular/compiler and @angular/compiler-cli as it was prompted after the npm install, saying that npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none is installed. You must install peer dependencies yourself. Not helping at all, if not making things worse...

[alan-agius4]

Hi, looking at your code base, this is working as intended.

As imports to local modules need to be relative to the file that is importing them example in
https://github.com/HymanZHAN/EventBoard/blob/052f175dc5ec51643627aeb22a6d156fe891b53b/src/app/_services/event.service.ts#L6 and not absolute.

import { environment } from 'src/environments/environment';

Should be

import { environment } from '../../environments/environment';

[HymanZHAN]

@alan-agius4 Please don't close the issue so quickly... The issue is not resolved...
You are right but I am not wrong. The code in that repo has worked without problems until I tried to manually update some angular-related packages. Anyways, the path 'src/environments/environment' should work because in my project tsconfig.json (created by angular-cli):

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

I have specified that { "compilerOptions": { "baseUrl": "./"}}. Therefore, the angular compiler should also pickup any imports that starts with src/.

Actually, you can check another repo of mine here, which is a newly generated project using angular-cli 7.3.5 where all the code in the src folder is the same as the previous one I provided (I basically copied the whole folder over). Notice the import { environment } from 'src/environments/environment'; in the event.service.ts file here. If you clone the new repo, npm install and ng serve, the project should build without any problem.

The ng version output of the new project:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.5
Node: 10.14.1
OS: linux x64
Angular: 7.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.5
@angular-devkit/build-angular     0.13.5
@angular-devkit/build-optimizer   0.13.5
@angular-devkit/build-webpack     0.13.5
@angular-devkit/core              7.3.5
@angular-devkit/schematics        7.3.5
@angular/cli                      7.3.5
@ngtools/webpack                  7.3.5
@schematics/angular               7.3.5
@schematics/update                0.13.5
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

[alan-agius4]

@HymanZHAN, seeing that on ng new it works as expected it should be something related to your project structure/configuration.

Seeing your tsconfig configuration, I'd say that the root cause of such issue is https://github.com/HymanZHAN/EventBoard/blob/052f175dc5ec51643627aeb22a6d156fe891b53b/tsconfig.json#L4

[HymanZHAN]

@alan-agius4 That fixes the issue. Thanks!

[talohana]

What caused my problem is { "compilerOptions": { "baseUrl": "./"}} being set in the tsconfig.app.json file which is inside the src folder.
Removing it or specifying it to the parent folder fixed 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._}