Angular build cannot find module with relative path (on azure dev ops)

Question

I have a problem getting a mid-sized Angular 7 project to build on Azure Dev Ops Pipelines. So I created a minimal project to recreate the issue.

Using Angular CLI (7.2.4) I created a new project

ng new minimal-app

It builds locally and on Azure just fine. I edited app.component.ts to use my UserModel, lines 2, 11 & 14

import {Component} from '@angular/core';
import {UserModel} from '../Models/User.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'minimal-app';
  user = new UserModel();

  constructor() {
    this.user.name = 'Jo';
  }

}

the User.model.ts file contains

export class UserModel {
  id: number;
  name: string;
}

This also compiles on local and Azure just fine. The issue comes when trying to add a nested model, see Action.model.ts

export class ActionModel {
  id: number;
  datetime: string;
}

and changing the UserModel

import {ActionModel} from './Action.Model';

export class UserModel {
  id: number;
  name: string;
  actions: ActionModel[];
}

This works locally but on Azure Dev Ops I get

ERROR in src/Models/User.model.ts(1,27): error TS2307: Cannot find module './Action.Model'.

##[error]Bash exited with code '1'

I've not changed any Angular config files, they are all default for new project. The azure pipelines yml is

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

Answer 1

According to your code, I notice that you are using Ubuntu agent which is case sensitive.

And also, the module you configured is "Action.model", but while import, the name you used is "Action.Model". For ubuntu and linux, it could not be identified as same because of its case sensitive.

I think you may execute these script locally with windows which is case insensitive. That's why it's worked locally.

So, for solved, you need to change your script as :

import {ActionModel} from './Action.model';

export class UserModel {
  id: number;
  name: string;
  actions: ActionModel[];
}